紅寶書：在html中使用script章節總結

hss01248 發布于2019-08-01 17:06 / 2578人閱讀

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

瀏覽器解析器從上至下進行解析，遇到script標簽，解析停止，直至腳本加載執行完畢。

在html中插入script的方法：外部腳本，內嵌腳本

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

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

瀏覽器在遇到標簽時才開始呈現內容

其他大佬關于這塊內容寫的文章

網站為什么 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...

云服務器 GPU云服務器在php中使用組件在VBScript中使用類 webrtc在webview中使用問題在瀏覽器中使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50948.html

紅寶書：在html中使用script章節總結

摘要：在中插入的方法外部腳本，內嵌腳本屬性異步腳本可選。表示應該立即下載腳本但不應妨礙頁面中的其他操作比如下載其他資源或等待加載其他腳本。一定會在頁面的事件前執行但可能會在事件觸發之前或之后執行。不同點執行階段不同。瀏覽器解析器從上至下進行解析，遇到script標簽，解析停止，直至腳本加載執行完畢。在html中插入script的方法：外部腳本，內嵌腳本 script屬性：async（異步...

Backache 2019-08-20 17:41 評論0 收藏0
紅寶書：在html中使用script章節總結

摘要：在中插入的方法外部腳本，內嵌腳本屬性異步腳本可選。表示應該立即下載腳本但不應妨礙頁面中的其他操作比如下載其他資源或等待加載其他腳本。一定會在頁面的事件前執行但可能會在事件觸發之前或之后執行。不同點執行階段不同。瀏覽器解析器從上至下進行解析，遇到script標簽，解析停止，直至腳本加載執行完畢。在html中插入script的方法：外部腳本，內嵌腳本 script屬性：async（異步...

qiangdada 2019-08-29 12:52 評論0 收藏0
ES2018 學習筆記（3）標識符

摘要：屬性名屬性訪問器屬性兩種表示法點表示法，例如方括號表示法，例如其中，點表示法中要求之后必須跟著。回看上面提到的標識符的定義任何點表示法，都能轉換成方括號表示法反之，則行不通。總結屬性名不是標識符。以下內容來至 es2017 語言規范和 javascript 高級程序設計（第三版）起源：標識符的定義在紅寶書 3.1.2 章節中，對標識符做了如下定義： An identifier i...

roland_reed 2019-08-23 11:39 評論0 收藏0
JavaScript紅寶書筆記（三）---函數特性

摘要：接下來的文章更新以紅寶書章節更新，內容過多分若干篇文章來寫，標題會清晰表明是哪一章節，大家一起學習進步，謝謝大家的支持 1.函數參數的特性： function doAdd(num1, num2) { arguments[1] = 10; alert(arguments[0] + num2); } arguments對象中的值會自動反映到對應的命名參數，所以修改 argu...

沈建明 2019-08-23 18:01 評論0 收藏0