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

資訊專欄INFORMATION COLUMN

一次加載javascript的思考（defer,async）

yuxue / 3582人閱讀

摘要：最近在做個人項目中登陸界面的時候，需要加一個人機驗證也就是驗證碼的功能，和朋友商量再三由于時間有限，便選擇引入第三方的驗證碼。如果解析遇到多個標(biāo)簽，依次加載順序執(zhí)行。

最近在做個人項目中登陸界面的時候，需要加一個人機驗證也就是驗證碼的功能，和朋友商量再三由于時間有限，便選擇引入第三方的驗證碼。使用過程中發(fā)現(xiàn)，該第三方驗證碼的實現(xiàn)邏輯基本是先編寫指定id的HTML標(biāo)簽，然后加載該第三方的js，由其自己渲染而成，因此借這個機會，再次學(xué)習(xí)總結(jié)一下傳統(tǒng)的 普通腳本

沒有 defer 或 async修飾，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽后面的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
如果解析遇到多個

關(guān)于項目中的應(yīng)用

由于是模塊化開發(fā)，在此采用的是再模塊內(nèi)通過動態(tài)方式加載第三方的驗證碼js，主要代碼如下。

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;
  /* 為保證兼容性，在此對回調(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的判斷語句，因為ff下沒有readyState這人值，IE的readyState肯定有值
      this.readyState === "loaded" || this.readyState === "complete" // 這是IE的判斷語句
    ) {
      callback();
    }
  };
}

為保證該第三方庫執(zhí)行時有其渲染的元素，所以設(shè)置為defer?？赡芤l(fā)問題是如果網(wǎng)絡(luò)慢或其他原因會導(dǎo)致該驗證控件呈現(xiàn)較慢（暫時未遇到），所以項目中也加了遮罩處理。

參考
defer和async的區(qū)別
詳解defer和async的原理及應(yīng)用
MDN
前端文摘：深入解析瀏覽器的幕后工作原理

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

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

相關(guān)文章

  • 徹底搞懂 defer & async

    摘要：徹底搞懂通過瀏覽器的開發(fā)者工具可以直觀的看到，圖中藍色的線和藍色的字使用不同的表現(xiàn)形式表示這個事件觸發(fā)的時間。當(dāng)腳本下載完后立即執(zhí)行，執(zhí)行順序不確定。 徹底搞懂 defer & async DOMContentLoaded showImg(https://segmentfault.com/img/remote/1460000013480394?w=1309&h=879); 通過 chr...

    luckyyulin 評論0 收藏0

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

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

    alexnevsky 評論0 收藏0

  • 細談在HTML中使用JavaScript

    摘要：前言是瀏覽器的內(nèi)置腳本語言。避免，在結(jié)構(gòu)生成之前調(diào)用節(jié)點，而產(chǎn)生錯誤 前言 JavaScript是瀏覽器的內(nèi)置腳本語言。當(dāng)網(wǎng)頁中嵌入了JavaScript腳本，瀏覽器加載網(wǎng)頁時，就會執(zhí)行腳本，從而操作瀏覽器，實現(xiàn)各種動態(tài)效果 JavaScript代碼嵌入網(wǎng)頁的方法 1、元素直接嵌入代碼 function sayHello() { alert(hello!); ...

    eternalshallow 評論0 收藏0

發(fā)表評論

0條評論

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