重新認識script標簽

Magicer 發布于2019-08-20 11:24 / 2198人閱讀

摘要：盡管腳本的下載過程中不會相互影響，但頁面仍然要等到所有代碼下載并完成執行才能繼續。

defer和asnyc（只對外部文件有效）

defer 在頁面完成解析時執行代碼，這個屬性表明腳本在執行時不會影響頁面的構造，在元素中設置這個屬性相當于告訴瀏覽器立即下載但延遲執行

async 相對于頁面其他部分異步執行腳本，一般的script標簽都是會阻塞頁面執行的，沒有加上async屬性的標簽會阻塞后面的標簽的解析。一般用在不需要操作dom元素的腳本上，例如一些統計代碼（跟頁面執行邏輯無關的，不涉及dom操作的），可以避免因長時間加載而呈現白屏現象

script中有或沒有它們的區別

script中沒有defer和async，會立刻加載并執行

script中有async沒有defer時，會與渲染后續文檔元素并行加載，加載完自動執行

script中有defer沒有async時，后續文檔元素渲染會與腳本文件加載并行，但是執行所有元素解析完成之后，在DOMContentLoaded之前執行

https://segmentfault.com/q/10... 這個回答很棒

但是紅寶書中有這樣一句話：HTML5規范要求腳本執行應該按照腳本出現的先后順序執行，但在現實生活中，延遲腳本并不一定按照順序執行，也不一定會在DOMContentLoaded事件中觸發前執行，因此最好只包含一個延遲腳本。因此上圖第三點說法有欠缺

未解決問題：所有瀏覽器都兼容，那么為什么沒有看到別人在用呢？

查了一下，網易有在用，瀏覽器兼容還是有點小問題，and業務需求

script是可以并行下載的，這里應該是指放在head中的script標簽，不會阻塞其他script標簽，但是仍然會阻塞其他資源下載，例如圖片。盡管腳本的下載過程中不會相互影響，但頁面仍然要等到所有js代碼下載并完成執行才能繼續。-- 《高性能的js》

并行下載測試

建議放在body的底部

每個script標簽初始化都會阻塞頁面渲染，在解析html頁面過程中每遇到一個script標簽都會因執行腳本而導致一定的延時

盡管單個較大的js文件只請求一次http，但是這樣會導致鎖死瀏覽器一段時間，解決方案除了上面所說的defer之外還可以動態創建標簽加入head中，可以通過onload事件來監聽腳本加載是否完畢，ie下通過readystatechange事件

function loadScript(url, callback) {

    var script = document.createElement("script");

    if ( script.readyState ) { // IE

        script.onreadystatechange = function(){

            if( script.readyState == "loaded" || script.readyState == "complete") {

                script.onreadystatechange = null; // 同時檢查兩種狀態，只要有一種觸發就刪除事件處理器，避免觸發兩次
                callback();
            }

        }

    }else{

        script.onload = function(){
            callback();
        }

    }


    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);

}

GPU云服務器云服務器 Scripting Script scripts 認識

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

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

preload、prefetch的認識

摘要：和可以用來指定資源是最高優先級的。如果用戶進入指定的鏈接，隱藏的這個頁面就會進入馬上進入用戶的視線。微軟最近也宣布會讓在上用類似的技術。預加載現在的網絡情況雖然很樂觀，但是 defer和async 當瀏覽器碰到 script 腳本的時候：沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，立即指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后...

alogy 2019-08-29 17:13 評論0 收藏0
了解Chrome擴展程序開發

摘要：了解擴展程序開發本文大量借鑒圖靈電子書擴展及應用開發首發版首先，我嘗試來用簡單幾句話描述一下擴展程序擴展主要用于對瀏覽器功能的增強，它強調與瀏覽器相結合。提供了接口，允許擴展對用戶的歷史進行管理。了解Chrome擴展程序開發本文大量借鑒圖靈電子書-Chrome擴展及應用開發（首發版）首先，我嘗試來用簡單幾句話描述一下Chrome擴展程序： Chrome擴展主要用于對瀏覽器功能的增...

lemanli 2019-08-21 18:46 評論0 收藏0
再談JavaScript模塊化

摘要：應用日益復雜，模塊化已經成為一個迫切需求。異步模塊加載機制。引用的資源列表太長，懶得回調函數中寫一一對應的相關參數假定這里引用的資源有數十個，回調函數的參數必定非常多這就是傳說中的簡述緣起模塊通常是指編程語言所提供的代碼組織機制，利用此機制可將程序拆解為獨立且通用的代碼單元。模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴管理以及發布到生產環境時的自動化打包與處理等多個方面...

MorePainMoreGain 2019-08-26 10:14 評論0 收藏0
用vuepress搭建一個夠自己用的博客

原文博客閑扯很久以前，自己擁有一個用hexo搭建的靜態博客網站:ox:，記得當時為了把它搞出來，廢了不少勁:anger:，然后后來又斷斷續續更改過一些配置和樣式，但是因為感覺各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現在也懶得在打掃了（其實是好久不用，有點忘了怎么用了:-1::poop:），前段時間在百度統計上看了看那個靜態網站的訪問人數，發現已經很久很久沒人訪問過了...

Forelax 2019-05-27 17:43 評論0 收藏0
用vuepress搭建一個夠自己用的博客(帶評論功能)

摘要：那么我們如何在博客中實現這個功能呢，其實很簡單，首先修改我們的文件介紹正在使用的構造函數附加到根實例的一些選項當前應用的路由實例站點元數據對的判斷是防止編譯的時候報錯然后新建一個的文件取消默認的復制事件作者靜水深流原文著作權歸作者所有。原文博客閑扯很久以前，自己擁有一個用hexo搭建的靜態博客網站，記得當時為了把它搞出來，廢了不少勁，然后后來又斷斷續續更改過一些配置和樣式，但是因...

thekingisalwaysluc 2019-08-26 13:55 評論0 收藏0