資訊專(zhuān)欄INFORMATION COLUMN
摘要：環(huán)境其它版本沒(méi)有測(cè)試，下列簡(jiǎn)稱(chēng)和分別延遲秒秒和立即，并會(huì)在控制臺(tái)里打印和測(cè)試代碼做測(cè)試步驟不為設(shè)定或時(shí)頁(yè)面會(huì)在所有加載和執(zhí)行完后渲染輸出和設(shè)置為會(huì)等的秒延遲后，控制臺(tái)會(huì)立即輸出和等的秒后會(huì)輸出并觸發(fā)，最后觸發(fā)會(huì)等的秒延遲后，控制臺(tái)會(huì)立即
環(huán)境：
chrome31/firefox25/IE11（其它版本沒(méi)有測(cè)試），下列簡(jiǎn)稱(chēng)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秒和立即，并會(huì)在控制臺(tái)里打印test1、test2和test3
測(cè)試代碼：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/");
測(cè)試步驟：
不為script設(shè)定defer或async時(shí)
頁(yè)面會(huì)在所有script加載和執(zhí)行完后渲染 ,輸出test1、test2和test3,DOMContentLoaded,onload
設(shè)置defer
test1為defer ,chrome/IE會(huì)等test2的3秒延遲后，控制臺(tái)會(huì)立即輸出test2和test3,等test1的5秒后會(huì)輸出test1并觸發(fā)DOMContentLoaded，最后觸發(fā)onload;firefox會(huì)等test2的3秒延遲后，控制臺(tái)會(huì)立即輸出test2和test3并觸發(fā)DOMContentLoaded,等test1的5秒后會(huì)輸出test1，最后觸發(fā)onload;
test1和test2都為defer時(shí)，chrome/IE會(huì)立即輸出test3，盡管test2比test1先加載完成但是只有等到test1加載完成執(zhí)行后才繼續(xù)執(zhí)行，輸出為test1和test2并觸發(fā)DOMContentLoaded，最后觸發(fā)onload;firefox會(huì)立即輸出test3并觸發(fā)DOMContentLoaded，test2下載完后等test1下載完并執(zhí)行后才執(zhí)行，輸出test1和test2，最后觸發(fā)onload
設(shè)置async
test1為async ,等test2的3秒延遲后，會(huì)立即輸出test2和test3并觸發(fā)DOMContentLoaded,等test1的5秒后會(huì)打印test1，最后觸發(fā)onload
test1和test2都為async時(shí) ,會(huì)立即輸出test3并觸發(fā)DOMContentLoaded，test2先加載完先打印test2，test1后加載完打印test1，最后觸發(fā)onload
結(jié)論：不設(shè)置async和defer時(shí)，頁(yè)面會(huì)等script下載執(zhí)行完后繼續(xù)執(zhí)行
設(shè)置defer時(shí)，會(huì)下載腳本，但是不會(huì)立即執(zhí)行并且按照script順序觸發(fā)
設(shè)置async時(shí)，會(huì)下載腳本，但是不會(huì)立即執(zhí)行并不一定按照script順序觸發(fā)
無(wú)論是否設(shè)置了defer或async，該script會(huì)在onload前執(zhí)行
IE/chrome在設(shè)置defer時(shí)，與firefox不同，前者會(huì)等腳本都執(zhí)行后才執(zhí)行DOMContentLoaded，而后者會(huì)先于腳本執(zhí)行
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/77953.html
摘要：相關(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 源...
摘要：現(xiàn)在對(duì)的使用非常普遍，任何一個(gè)站點(diǎn)都會(huì)請(qǐng)求大量的腳本，而加載和執(zhí)行的方式也是各不相同，希望讀完這篇文章可以對(duì)常用的加載和執(zhí)行方式有一個(gè)整體的認(rèn)識(shí)?？偨Y(jié)上文主要介紹了動(dòng)態(tài)創(chuàng)建腳本和的方式去創(chuàng)建異步加載和執(zhí)行腳本的方式。 在打開(kāi)一個(gè)站點(diǎn)的時(shí)候，瀏覽器會(huì)去加載各種資源?，F(xiàn)在對(duì)JS的使用非常普遍，任何一個(gè)站點(diǎn)都會(huì)請(qǐng)求大量的JS腳本，而加載和執(zhí)行的方式也是各不相同，希望讀完這篇文章可以對(duì)常用的加...
摘要：盡管腳本的下載過(guò)程中不會(huì)相互影響，但頁(yè)面仍然要等到所有代碼下載并完成執(zhí)行才能繼續(xù)。 defer和asnyc（只對(duì)外部文件有效） defer 在頁(yè)面完成解析時(shí)執(zhí)行代碼，這個(gè)屬性表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造，在元素中設(shè)置這個(gè)屬性相當(dāng)于告訴瀏覽器立即下載但延遲執(zhí)行 async 相對(duì)于頁(yè)面其他部分異步執(zhí)行腳本，一般的script標(biāo)簽都是會(huì)阻塞頁(yè)面執(zhí)行的，沒(méi)有加上async屬性的標(biāo)簽...
摘要：如下圖所示，外部樣式表是否會(huì)阻塞解析先不要看答案，可以自己思考和實(shí)驗(yàn)一下通過(guò)如上圖所示，并沒(méi)有阻塞解析，因?yàn)闀r(shí)間線在之后。并且都支持事件回調(diào)處理，用于一些初始化工作。為了盡早地觸發(fā)事件，因?yàn)闀?huì)延遲事件觸發(fā)。 singsong: 文章中 demo 猛戳這里吧 ??最新內(nèi)容請(qǐng)以github上的為準(zhǔn)?? 在講解之前，先看一個(gè)問(wèn)題。如下圖所示，外部樣式表是否會(huì)阻塞 HTML 解析（先不要看答...
閱讀 2689·2023-04-25 20:28
閱讀 1868·2021-11-22 09:34
閱讀 3702·2021-09-26 10:20
閱讀 1855·2021-09-22 16:05
閱讀 3097·2021-09-09 09:32
閱讀 2530·2021-08-31 09:40
閱讀 2111·2019-08-30 13:56
閱讀 3327·2019-08-29 17:01
