Script標簽和腳本執行順序 - 文檔加載 - 面向瀏覽器編程

cangck_X 發布于2019-08-19 14:49 / 1851人閱讀

摘要：相關腳本會立即下載并執行。從上面兩個例子，可以充分了解到標簽的柱塞式執行。表示該標簽并不柱塞，也不同步執行。屬性帶有屬性的腳本，同樣會推遲腳本的執行，并且不會阻止文檔解析。同時，帶有的腳本彼此之間，能保證其執行順序。

原文： http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptTag.html

源代碼: https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/Browser_Scripting/Document_Loading/ScriptTag.md

本文需要補充更多例子

本文存在批注，但該網站的Markdown編輯器不支持，所以無法正常展示，請到原文參考。

Script標簽和腳本執行順序

這里詳細聊聊和script標簽相關的腳本執行順序。

Script標簽的默認行為

幾個首要特性：

script標簽（不帶defer或async屬性）的會阻止文檔渲染。相關腳本會立即下載并執行。

document.currentScript可以獲得當前正在運行的腳本(Chrome 29+, FF4+)

腳本順序再默認情況下和script標簽出現的順序一致

假設如下簡單代碼¹，最終會產生三個alert依次為“A”、“B”、“C”。

我們再考慮有網絡請求的情況²：

三個文件都需要先下載再運行，且第二個文件的尺寸遠大于另外兩個文件。但結果依然是彈出三個alert，內容分別是"A"、"B"、"C"。

從上面兩個例子，可以充分了解到script標簽的柱塞式執行。

async屬性

async屬性是HTML5的新特性³，這意味著其兼容性并不樂觀（IE10+）。

async表示該script標簽并不柱塞，也不同步執行。瀏覽器只需要在腳本下載完畢后再執行即可——不必柱塞頁面渲染等待該腳本的下載和執行。

如下代碼⁴，會得到三個alert，但是alert的內容分別是"A","C","B"。

可以看到，第二個script標簽在加入async并沒有阻止后續文檔解析和腳本執行。

考究這個屬性產生的原有，其實有大量的腳本加載器在做這樣的事情：

var script = document.createElement("script");
script.src = "file.js";
document.body.appendChild(script);

不難想象，通過腳本異步插入的script標簽達到的效果和帶async屬性的script標簽是一樣的。換句話說，由腳本插入的script標簽默認是async的。

另外，對內聯腳本設置async屬性是沒有意義的，也不產生其他效果。其包含的腳本總是立即執行的。

defer屬性

帶有defer屬性的腳本，同樣會推遲腳本的執行，并且不會阻止文檔解析。就如同這個腳本，放置到了文檔的末尾（之前）。

如下代碼⁵的宏觀現象和加了async屬性的例子是一樣的，都會得到"A"、"C"、"B"的三個alert。但是其原理是不一樣的。

defer屬性是會確保腳本在文檔解析完畢后執行的——即使這個腳本在文檔解析過程中就已經下載完畢變成可執行的狀態，瀏覽器也會推遲這個腳本的執行，直到文檔解析完畢⁶，并在DOMContentLoaded之前⁷。

同時，帶有defer的腳本彼此之間，能保證其執行順序。

注意，defer屬性并不是每個瀏覽器支持，即便支持的瀏覽器，也會因為版本不一樣導致具體行為不一致。另外，大家可以通過將script標簽放置到文檔末尾這種簡單的做法達到defer屬性一樣的效果。

defer屬性早在IE4就被支持，但是這個defer屬性和現代瀏覽器的行為是有區別的。只有IE10以上，才開始按照標準執行defer屬性。

async與defer的影響

參考W3C的官方文檔⁸，defer和async兩個屬性是可以互相影響的：

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

簡單的歸納：

僅有async屬性，腳本會異步執行

僅有defer屬性，腳本會在文檔解析完畢后執行

兩個屬性都沒有，腳本會被同步下載并執行，期間會柱塞文檔解析

規范里沒有提到兩種屬性都有時的效果，但這是文檔中被允許的。這樣的具體效果會在后面討論。

document.write的影響

docuemnt.write允許向打開的文檔流中寫入文檔內容；內嵌到HTML里面的docuemnt.write可以就地添加文檔內容。考慮到docuemnt.write寫入script標簽的情況⁹:

");

觀察到執行順序和普通的script標簽沒有區別。即使你插入的標簽帶有async或defer，其行為也是沒有區別的。

讓人糾結的是反過來¹⁰使用。由于第二個腳本是通過document.write寫入的。被延遲的腳本在執行時，document已經關閉，document.write是沒有任何效果的。所以，不管使用defer還是async，第二個腳本始終沒有運行。

瀏覽器兼容性 defer屬性

點擊查看

async屬性

點擊查看

測試用例

TODO

http://t.cn/RvApb3D??

http://t.cn/RvApGke??

http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-async??

http://t.cn/RvApq3G??

http://t.cn/RvAp5xj??

http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/??

https://www.webkit.org/blog/1395/running-scripts-in-webkit/??

http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-defer??

http://t.cn/RvApt7Q??

http://t.cn/RvAptOo??

云服務器 GPU云服務器動態加載script 執行順序執行順序問邏輯執行順序

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

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

腳本執行方式 - 文檔加載 - 面向瀏覽器編程

摘要：腳本執行方式執行入口標簽函數構造函數和函數標簽內的事件綁定相關的內聯函數等其他標簽最基本，最常用的腳本引入方式。原文： http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptExecution.html 源代碼： https://github.com/RobinQu/Programing-In-J...

firim 2019-08-19 14:49 評論0 收藏0
腳本化HTTP 取得響應指定請求

摘要：并且這個對象屬性和方法允許指定請求細節和提取響應數據。此請求不會被緩存。在發送完成請求以后，下一步將會取得響應。腳本化HTTP下面將會用js代碼操縱HTTP下面將會說明在沒有導致web瀏覽器重新加載任何窗口或者窗體的情況下，腳本實現web瀏覽器和服務器之間的通信。ajax：為一種找早起避免頁面重載而動態更新頁面的方式，不過現在是直接數據驅動，或者類似于vue的單頁應用comet：這個...

idisfkj 2019-08-26 12:11 評論0 收藏0
把JavaScript文件放在文檔的頭部還是尾部

摘要：我們可以看到，百度也在頭部引入了一些文件，這些文件引入的方式與的做法差不多，都在引入外部資源的標簽上添加了屬性，除了第一個文件沒有那樣做。更好閱讀體驗，請訪問dreamapple.me 我們今天來聊一聊關于JavaScript文件的引入位置的問題；大家在平時的Web開發中有沒有想過這樣一個問題，那就是我應該在文檔的頭部（也就是標簽內部里面）引入所需要的JavaScript文件還是應該...

TerryCai 2019-08-21 15:36 評論0 收藏0
拒絕js阻塞—defer、async作用和區別分析

摘要：阻塞原理瀏覽器內核可以分成兩部分渲染引擎或者和引擎。等引擎運行完畢，瀏覽器又會把控制權還給渲染引擎，繼續和的構建。執行時，解析暫停。從加載完成立即執行來看，模式執行順序與寫的順序無關，不保證執行順序。 js阻塞原理瀏覽器內核可以分成兩部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并沒有十分明確的區分，但隨...

wuaiqiu 2019-08-23 13:52 評論0 收藏0
談談 <script> 標簽以及其加載順序問題，包含 defer & async

摘要：標簽加載順序如果要談標簽加載順序問題，首先要談的就是標簽的位置，因為標簽的位置對于加載順序來說有著很重要的影響。例如標簽在以上代碼中，可能由于下載時間比較長，由于兩個標簽都是異步執行，互不干擾，因此可能就會先于執行。談談標簽加載順序的問題這篇文章比較長，如果你耐心讀完了，我會感謝你愿意在這篇文章上花費時間，也希望你有收獲。其實說起，幾乎搞前端的都知道他的作用：引入 JavaS...

alexnevsky 2019-08-22 15:13 評論0 收藏0