[高性能javascript筆記]1-加載和執行

時間 2020-01-09

標籤高性能 javascript 筆記加載執行欄目 JavaScript 简体版

原文原文鏈接

不管是外鏈仍是內鏈，<script>標籤每次出現都霸道地讓頁面等待腳本的解析和執行。這是頁面生存週期的必要環節，由於腳本執行過程當中可能會修改頁面內容。
在<header>標籤中加載多個javascript文件，因爲腳本會阻塞頁面渲染，直到它們所有下載並執行完成後，頁面的渲染纔會繼續。瀏覽器在解析到<body>標籤以前，不會渲染頁面的任何部分。把腳本房東啊頁面頂部將會致使明顯的延遲，一般表現爲顯示空白頁面，用戶沒法瀏覽內容，也沒法與頁面進行交互。
如今的瀏覽器基本都容許並行下載javascript文件，<script>標籤在下載外部資源時不會阻塞其它<script>標籤，遺憾的是，javascript下載過程仍然會阻塞其它資源的下載，好比圖片。
腳本位置：推薦將全部的<script>標籤儘量放到<body>標籤的底部，以儘可能減小對整個頁面下載的影響。
組織腳本：減小頁面包含的<script>標籤數量有助於改善下載阻塞頁面渲染，不要把內嵌腳本緊跟在<link>標籤以後，否則會致使頁面阻塞去等待樣式表的下載。下載單個100kb的文件將比下載4個25kb的文件更快。
無阻塞的腳本：儘管下載單個較大的js文件只產生一次http請求，卻會鎖死瀏覽器一大段時間。爲避免這種狀況，你須要向頁面中逐步加載js文件，這樣作在某種程度上來講不會阻塞瀏覽器。

「無阻塞腳本的祕訣在於，在頁面加載完成以後才加載js代碼，這意味着在window對象的load事件觸發後再加載腳本。」
延遲的腳本：<script>的擴展屬性defer.
defer屬性指明本元素所含的腳本不會修改dom,所以代碼能安全地延遲執行。（可是跨瀏覽器不是個理想的方案，其它瀏覽器會被忽略）

不過如今主流蘭奇都已經支持defer.

html5引入了async屬性，用於異步加載腳本。與defer的相同點都是採用並行下載，在下載過程當中不會產生阻塞。
區別在於，async是加載完成後自動執行，而defer須要等待頁面完成後執行。

defer屬性僅當src屬性聲明時才生效。

動態腳本元素：

function loadScript(url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";

            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);
        }

推薦的無阻塞模式：
https://github.com/rgrove/lazyload
https://github.com/getify/LABjs

相關標籤/搜索

每日一句

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