資訊專欄INFORMATION COLUMN
摘要：最近在做個(gè)人項(xiàng)目中登陸界面的時(shí)候，需要加一個(gè)人機(jī)驗(yàn)證也就是驗(yàn)證碼的功能，和朋友商量再三由于時(shí)間有限，便選擇引入第三方的驗(yàn)證碼。如果解析遇到多個(gè)標(biāo)簽，依次加載順序執(zhí)行。
最近在做個(gè)人項(xiàng)目中登陸界面的時(shí)候，需要加一個(gè)人機(jī)驗(yàn)證也就是驗(yàn)證碼的功能，和朋友商量再三由于時(shí)間有限，便選擇引入第三方的驗(yàn)證碼。使用過(guò)程中發(fā)現(xiàn)，該第三方驗(yàn)證碼的實(shí)現(xiàn)邏輯基本是先編寫(xiě)指定id的HTML標(biāo)簽，然后加載該第三方的js，由其自己渲染而成，因此借這個(gè)機(jī)會(huì)，再次學(xué)習(xí)總結(jié)一下傳統(tǒng)的
普通腳本
沒(méi)有 defer 或 async修飾，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽后面的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。 由于是模塊化開(kāi)發(fā)，在此采用的是再模塊內(nèi)通過(guò)動(dòng)態(tài)方式加載第三方的驗(yàn)證碼js，主要代碼如下。 為保證該第三方庫(kù)執(zhí)行時(shí)有其渲染的元素，所以設(shè)置為defer?？赡芤l(fā)問(wèn)題是如果網(wǎng)絡(luò)慢或其他原因會(huì)導(dǎo)致該驗(yàn)證控件呈現(xiàn)較慢（暫時(shí)未遇到），所以項(xiàng)目中也加了遮罩處理。 參考
如果解析遇到多個(gè)function load (el, src, callback) {
if (!src) {
return;
}
// _verifyExist(src);
let scriptHeat = document.createElement("script");
scriptHeat.type = "text/javascript";
scriptHeat.src = src;
scriptHeat.defer = true;
/* 為保證兼容性，在此對(duì)回調(diào)包裝， */
isFunction(callback) && addOnloadHandler(scriptHeat, callback);
el.appendChild(scriptHeat);
}
function isFunction (fn) {
return Object.prototype.toString.call(fn) === "[object Function]";
}
function addOnloadHandler (el, callback) {
el.onload = el.onreadystatechange = function () {
if (!this.readyState || // 這是FF的判斷語(yǔ)句，因?yàn)閒f下沒(méi)有readyState這人值，IE的readyState肯定有值
this.readyState === "loaded" || this.readyState === "complete" // 這是IE的判斷語(yǔ)句
) {
callback();
}
};
}
defer和async的區(qū)別
詳解defer和async的原理及應(yīng)用
MDN
前端文摘：深入解析瀏覽器的幕后工作原理
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93976.html
摘要：徹底搞懂通過(guò)瀏覽器的開(kāi)發(fā)者工具可以直觀的看到，圖中藍(lán)色的線和藍(lán)色的字使用不同的表現(xiàn)形式表示這個(gè)事件觸發(fā)的時(shí)間。當(dāng)腳本下載完后立即執(zhí)行，執(zhí)行順序不確定。 徹底搞懂 defer & async DOMContentLoaded showImg(https://segmentfault.com/img/remote/1460000013480394?w=1309&h=879); 通過(guò) chr...
摘要：標(biāo)簽加載順序如果要談標(biāo)簽加載順序問(wèn)題，首先要談的就是標(biāo)簽的位置，因?yàn)闃?biāo)簽的位置對(duì)于加載順序來(lái)說(shuō)有著很重要的影響。例如標(biāo)簽在以上代碼中，可能由于下載時(shí)間比較長(zhǎng)，由于兩個(gè)標(biāo)簽都是異步執(zhí)行，互不干擾，因此可能就會(huì)先于執(zhí)行。 談?wù)? 標(biāo)簽加載順序的問(wèn)題 這篇文章比較長(zhǎng)，如果你耐心讀完了，我會(huì)感謝你愿意在這篇文章上花費(fèi)時(shí)間，也希望你有收獲。 其實(shí)說(shuō)起，幾乎搞前端的都知道他的作用：引入 JavaS...
摘要：前言是瀏覽器的內(nèi)置腳本語(yǔ)言。避免，在結(jié)構(gòu)生成之前調(diào)用節(jié)點(diǎn)，而產(chǎn)生錯(cuò)誤 前言 JavaScript是瀏覽器的內(nèi)置腳本語(yǔ)言。當(dāng)網(wǎng)頁(yè)中嵌入了JavaScript腳本，瀏覽器加載網(wǎng)頁(yè)時(shí)，就會(huì)執(zhí)行腳本，從而操作瀏覽器，實(shí)現(xiàn)各種動(dòng)態(tài)效果 JavaScript代碼嵌入網(wǎng)頁(yè)的方法 1、元素直接嵌入代碼 function sayHello() { alert(hello!); ...
閱讀 2712·2021-11-18 10:07
閱讀 1160·2021-08-03 14:04
閱讀 779·2019-08-30 13:08
閱讀 2634·2019-08-29 15:33
閱讀 1172·2019-08-29 14:07
閱讀 3086·2019-08-29 14:04
閱讀 1520·2019-08-29 11:19
閱讀 1206·2019-08-29 10:59
