在看以下總結(jié)時(shí)，要注意兩個(gè)詞，并發(fā) 和 緩存
一. （在日常開(kāi)發(fā)中), 打包構(gòu)建要快
想象一下寫(xiě)完代碼后，編譯代碼要5min，假如再改動(dòng)代碼，打包要10min。。。這種開(kāi)發(fā)效率是特別慢的
- 并發(fā)構(gòu)建（使用插件）
- loader的使用是需要查找文件的，所以要過(guò)濾不相關(guān)文件
- 使用緩存
二. 資源加載要快
打開(kāi)一個(gè)網(wǎng)站后，下載資源的速度要快
1. 資源要壓縮，50MB相比50kb肯定是50kb的下載快。可以使用webpack等構(gòu)建工具（里的plugin）
- 圖片壓縮
- css壓縮合并
- js壓縮合并
- 圖標(biāo),svg的合并（svg sprite代替icon)
2. 資源越少越好，文件的合并打包，這樣的話請(qǐng)求數(shù)會(huì)減少，提高速度。服務(wù)端可開(kāi)啟gzip，壓縮請(qǐng)求的頁(yè)面，提高帶寬。
- js、css壓縮合并
- 使用緩存來(lái)減少請(qǐng)求，cache-control
3. 請(qǐng)求的資源距離要近，靜態(tài)資源部署到cdn
4. 資源按需加載（懶加載、異步加載）
- 根據(jù)視口或者點(diǎn)擊后在加載頁(yè)面，而不是一口氣加載完
- 圖片懶加載
- 組件懶加載
- 路由懶加載
5. 使用先進(jìn)運(yùn)輸工具(http2.0)
- 二進(jìn)制分幀層
- 多路復(fù)用（并發(fā)請(qǐng)求）
- 數(shù)據(jù)流優(yōu)先級(jí)
- 頭部壓縮
- 服務(wù)端推送
三. 頁(yè)面渲染快
下載完資源后，頁(yè)面要渲染，提高渲染速率也很必要
- css在上面，js在下面（js是單線程的，加載后會(huì)立刻執(zhí)行，阻塞渲染過(guò)程）
- 不重要的js代碼使用延遲加載defer或者ansyc異步加載
四. 體驗(yàn)流暢（使用時(shí)）
頁(yè)面渲染完后，用戶會(huì)做一些操作，比如拖滾動(dòng)條，這個(gè)時(shí)候需要使用十分流暢
1.動(dòng)畫(huà)流暢
- 盡量使用css3的animation （以往的動(dòng)畫(huà)效果是用js去操作這個(gè)元素，但是沒(méi)必要,因?yàn)閍nimation使用GPU加速，而js操作是cpu，會(huì)影響主線程速率）
- 使用transform，少用left/top（相對(duì)定位、絕對(duì)定位），原理也是GPU加速，硬件（顯卡）加速，減小cpu負(fù)擔(dān)
- js使用requestAnimationFrame而不用setInterval（否則動(dòng)畫(huà)會(huì)不流暢）
2. 滾動(dòng)、移動(dòng)要流暢
- 使用防抖debounce和節(jié)流throttle。由于鼠標(biāo)滾動(dòng)和指針移動(dòng)屬于高頻操作，需要對(duì)操作進(jìn)行限制。
- DOM增刪操作要少（dom diff、虛擬dom），為了減少reflow。
+輔助計(jì)算，webworker，相當(dāng)于新開(kāi)了一個(gè)進(jìn)程。
