瀏覽器解析器從上至下進行解析,遇到script標籤,解析中止,直至腳本加載執行完畢。html
在html中插入script的方法:外部腳本,內嵌腳本前端
script屬性:
async(異步腳本):可選。表示應該當即下載腳本,但不該妨礙頁面中的其餘操做,好比下載其餘資源或 等待加載其餘腳本。必定會在頁面的 load 事件前執行,但可能會在 DOMContentLoaded 事件觸發以前或之 後執行。
defer(延遲腳本):可選。表示腳本能夠延遲到文檔徹底被解析和顯示以後再執行。只對外部腳本文件有 效。延遲到</html>再加載,當含有兩個defer的script標籤,理論上會按照順序加載,先於DOMContentLoaded事件,實際上有可能會亂序(不靠譜),也不必定會先於DOMContentLoaded事件。html5
藍色線表明網絡讀取,紅色線表明執行時間,這倆都是針對腳本的;綠色線表明 HTML 解析。
async和defer
共同點:net階段都是異步的。只適用於外部腳本。
不一樣點:執行階段不一樣。
async更適合它對於那些能夠不依賴任何腳本或不被任何腳本依賴的腳原本說倒是很是合適的,最典型的例子:Google Analyticsweb
瀏覽器在遇到<body>標籤時纔開始呈現內容瀏覽器
其餘大佬關於這塊內容寫的文章性能優化
網站爲何 JS 調用盡可能放到網頁底部? https://www.zhihu.com/questio...
JavaScript 的性能優化:加載和執行
https://www.ibm.com/developer...
JavaScript 啓動性能瓶頸分析與解決方案 https://zhuanlan.zhihu.com/p/...
Effective前端7:加快頁面打開速度 https://zhuanlan.zhihu.com/p/...
《瀏覽器的工做原理:新式網絡瀏覽器幕後揭祕》https://www.html5rocks.com/zh...網絡