紅寶書：在html中使用script章節(jié)總結(jié)

qiangdada 發(fā)布于2019-08-29 12:52 / 2813人閱讀

摘要：在中插入的方法外部腳本，內(nèi)嵌腳本屬性異步腳本可選。表示應(yīng)該立即下載腳本但不應(yīng)妨礙頁面中的其他操作比如下載其他資源或等待加載其他腳本。一定會(huì)在頁面的事件前執(zhí)行但可能會(huì)在事件觸發(fā)之前或之后執(zhí)行。不同點(diǎn)執(zhí)行階段不同。

瀏覽器解析器從上至下進(jìn)行解析，遇到script標(biāo)簽，解析停止，直至腳本加載執(zhí)行完畢。

在html中插入script的方法：外部腳本，內(nèi)嵌腳本

script屬性：
async（異步腳本）:可選。表示應(yīng)該立即下載腳本,但不應(yīng)妨礙頁面中的其他操作,比如下載其他資源或等待加載其他腳本。一定會(huì)在頁面的 load 事件前執(zhí)行,但可能會(huì)在 DOMContentLoaded 事件觸發(fā)之前或之后執(zhí)行。
defer（延遲腳本）:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對外部腳本文件有效。延遲到再加載，當(dāng)含有兩個(gè)defer的script標(biāo)簽，理論上會(huì)按照順序加載，先于DOMContentLoaded事件，實(shí)際上有可能會(huì)亂序（不靠譜），也不一定會(huì)先于DOMContentLoaded事件。

藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時(shí)間，這倆都是針對腳本的；綠色線代表 HTML 解析。
async和defer
共同點(diǎn)：net階段都是異步的。只適用于外部腳本。
不同點(diǎn)：執(zhí)行階段不同。
async更適合它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics

瀏覽器在遇到標(biāo)簽時(shí)才開始呈現(xiàn)內(nèi)容

其他大佬關(guān)于這塊內(nèi)容寫的文章

網(wǎng)站為什么 JS 調(diào)用盡量放到網(wǎng)頁底部？ https://www.zhihu.com/questio... 
JavaScript 的性能優(yōu)化：加載和執(zhí)行 
https://www.ibm.com/developer... 
JavaScript 啟動(dòng)性能瓶頸分析與解決方案 https://zhuanlan.zhihu.com/p/...
Effective前端7：加快頁面打開速度 https://zhuanlan.zhihu.com/p/...
《瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》https://www.html5rocks.com/zh...