資源加載位置

通過優化資源加載位置，更改資源加載時機，使盡可能快地展示出頁面內容，盡可能快地使功能可用

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

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

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

4、body中間盡量不寫style標簽和script標簽

資源加載時機

1、異步script標簽

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

async: 異步加載，加載完成后立即執行

2、模塊按需加載

在SPA等業務邏輯比較復雜的系統中，需要根據路由來加載當前頁面需要的業務模塊

按需加載，是一種很好的優化網頁或應用的方式。這種方式實際上是先把代碼在一些邏輯斷點處分離開，然后在一些代碼塊中完成某些操作后，立即引用或即將引用另外一些新的代碼塊。這樣加快了應用的初始加載速度，減輕了它的總體體積，因為某些代碼塊可能永遠不會被加載

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

3、使用資源預加載preload和資源預讀取prefetch

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

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

4、資源懶加載與資源預加載

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

資源預加載是提前加載用戶所需的資源，**良好的用戶體驗

資源懶加載和資源預加載都是一種錯峰操作，在瀏覽器忙碌的時候不做操作，瀏覽器空間時，再加載資源，優化了網絡性能