資源加載位置

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

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

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

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

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

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

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

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

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

2、模塊按需加載

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

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

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

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

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

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

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

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

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

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