1、前端的三個(gè)基本構(gòu)成
結(jié)構(gòu)層HTML陨舱、表現(xiàn)層CSS和行為層JavaScript
2.AMP HTML
定義：流動(dòng)網(wǎng)頁提速（Accelerated Mobile Pages，AMP）是google推行的一個(gè)提升頁面資源載入效率的HTML提議規(guī)范版仔。
基本思路有兩點(diǎn)：
（1）使用嚴(yán)格受限的高效HTML標(biāo)簽以及使用靜態(tài)網(wǎng)頁緩存技術(shù)來提高網(wǎng)絡(luò)訪問靜態(tài)資源的性能和用戶體驗(yàn)游盲。
（2）盡量避免使用目前網(wǎng)頁上渲染或展示性能比較差的標(biāo)簽误墓，并將部分網(wǎng)頁靜態(tài)內(nèi)容緩存到頁面上進(jìn)行分發(fā)
內(nèi)聯(lián)體積較小的樣式和圖片、延時(shí)加載較大的靜態(tài)資源文件等益缎，進(jìn)而提高網(wǎng)頁的初始載入速度谜慌。
例如在AMP中，<img>莺奔、<video>欣范、<audio>、<embed>令哟、<form>恼琼、<table>、<frame>屏富、<object>晴竞、<iframe>這類較慢或可能影響頁面內(nèi)容渲染的標(biāo)簽是不建議被直接使用的，因?yàn)樗鼈兂３Ｔ陧撁嬖亟馕鰰r(shí)就要去做較慢的渲染或者會(huì)立即直接下載src或param等屬性里面的內(nèi)容狠半。
即使用<amp-video>噩死、<amp-img>、<amp-audio>神年、<amp-pixel>等來做頁面元素內(nèi)容的延遲載入或渲染已维，其實(shí)本質(zhì)上這類標(biāo)簽的邏輯封裝實(shí)現(xiàn)和異步加載有點(diǎn)類似。
3.ECMAScript 6對函數(shù)參數(shù)進(jìn)行了新的設(shè)計(jì)已日，主要添加了默認(rèn)參數(shù)垛耳、不定參數(shù)和拓展參數(shù)。
// 默認(rèn)參數(shù)
function sayHi(name = 'ouven'){
console.log(`Hello ${name}`);
}
sayHi(); // Hello ouven ”
// 不定參數(shù)
function sayHi(...name){
// 這里 name 的值為['ouven', 'zhang']
console.log(name.reduce((a,b)=>`Hello ${a} $飘千`));
}
sayHi('ouven', 'zhang'); // Hello ouven zhang
// 擴(kuò)展參數(shù)
let name = ['ouven','zhang'];
function sayHello(name1, name2){
console.log(`Hello ${name1} ${name2}`);
}
sayHello(...name); // Hello ouven zhang
4.模塊module
//簡單的模塊導(dǎo)入導(dǎo)出示例
import {sayHi} from'./people';
export default sayHi;
5.表現(xiàn)層動(dòng)畫實(shí)現(xiàn)
JavaScript直接實(shí)現(xiàn)動(dòng)畫艾扮、可伸縮矢量圖形（Scalable Vector Graphics，SVG）動(dòng)畫占婉、CSS3 transition、CSS3 animation甫恩、Canvas動(dòng)畫逆济、requestAnimationFrame
6.requestAnimatioFrame
requestAnimationFrame是前端表現(xiàn)層實(shí)現(xiàn)動(dòng)畫的另一種API實(shí)現(xiàn)，
它的原理和setTimeout及setInterval類似：都是通過JavaScript持續(xù)循環(huán)的方法調(diào)用來觸發(fā)動(dòng)畫動(dòng)作的
7.requestAnimatioFrame 相比setTimeout,setInterval的好處?
requestAnimationFrame是瀏覽器針對動(dòng)畫專門優(yōu)化而形成的API磺箕，在實(shí)現(xiàn)動(dòng)畫方面性能比setTimeout及setInterval要好奖慌，可以將動(dòng)畫每一步的操作方法傳入到requestAnimationFrame中，在每一次執(zhí)行完后進(jìn)行異步回調(diào)來連續(xù)觸發(fā)動(dòng)畫效果松靡。
和setInterval方法類似requestAnimationFrame只是將回調(diào)的方法傳入到自身的參數(shù)中處理執(zhí)行简僧，而不是通過setInterval調(diào)用，其他的實(shí)現(xiàn)過程則基本一樣
8.響應(yīng)式頁面實(shí)現(xiàn)雕欺？
一是通過前端或后端判斷userAgent來跳轉(zhuǎn)不同的頁面完成不同設(shè)備瀏覽器的適配岛马，也就是維護(hù)兩個(gè)不同的站點(diǎn)來根據(jù)用戶設(shè)備進(jìn)行對應(yīng)的跳轉(zhuǎn)棉姐；
二是使用media query媒體查詢等手段，讓頁面根據(jù)不同設(shè)備瀏覽器自動(dòng)改變頁面的布局和顯示啦逆，但不做跳轉(zhuǎn)
9.CDN的基本思想
盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的環(huán)節(jié)伞矩，實(shí)現(xiàn)內(nèi)容的快速、穩(wěn)定傳輸
10.屏幕適配布局夏志？
在移動(dòng)端解決內(nèi)容按照不同屏幕大小自動(dòng)等比例縮放的一種布局計(jì)算方式
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no"/>
控制頁面使用移動(dòng)端瀏覽器展示并保持內(nèi)容不縮放乃坤。
11.屏幕適配布
（1）依據(jù)HTML中<html>標(biāo)簽元素的zoom屬性縮放
（2）根據(jù)REM自適配方案實(shí)現(xiàn)等比例縮放。
