非同步載入的方式

来源:https://www.cnblogs.com/manshufeier/archive/2018/08/13/9469673.html
-Advertisement-
Play Games

一、同步載入與非同步載入的形式 1. 同步載入 我們平時最常使用的就是這種同步載入形式：<script src="http://yourdomain.com/script.js"></script> 同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的文件載入（如圖像）、 ...


一、同步載入與非同步載入的形式

1. 同步載入

我們平時最常使用的就是這種同步載入形式：<script src="http://yourdomain.com/script.js"></script> 

同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的文件載入（如圖像）、渲染、代碼執行。

js 之所以要同步執行，是因為 js 中可能有輸出 document 內容、修改dom、重定向等行為，所以預設同步執行才是安全的。

以前的一般建議是把<script>放在頁面末尾</body>之前，這樣儘可能減少這種阻塞行為，而先讓頁面展示出來。

簡單說：載入的網路 timeline 是瀑布模型，而非同步載入的 timeline 是併發模型。

2. 常見非同步載入（Script DOM Element）

(function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'http://yourdomain.com/script.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();

非同步載入又叫非阻塞，瀏覽器在下載執行 js 同時，還會繼續進行後續頁面的處理。

這種方法是在頁面中<script>標簽內，用 js 創建一個 script 元素並插入到 document 中。這樣就做到了非阻塞的下載 js 代碼。

async屬性是HTML5中新增的非同步支持，見後文解釋，加上好（不加也不影響）。

此方法被稱為 Script DOM Element 法，不要求 js 同源。

將js代碼包裹在匿名函數中並立即執行的方式是為了保護變數名泄露到外部可見，這是很常見的方式，尤其是在 js 庫中被普遍使用。

例如 Google Analytics 和 Google+ Badge 都使用了這種非同步載入代碼：

(function() {
     var ga = document.createElement('script'); 
　　  ga.type = 'text/javascript'; 
 　　 ga.async = true;
　　  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 
(function(){
　　 var po = document.createElement("script");
　　 po.type = "text/javascript"; 
　　 po.async = true;
　　 po.src = "https://apis.google.com/js/plusone.js";
　　 var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(po, s);
 })();
但是，這種載入方式在載入執行完之前會阻止 onload 事件的觸發，而現在很多頁面的代碼都在 onload 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。

3. onload 時的非同步載入

(function() {
     function async_load(){
         var s = document.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'http://yourdomain.com/script.js';
         var x = document.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);
     }
     if (window.attachEvent)
         window.attachEvent('onload', async_load);
     else
         window.addEventListener('load', async_load, false);
 })();

這和前面的方式差不多，但關鍵是它不是立即開始非同步載入 js ，而是在 onload 時才開始非同步載入。這樣就解決了阻塞 onload 事件觸發的問題。

補充：DOMContentLoaded 與 OnLoad 事件

DOMContentLoaded : 頁面(document)已經解析完成，頁面中的dom元素已經可用。但是頁面中引用的圖片、subframe可能還沒有載入完。

OnLoad：頁面的所有資源都載入完畢（包括圖片）。瀏覽器的載入進度在這時才停止。

這兩個時間點將頁面載入的timeline分成了三個階段。

4.$(document).ready()

  • 需要引入jquery

  • 相容所有瀏覽器

$(document).ready(function() {
        alert("載入完成！");
 });

5.<script>標簽的async="async"屬性

<script src="file.js" async></script> 

  • async屬性是HTML5新增屬性，需要Chrome、FireFox、IE9+瀏覽器支持；

  • async屬性規定一旦腳本可用，則會非同步執行；

  • async屬性僅適用於外部腳本；

  • 此方法不能保證腳本按順序執行；

  • 他們將在onload事件之前完成。

6.<script>標簽的defer="defer"屬性

 <script src="file.js" defer></script> 

  • defer屬性規定是否對腳本執行進行延遲，直到頁面載入為止；

  • 如果腳本不會改變文檔的內容，可將defer屬性加入到<script>標簽中，以便加快處理文檔的速度；

  • 相容所有瀏覽器；

  • 此方法可以確保所有設置了defer屬性的腳本按順序執行。

7.非同步載入的其它方法

由於Javascript的動態特性，還有很多非同步載入方法：

  • XHR Eval 

  • XHR Injection

  • Script in Iframe

  • document.write Script Tag

  • 還有一種方法是用 setTimeout 延遲0秒與其它方法組合。

XHR Eval ：通過 ajax 獲取js的內容，然後 eval 執行。

 var xhrObj = getXHRObject(); 
 xhrObj.onreadystatechange =  
   function() {  
     if ( xhrObj.readyState != 4 ) return; 
     eval(xhrObj.responseText); 
   }; 
 xhrObj.open('GET', 'A.js', true); 
 xhrObj.send('');

Script in Iframe：創建並插入一個iframe元素，讓其非同步執行 js 。

 var iframe = document.createElement('iframe'); 
 document.body.appendChild(iframe); 
 var doc = iframe.contentWindow.document; 
 doc.open().write('<body onload="insertJS()">'); 
 doc.close();

GMail Mobile：頁內 js 的內容被註釋，所以不會執行，然後在需要的時候，獲取script元素中 text 內容，去掉註釋後 eval 執行。

<script type="text/javascript"> 
 /* 
 var ...  
 */ 
 </script>

詳見參考資料中2010年的Velocity 大會 Steve Souders 和淘寶的那兩個講義。

二、async 和 defer 屬性

1. defer 屬性

<script src="file.js" defer></script> 

defer屬性聲明這個腳本中將不會有 document.write 或 dom 修改。

瀏覽器將會並行下載 file.js 和其它有 defer 屬性的script，而不會阻塞頁面後續處理。

defer屬性在IE 4.0中就實現了，超過13年了！Firefox 從 3.5 開始支持defer屬性 。

註：所有的defer腳本保證是按順序依次執行的。

2. async 屬性

<script src="file.js" async></script> 

async屬性是HTML5新增的。作用和defer類似，但是它將在下載後儘快執行，不能保證腳本會按順序執行。它們將在onload 事件之前完成。 Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 屬性。可以同時使用 async 和 defer，這樣IE 4之後的所有 IE 都支持非同步載入。

3. 詳細解釋

<script> 標簽在 HTML 4.01 與 HTML5 的區別：

  • type 屬性在HTML 4中是必須的，在HTML5中是可選的。

  • async 屬性是HTML5中新增的。

  • 個別屬性（xml:space）在HTML5中不支持。

說明：

（1）沒有 async 屬性，script 將立即獲取（下載）並執行，然後才繼續後面的處理，這期間阻塞了瀏覽器的後續處理。

（2）如果有 async 屬性，那麼 script 將被非同步下載並執行，同時瀏覽器繼續後續的處理。

（3）HTML4中就有了defer屬性，它提示瀏覽器這個 script 不會產生任何文檔元素（沒有document.write），因此瀏覽器會繼續後續處理和渲染。

（4）如果沒有 async 屬性但是有 defer 屬性，那麼script 將在頁面parse之後執行。

（5）如果同時設置了二者，那麼 defer 屬性主要是為了讓不支持 async 屬性的老瀏覽器按照原來的 defer 方式處理，而不是同步方式。

PS：既然 HTML5 中已經支持非同步載入，為什麼還要使用前面推薦的那種麻煩（動態創建 script 元素）的方式？

答：為了相容尚不支持 async 老瀏覽器。如果將來所有瀏覽器都支持了，那麼直接在script中加上async 屬性是最簡單的方式。

三、延遲載入（lazy loading）

前面解決了非同步載入（async loading）問題，再談談什麼是延遲載入。

延遲載入：有些 js 代碼並不是頁面初始化的時候就立刻需要的，而是稍後的某些情況才需要的。延遲載入就是一開始並不載入這些暫時不用的js，而是在需要的時候或稍後再通過js 的控制來非同步載入。

也就是將 js 切分成許多模塊，頁面初始化時只載入需要立即執行的 js ，然後其它 js 的載入延遲到第一次需要用到的時候再載入。

特別是頁面有大量不同的模塊組成，很多可能暫時不用或根本就沒用到。就像圖片的延遲載入，在圖片出現在可視區域內時（在滾動條下拉）才載入顯示圖片。

四、script 的兩階段載入 與 延遲執行（lazy execution）

JS的載入其實是由兩階段組成：下載內容（download bytes）和執行（parse and execute）。

瀏覽器在下載完 js 的內容後就會立即對其解析和執行，不管是同步載入還是非同步載入。

前面說的非同步載入，解決的只是下載階段的問題，但代碼在下載後會立即執行。

而瀏覽器在解析執行 JS 階段是阻塞任何操作的，這時的瀏覽器處於無響應狀態。

我們都知道通過網路下載 script 需要明顯的時間，但容易忽略了第二階段，解析和執行也是需要時間的。script的解析和執行所花的時間比我們想象的要多，尤其是script 很多很大的時候。有些是需要立刻執行，而有些則不需要（比如只是在展示某個界面或執行某個操作時才需要）。

這些script 可以延遲執行，先非同步下載緩存起來，但不立即執行，而是在第一次需要的時候執行一次。 

利用特殊的技巧可以做到下載與 執行的分離 (再次感謝 javascript 的動態特性)。比如將 JS 的內容作為 Image或 object 對象載入緩存起來，所以就不會立即執行了，然後在第一次需要的時候再執行。 

五、script 標簽使用的歷史

1. script 放在 HEAD 中

<head>
  <script src=“…”></script>
</head>

  • 阻止了後續的下載；

  • 在IE 6-7 中 script 是順序下載的，而不是現在的 “並行下載、順序執行” 的方式；

  • 在下載和解析執行階段阻止渲染（rendering）。

2. script 放在頁面底部（2007）

... 
 <script src=“…”></script> 
 </body>

  • 不阻止其它下載；

  • 在IE 6-7 中 script 是順序下載的；

  • 在下載和解析執行階段阻止渲染（rendering）。

3. 非同步載入script（2009）

var se = document.createElement
('script'); 
se.src = 'http://anydomain.com/A.js'; 
document.getElementsByTagName('head') 
[0].appendChild(se);

這就是本文主要說的方式。

  • 不阻止其它下載；

  • 在所有瀏覽器中，script都是並行下載；

  • 只在解析執行階段阻止渲染（rendering）。

4. 非同步下載 + 按需執行 (2010)

var se = new Image(); 
se.onload = registerScript(); 
se.src = 'http://anydomain.com/A.js';

 把下載 js 與 解析執行 js 分離出來

  • 不阻止其它下載；

  • 在所有瀏覽器中，script都是並行下載；

  • 不阻止渲染（rendering）直到真正需要時。

六、非同步載入的問題

在非同步載入的時候，無法使用 document.write 輸出文檔內容。

在同步模式下，document.write 是在當前 script 所在的位置輸出文檔的。而在非同步模式下，瀏覽器繼續處理後續頁面內容，根本無法確定 document.write 應該輸出到什麼位置，所以非同步模式下 document.write 不可行。而到了頁面已經 onload 之後，再執行 document.write 將導致當前頁面的內容被清空，因為它會自動觸發 document.open 方法。

實際上document.write的名聲並不好，最好少用。

替代方法：

1. 雖然非同步載入不能用 document.write，但還是可以onload之後執行操作dom（創建dom或修改dom）的，這樣可以實現一些自己的動態輸出。比如要在頁面非同步創建一個浮動元素，這和它在頁面中的位置就沒關係了，只要創建出該dom元素添加到 document 中即可。

2. 如果需要在固定位置非同步生成元素的內容，那麼可以在該固定位置設置一個dom元素作為目標，這樣就知道位置了，非同步載入之後就可以對這個元素進行修改。

六、JS 模塊化管理

非同步載入，需要將所有 js 內容按模塊化的方式來切分組織，其中就存在依賴關係，而非同步載入不保證執行順序。

另外，namespace 如何管理等相關問題。這部分已超出本文內容，可參考：

RequireJS 、 CommonJS 以及 王保平(淘寶)的 SeaJS 及其博客 。

七、JS最佳實踐

1. 最小化 js 文件，利用壓縮工具將其最小化，同時開啟http gzip壓縮工具；

2. 儘量不要放在 <head> 中，儘量放在頁面底部，最好是</body>之前的位置；

3. 避免使用 document.write 方法；

4. 非同步載入 js ，使用非阻塞方式，就是此文內容；

5. 儘量不直接在頁面元素上使用 Inline Javascript，如onClick 。有利於統一維護和緩存處理。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • angular應用容器化部署
    angular 應用容器化部署 Intro 我自己有做一個個人主頁，雖然效果不怎麼樣（不懂設計的典型程式猿...)，但是記錄了我對於前端框架及工具的一些實踐， 從開始只有一個 angularjs 製作的頁面到後面加入 less 動態寫css， gulp 自動化的將 less 文件編譯成 css 文件 ...
  • 關於使用WeUI在IE中提示“font-face 未能完成 OpenType 嵌入許可權檢查。許可權必須是可安裝的。”的問題
    @font-face是css3中定義字體的規則。 首先，在使用weui時，在Chrome、Firefox下沒有問題，但是在IE下提示“font-face 未能完成 OpenType 嵌入許可權檢查。許可權必須是可安裝的”，如下圖： 經過一番查找資料，解決方法如下： 1. 將@font-face中，字體的 ...
  • 把微信小程式非同步API為Promise，簡化非同步編程
    把微信小程式非同步API轉化為Promise。用Promise處理非同步操作有多方便，誰用誰知道。 微信官方沒有給出Promise API來處理非同步操作，而官方API非同步的又非常多，這使得多非同步編程會層層回調，代碼一複雜，回調起來就想砸電腦。 於是寫了一個通用工具，把微信官方的非同步API轉化為Promi ...
  • Javascript toString()、toLocaleString()、valueOf()三個方法的區別
    Array、Boolean、Date、Number等對象都具有toString()、toLocaleString()、valueOf()三個方法，那這三個方法有什麼區別？？？ 一、JS Array 例子： var array = new Array("niu","li","na"); console ...
  • es6 解構賦值
    結構賦值即按照一種模式對變數進行賦值，分為數組解構賦值和對象結構賦值 1. 數組結構賦值 let a; [a,b]=[1,2]//數組類型解構賦值 console.log(a);//1 [a,b,...rest]=[1,2,3,4,5,6]//輸出1,2,[3,4,5,6] [a,b,c=3]=[1 ...
  • jQuery全屏滾動插件fullPage使用
    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> <script src="chajian/jquery.fullPage.min.js"></script> 2. 書寫html <div id=" ...
  • jQuery獲取Select option 選擇的Text和 Value
    獲取一組radio被選中項的值:var item = $('input[name=items][checked]').val();獲取select被選中項的文本var item = $("select[@name=items] option[@selected]").text(); 獲取select ...
  • ES6的小知識（前半部分）
    一、let與const的使用 let：用來聲明一個變數，與var類似 1.用let聲明的變數，所聲明的變數只在命令所在的代碼塊內有效 2.用let聲明的變數在域解析的時候是不會被提升的 3.let不允許在同一作用域下聲明已經存在的變數 4.let和var在for迴圈里的區別 另外在for迴圈語句里的 ...
一周排行
    -Advertisement-
    Play Games
  • .NET 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類