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

資訊專欄INFORMATION COLUMN

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

yuxue / 3557人閱讀

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

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

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

關于項目中的應用

由于是模塊化開發，在此采用的是再模塊內通過動態方式加載第三方的驗證碼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;
  /* 為保證兼容性，在此對回調包裝， */
  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();
    }
  };
}

為保證該第三方庫執行時有其渲染的元素，所以設置為defer。可能引發問題是如果網絡慢或其他原因會導致該驗證控件呈現較慢（暫時未遇到），所以項目中也加了遮罩處理。

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

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

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

相關文章

  • 徹底搞懂 defer & async

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

    luckyyulin 評論0 收藏0

  • 談談 <script> 標簽以及其加載順序問題，包含 defer & async

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

    alexnevsky 評論0 收藏0

  • 細談在HTML中使用JavaScript

    摘要：前言是瀏覽器的內置腳本語言。避免，在結構生成之前調用節點，而產生錯誤 前言 JavaScript是瀏覽器的內置腳本語言。當網頁中嵌入了JavaScript腳本，瀏覽器加載網頁時，就會執行腳本，從而操作瀏覽器，實現各種動態效果 JavaScript代碼嵌入網頁的方法 1、元素直接嵌入代碼 function sayHello() { alert(hello!); ...

    eternalshallow 評論0 收藏0

發表評論

0條評論

yuxue

男|高級講師

TA的文章

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