在看以下總結(jié)時(shí)盛撑，要注意兩個(gè)詞，并發(fā) 和 緩存
一. （在日常開發(fā)中), 打包構(gòu)建要快
想象一下寫完代碼后捧搞，編譯代碼要5min抵卫，假如再改動(dòng)代碼，打包要10min胎撇。介粘。。這種開發(fā)效率是特別慢的
- 并發(fā)構(gòu)建（使用插件）
- loader的使用是需要查找文件的晚树，所以要過(guò)濾不相關(guān)文件
- 使用緩存
二. 資源加載要快
打開一個(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ù)端可開啟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)畫流暢
- 盡量使用css3的animation （以往的動(dòng)畫效果是用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ì)不流暢）
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)于新開了一個(gè)進(jìn)程扇救。
