国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

script關于async與defer屬性的測試

scola666 / 3469人閱讀

摘要：環境其它版本沒有測試，下列簡稱和分別延遲秒秒和立即，并會在控制臺里打印和測試代碼做測試步驟不為設定或時頁面會在所有加載和執行完后渲染輸出和設置為會等的秒延遲后，控制臺會立即輸出和等的秒后會輸出并觸發，最后觸發會等的秒延遲后，控制臺會立即

環境：

chrome31/firefox25/IE11（其它版本沒有測試），下列簡稱chrome/firefox/IE

http://127.0.0.1:8081/test1、http://127.0.0.1:8081/test2和http://127.0.0.1:8081/test3分別延遲5秒、3秒和立即，并會在控制臺里打印test1、test2和test3

測試代碼：

HTML:





script async defer

nodejs做server：

var http = require("http");
http.createServer(function(req, res) {
    res.writeHead(200, {
        "Content-Type": "text/plain"
    });
    if (req.url == "/test1") {
        setTimeout(function() {
            res.end("console.log("test1");");
        }, 1000 * 5);
    } else if (req.url == "/test2") {
        setTimeout(function() {
            res.end("console.log("test2");");
        }, 1000 * 3);
    } else {
        res.end("console.log("test3");");
    }
    // res.end("Hello World
");
}).listen(8081, "127.0.0.1");
console.log("Server running at http://127.0.0.1:8081/");
測試步驟：

不為script設定defer或async時

頁面會在所有script加載和執行完后渲染 ,輸出test1、test2和test3,DOMContentLoaded,onload

設置defer

test1為defer ,chrome/IE會等test2的3秒延遲后，控制臺會立即輸出test2和test3,等test1的5秒后會輸出test1并觸發DOMContentLoaded，最后觸發onload;firefox會等test2的3秒延遲后，控制臺會立即輸出test2和test3并觸發DOMContentLoaded,等test1的5秒后會輸出test1，最后觸發onload;

test1和test2都為defer時，chrome/IE會立即輸出test3，盡管test2比test1先加載完成但是只有等到test1加載完成執行后才繼續執行，輸出為test1和test2并觸發DOMContentLoaded，最后觸發onload;firefox會立即輸出test3并觸發DOMContentLoaded，test2下載完后等test1下載完并執行后才執行，輸出test1和test2，最后觸發onload

設置async

test1為async ,等test2的3秒延遲后，會立即輸出test2和test3并觸發DOMContentLoaded,等test1的5秒后會打印test1，最后觸發onload

test1和test2都為async時 ,會立即輸出test3并觸發DOMContentLoaded，test2先加載完先打印test2，test1后加載完打印test1，最后觸發onload

結論：

不設置async和defer時，頁面會等script下載執行完后繼續執行

設置defer時，會下載腳本，但是不會立即執行并且按照script順序觸發

設置async時，會下載腳本，但是不會立即執行并不一定按照script順序觸發

無論是否設置了defer或async，該script會在onload前執行

IE/chrome在設置defer時，與firefox不同，前者會等腳本都執行后才執行DOMContentLoaded，而后者會先于腳本執行

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

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

相關文章

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

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

    cangck_X 評論0 收藏0

  • 腳本的加載和執行

    摘要：現在對的使用非常普遍，任何一個站點都會請求大量的腳本，而加載和執行的方式也是各不相同，希望讀完這篇文章可以對常用的加載和執行方式有一個整體的認識?？偨Y上文主要介紹了動態創建腳本和的方式去創建異步加載和執行腳本的方式。 在打開一個站點的時候，瀏覽器會去加載各種資源?，F在對JS的使用非常普遍，任何一個站點都會請求大量的JS腳本，而加載和執行的方式也是各不相同，希望讀完這篇文章可以對常用的加...

    TANKING 評論0 收藏0

  • 重新認識script標簽

    摘要：盡管腳本的下載過程中不會相互影響，但頁面仍然要等到所有代碼下載并完成執行才能繼續。 defer和asnyc（只對外部文件有效） defer 在頁面完成解析時執行代碼，這個屬性表明腳本在執行時不會影響頁面的構造，在元素中設置這個屬性相當于告訴瀏覽器立即下載但延遲執行 async 相對于頁面其他部分異步執行腳本，一般的script標簽都是會阻塞頁面執行的，沒有加上async屬性的標簽...

    Magicer 評論0 收藏0

  • 關于外部樣式表也許你不知道的事

    摘要：如下圖所示，外部樣式表是否會阻塞解析先不要看答案，可以自己思考和實驗一下通過如上圖所示，并沒有阻塞解析，因為時間線在之后。并且都支持事件回調處理，用于一些初始化工作。為了盡早地觸發事件，因為會延遲事件觸發。 singsong: 文章中 demo 猛戳這里吧 ??最新內容請以github上的為準?? 在講解之前，先看一個問題。如下圖所示，外部樣式表是否會阻塞 HTML 解析（先不要看答...

    RobinQu 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<