javascript腳本的延時加載

時間 2019-11-11

原文原文鏈接

javascript腳本的延時加載

向HTML頁面中插入js代碼的主要方法是使用<script>標籤，在實際的開發中多采用外部文件的方式，主要考慮到外部js代碼的可維護性及可緩存性等優勢。傳統的作法是將全部的外部文件放在<head>元素中，這意味着等到全部的javascript代碼都被下載、解析和執行以後，再開始渲染頁面內容。這種狀況下，當加載的外部js代碼不少的時候，會致使瀏覽器渲染頁面出現明顯的延時，延時期間窗口會顯示一片空白，即所謂的假死狀態，也成爲阻塞狀態。
爲了不這種「假死」狀態的出現，咱們通常建議將外部js代碼放在<body>元素以後加載。javascript

defer延時腳本

爲了更好的解決頁面渲染出現阻塞問題，在HTNL4.01中爲<script>標籤訂義了defer屬性，改屬性只適用於外部腳本，其意圖是在加載或執行腳本時不影響DOM的渲染。html

<html>
    <head>
        <script type="text/javascript" defer="defer" src="demo1.js"></script>
        <script type="text/javascript" defer="defer" src="demo2.js"></script>
    </head>
    <body>
        //DOM建立等操做
    </body>
</html>

上文代碼中加入了兩個外部script腳本，且其中都設置了defer屬性，至關於告訴瀏覽器，當即下載腳本，但延時執行，在整個DOM加載完成後再執行。
另外，在HTML5中要求腳本按照期出現的前後順序執行，即demo1要先於demo2執行，且二者都要先於DOMContentLoaded事件執行，而在現實中延時腳本不必定會按順序執行，也不必定在DOMContentLoaded事件觸發前執行，所以建議在頁面中只包含一個延時腳本。java

async異步加載

async表示異步，是單詞asynchronous[異步的]簡寫。顧名思義，該屬性表示異步加載腳本，與defer屬性同樣，也只適用於外部腳本。
async屬性通知瀏覽器馬上下載腳本，與defer不一樣的是，async並不保證它們的前後執行順序。async屬性是爲了讓頁面實現異步加載，而無需等待腳本的加載和執行。瀏覽器

<html>
    <head>
        <script type="text/javascript" async src="demo1.js"></script>
        <script type="text/javascript" async src="demo2.js"></script>
    </head>
    <body>
        //DOM建立等操做
    </body>
</html>

在上述代碼中，第二個腳本可能會優先於第一個腳本執行，所以必定要保證兩個腳本之間沒有依賴關係。緩存

相關標籤/搜索

每日一句

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