當你訪問一個網站的時候，相關的html，css,script，圖片等資源就開始了下載。一般情況下，你的html文檔解析過程中如果遇到script標籤，文檔解析就會暫停然後開始下載並執行你的script。這個時候你的文檔解析過程就被script阻塞了，如果網站有大量的script在阻塞加載，那麼網站的整體性能是不高的。一個很直觀的感受就是網頁渲染比較慢。而且如果你的script中使用了一個未解析完成的dom，那麼很顯然腳本就會報錯了。
歷史第一階段：
這個階段我們採取的方案是把腳本放在</body>標籤之前，做到了解析完html再加載執行腳本。對於一些第三方腳本，我們採用了動態創建script的方式（document.createElement創建script，然後掛載到html的節點中去，從而進行一個異步加載）
歷史第二階段：
H5的規範推出之後呢，我們的script天然就有了原生的異步加載功能，我們可以通過增加async或defer屬性去決定腳本的異步加載方式。其中async表明腳本是異步加載且加載完即刻執行。defer表明腳本是異步加載，加載完的腳本將會在文檔解析完成後於DOMContentLoaded事件前執行。對於一些有依賴關係的異步腳本，就可以使用defer，這樣就可以確保他們的執行順序。
歷史第三階段：
這裏我們使用了link標籤rel屬性的preload（預加載資源）和prefetch(預取資源)，做到了資源的加載和執行分離，preload的腳本會被瀏覽器優先加載，在隨後的頁面渲染中，一旦需要使用它們，它們就會立即可用。而prefetch類的資源則會在瀏覽器空閒的時候去加載，一般用於很快就會在其他頁面使用到的資源。這種方式是VUE工程化項目推薦的方式，你會發現在請求通過cli腳手架命令打包出來的項目的時候，會有下圖類似的link標籤去加載css和js。
有活力的技術都是會不斷更新的，歷史的腳步也絕對不會停滯不前。有空的時候，瞭解一下他們的過往，也會增加你的知識底蘊。