異步加載（延遲加載）與同步加載

時間 2019-12-06

標籤異步加載延遲同步简体版

原文原文鏈接

異步加載（延遲加載）與同步加載

一、同步加載，等待下載並執行完成後繼續

咱們平時使用的最多的一種方式，就是順着頁面解析的順序依次加載須要的資源文件，如.css、.js、img等資源。javascript

<script src="http://yourdomain.com/script.js"></script>

包含在 <script>元素內部的代碼將被從上至下依次執行。css

在解析外部js文件（或者下載該文件）的時候，頁面的處理會暫時中止。html

引入外部文件的時候，若是<script></script>之間有腳本，將會被忽略。java

同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，中止後續的解析，只有噹噹前加載完成，才能進行下一步操做。jquery

因此默認同步執行纔是安全的。但這樣若是js中有輸出document內容、修改dom、重定向等行爲，就會形成頁面堵塞。ajax

因此通常建議把<script>標籤放在<body>結尾處，這樣儘量減小頁面阻塞。瀏覽器

二、延遲腳本：添加defer="defer"屬性

使用<script>的defer屬性：會在遇到</html> 標籤後再執行。只適用於外部腳本。

<script type="text/javascript" defer = "defer" src = "example1.js"></script>

三、異步腳本：添加async屬性，不保證執行順序

目的是保證不讓頁面等待腳本的下載和執行。安全

<script type="text/javascript" async = "async" src = "example1.js"></script>

異步腳本必定會在頁面load以前執行。app

四、延遲加載js的方法，對應於預加載，在load事件以後動態建立標籤並加載

動態添加文件，適用於大多數的文件：dom

onload事件：

在頁面元素徹底加載完成以後（包括圖像、js文件、css文件等外部文件），就會觸發window對象上的load事件。

兩種定義方式：

一、利用跨瀏覽器事件對象來綁定

EventUtil.addHandler(window,"load",function(event){
    console.log("loaded!");
}

二、直接寫入頁面內，事件添加到<body>上

<body onload="console.log('loaded!')">

固然除了做用於body上，也能夠爲圖像元素指定onload事件。

<img src="smile.png" onload = "console.log('img was loaded!')">

預加載圖片即是這樣，先建立一個圖片對象，而後給圖片延遲添加src屬性，這樣就能夠在頁面加載完成以後的空閒時間內，加載想要預加載的圖片。

EventUtil.addHandler(window,"load",function(){
    var image = new Image();//這裏可使用for循環來生成多張圖片對象，而後依次賦上src屬性，這樣就能夠提早下載圖片了，也能夠延遲執行這個動做。
    EventUtil.addHandler(image,"load",function(event){
        console.log("loaded!");
    })
    image.src = "smile.png";
}

固然也能夠用來生成<script>標籤。

//這些代碼應被放置在</body>標籤前(接近HTML文件底部)
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");//或者先把元素寫到頁面中，而後動態賦予src值。 element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);//dom2 else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);//IE else window.onload = downloadJSAtOnload;//dom0 </script>

也可使用setTimeout來延遲調用函數來加載（適用於上邊的動態添加地址和ajax請求）。

對應於load事件的是unload事件，這個事件在文檔徹底被卸載的時候觸發，切換頁面會發生unload事件，多用於清除引用避免內存泄漏。

五、固然能夠藉助於jquery的$(document).ready

<!DOCTYPE html>
<html>
        <head>
                <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
                <script type="text/javascript">
                        $(document).ready(function() {
                            alert("加載完成！");
                        });
                </script>
        </head>
        <body>
                <img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
        </body>
</html>

區別於js原生的onload事件，主要體如今一下幾個方面：

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行，$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢；
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個（後邊的覆蓋前面的，能夠把全部的操做都寫處處理函數下面），$(document).ready()能夠同時編寫多個，而且均可以獲得執行；
window.onload沒有簡化寫法，$(document).ready(function(){})能夠簡寫成$(function(){})。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。