成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Script標(biāo)簽和腳本執(zhí)行順序 - 文檔加載 - 面向?yàn)g覽器編程

cangck_X / 1854人閱讀

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

  
原文： 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

本文需要補(bǔ)充更多例子

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

Script標(biāo)簽和腳本執(zhí)行順序

這里詳細(xì)聊聊和script標(biāo)簽相關(guān)的腳本執(zhí)行順序。

Script標(biāo)簽的默認(rèn)行為

幾個(gè)首要特性：

script標(biāo)簽（不帶defer或async屬性）的會(huì)阻止文檔渲染。相關(guān)腳本會(huì)立即下載并執(zhí)行。

document.currentScript可以獲得當(dāng)前正在運(yùn)行的腳本(Chrome 29+, FF4+)

腳本順序再默認(rèn)情況下和script標(biāo)簽出現(xiàn)的順序一致

假設(shè)如下簡(jiǎn)單代碼1，最終會(huì)產(chǎn)生三個(gè)alert依次為“A”、“B”、“C”。

我們?cè)倏紤]有網(wǎng)絡(luò)請(qǐng)求的情況2：

三個(gè)文件都需要先下載再運(yùn)行，且第二個(gè)文件的尺寸遠(yuǎn)大于另外兩個(gè)文件。但結(jié)果依然是彈出三個(gè)alert，內(nèi)容分別是"A"、"B"、"C"。

從上面兩個(gè)例子，可以充分了解到script標(biāo)簽的柱塞式執(zhí)行。

async屬性

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

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

如下代碼4，會(huì)得到三個(gè)alert，但是alert的內(nèi)容分別是"A","C","B"。

可以看到，第二個(gè)script標(biāo)簽在加入async并沒有阻止后續(xù)文檔解析和腳本執(zhí)行。

考究這個(gè)屬性產(chǎn)生的原有，其實(shí)有大量的腳本加載器在做這樣的事情：

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

不難想象，通過腳本異步插入的script標(biāo)簽達(dá)到的效果和帶async屬性的script標(biāo)簽是一樣的。換句話說，由腳本插入的script標(biāo)簽?zāi)J(rèn)是async的。

另外，對(duì)內(nèi)聯(lián)腳本設(shè)置async屬性是沒有意義的，也不產(chǎn)生其他效果。其包含的腳本總是立即執(zhí)行的。

defer屬性

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

如下代碼5的宏觀現(xiàn)象和加了async屬性的例子是一樣的，都會(huì)得到"A"、"C"、"B"的三個(gè)alert。但是其原理是不一樣的。

defer屬性是會(huì)確保腳本在文檔解析完畢后執(zhí)行的——即使這個(gè)腳本在文檔解析過程中就已經(jīng)下載完畢變成可執(zhí)行的狀態(tài)，瀏覽器也會(huì)推遲這個(gè)腳本的執(zhí)行，直到文檔解析完畢6，并在DOMContentLoaded之前7。

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

注意，defer屬性并不是每個(gè)瀏覽器支持，即便支持的瀏覽器，也會(huì)因?yàn)榘姹静灰粯訉?dǎo)致具體行為不一致。另外，大家可以通過將script標(biāo)簽放置到文檔末尾這種簡(jiǎn)單的做法達(dá)到defer屬性一樣的效果。

defer屬性早在IE4就被支持，但是這個(gè)defer屬性和現(xiàn)代瀏覽器的行為是有區(qū)別的。只有IE10以上，才開始按照標(biāo)準(zhǔn)執(zhí)行defer屬性。

async與defer的影響

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

  
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.

簡(jiǎn)單的歸納：

僅有async屬性，腳本會(huì)異步執(zhí)行

僅有defer屬性，腳本會(huì)在文檔解析完畢后執(zhí)行

兩個(gè)屬性都沒有，腳本會(huì)被同步下載并執(zhí)行，期間會(huì)柱塞文檔解析

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

document.write的影響

docuemnt.write允許向打開的文檔流中寫入文檔內(nèi)容；內(nèi)嵌到HTML里面的docuemnt.write可以就地添加文檔內(nèi)容。考慮到docuemnt.write寫入script標(biāo)簽的情況9:



");

觀察到執(zhí)行順序和普通的script標(biāo)簽沒有區(qū)別。即使你插入的標(biāo)簽帶有async或defer，其行為也是沒有區(qū)別的。

讓人糾結(jié)的是反過來10使用。由于第二個(gè)腳本是通過document.write寫入的。被延遲的腳本在執(zhí)行時(shí)，document已經(jīng)關(guān)閉，document.write是沒有任何效果的。所以，不管使用defer還是async，第二個(gè)腳本始終沒有運(yùn)行。

瀏覽器兼容性 defer屬性

點(diǎn)擊查看

async屬性

點(diǎn)擊查看

測(cè)試用例

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??

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78129.html

相關(guān)文章

  • 腳本執(zhí)行方式 - 文檔加載 - 面向瀏覽器編程

    摘要：腳本執(zhí)行方式執(zhí)行入口標(biāo)簽函數(shù)構(gòu)造函數(shù)和函數(shù)標(biāo)簽內(nèi)的事件綁定相關(guān)的內(nèi)聯(lián)函數(shù)等其他標(biāo)簽最基本，最常用的腳本引入方式。 原文： http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptExecution.html 源代碼： https://github.com/RobinQu/Programing-In-J...

    firim 評(píng)論0 收藏0

  • 腳本化HTTP 取得響應(yīng) 指定請(qǐng)求

    摘要：并且這個(gè)對(duì)象屬性和方法允許指定請(qǐng)求細(xì)節(jié)和提取響應(yīng)數(shù)據(jù)。此請(qǐng)求不會(huì)被緩存。在發(fā)送完成請(qǐng)求以后，下一步將會(huì)取得響應(yīng)。 腳本化HTTP下面將會(huì)用js代碼操縱HTTP下面將會(huì)說明在沒有導(dǎo)致web瀏覽器重新加載任何窗口或者窗體的情況下，腳本實(shí)現(xiàn)web瀏覽器和服務(wù)器之間的通信。ajax：為一種找早起避免頁面重載而動(dòng)態(tài)更新頁面的方式，不過現(xiàn)在是直接數(shù)據(jù)驅(qū)動(dòng)，或者類似于vue的單頁應(yīng)用comet：這個(gè)...

    idisfkj 評(píng)論0 收藏0

  • 把JavaScript文件放在文檔的頭部還是尾部

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

    TerryCai 評(píng)論0 收藏0

  • 拒絕js阻塞—defer、async作用和區(qū)別分析

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

    wuaiqiu 評(píng)論0 收藏0

  • 談?wù)?<script> 標(biāo)簽以及其加載順序問題，包含 defer & async

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

    alexnevsky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<