如何優(yōu)化前端性能（四）：優(yōu)化資源加載

資源加載位置

通過優(yōu)化資源加載位置，更改資源加載時(shí)機(jī)，使盡可能快地展示出頁面內(nèi)容，盡可能快地使功能可用

1、CSS文件放在head中，先外鏈，后本頁

2、JS文件放在body底部，先外鏈，后本頁

3、處理頁面、處理頁面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件

4、body中間盡量不寫style標(biāo)簽和script標(biāo)簽

資源加載時(shí)機(jī)

1、異步script標(biāo)簽

defer: 異步加載，在HTML解析完成后執(zhí)行。defer的實(shí)際效果與將代碼放在body底部類似

async: 異步加載，加載完成后立即執(zhí)行

2、模塊按需加載

在SPA等業(yè)務(wù)邏輯比較復(fù)雜的系統(tǒng)中，需要根據(jù)路由來加載當(dāng)前頁面需要的業(yè)務(wù)模塊

按需加載，是一種很好的優(yōu)化網(wǎng)頁或應(yīng)用的方式。這種方式實(shí)際上是先把代碼在一些邏輯斷點(diǎn)處分離開，然后在一些代碼塊中完成某些操作后，立即引用或即將引用另外一些新的代碼塊。這樣加快了應(yīng)用的初始加載速度，減輕了它的總體體積，因?yàn)槟承┐a塊可能永遠(yuǎn)不會(huì)被加載

webpack 提供了兩個(gè)類似的技術(shù)，優(yōu)先選擇的方式是使用符合 ECMAScript 提案 的 import() 語法。第二種則是使用 webpack 特定的 require.ensure

3、使用資源預(yù)加載preload和資源預(yù)讀取prefetch

preload讓瀏覽器提前加載指定資源，需要執(zhí)行時(shí)再執(zhí)行，可以加速本頁面的加載速度

prefetch告訴瀏覽器加載下一頁面可能會(huì)用到的資源，可以加速下一個(gè)頁面的加載速度

4、資源懶加載與資源預(yù)加載

資源延遲加載也稱為懶加載，延遲加載資源或符合某些條件時(shí)才加載某些資源

資源預(yù)加載是提前加載用戶所需的資源，**良好的用戶體驗(yàn)

資源懶加載和資源預(yù)加載都是一種錯(cuò)峰操作，在瀏覽器忙碌的時(shí)候不做操作，瀏覽器空間時(shí)，再加載資源，優(yōu)化了網(wǎng)絡(luò)性能