JavaScript 高性能筆記

時間 2019-11-19

標籤 javascript 高性能筆記欄目 JavaScript 简体版

原文原文鏈接

瀏覽器解析 JavaScript 、CSS 、DOM 時，通常都是單線程解析，因此，引用外部文件時的位置不一樣，UE體驗也不一樣。javascript

下面是 Yahoo 大牛 Nicholas C. Zakas 的《High Performance JavaScript》書中的總結。html

一、把不影響DOM佈局的 JS 文件引用放到 </body> 以前，這樣瀏覽器可先加載HTML頁面，解析DOM，給人相對快的感受。java

　　<html>jquery

　　<head>git

　　　　<title></title>github

　　</head>chrome

　　<body>數組

　　　　...瀏覽器

　　　　<script src="jquery.js"></script>app

　　</body>

　　</html>

二、動態加載 JS，意思是動態生成<script>標籤，加載外部 JS 文件，利用了瀏覽器解析 DOM 元素的 src 時不阻塞的特性。

　　通常可在<head></head>標籤中動態生成<script>標籤，以下，

<head>
    <script>
        // 加載 JS 的封裝函數
        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.readState == "complete") {
                        script.onreadystatechange = null;
                        // JS 文件加載完以後，能夠處理一些事情
                        callback();
                    }
                }
            }
            else { // firefox\ chrome \opera
                script.onload = function() {
                    // JS 文件加載完以後，能夠處理一些事情
                    callback();
                };
            }
            
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);            
        }
    
        // 
        loadScript("http://xxx.com/jquery.com", function() { ... });
        
    </script>
</head>

　　經過以上方法，也可按照順序加載多個 JS 文件，

loadScript("file1.js", function() {
    loadScript("file2.js", function() {
        loadScript("file3.js", function() {
            // 加載完畢
            ......
        });
    });
});

三、使用 LazyLoad.js 開源庫以非阻塞方式加載外部 JS 文件，從 github : LazyLoad.js 下載，　　

　　　　<script src="js/lazyload-min.js"></script>
　　　　<script>
　　　　　　LazyLoad.js("the-rest.js", function() {
　　　　　　　　// 加載完以後，作一些邏輯操做
　　　　　　　　......
　　　　　　});
　　　　</script>

　　也能夠同時加載多個 JS 文件，寫成數組的形式，

　　　　LazyLoad.js(["the-rest.js", "file2.js", "file3.js"], function() {
　　　　　　// 加載完以後，作一些邏輯操做
　　　　　　......
　　　　});

　　注意，LazyLoad 會保證在全部的瀏覽器中按照順序加載全部 JS 文件，每個 JS 文件都是一個單獨的 HTTP 請求，

　　而且所有加載完以後纔會執行回調函數 callback。

　　LazyLoad 也能夠用來動態加載 CSS 文件，CSS文件的下載以並行的方式完成，而且不會阻塞其餘頁面。

四、使用 LAB.js 開源庫以非阻塞方式加載外部 JS 文件，從 lab.js 下載，　　

　　　　<script src="js/LAB.min.js"></script>
　　　　<script>
　　　　　　$LAB.script("the-rest.js").wait(function() {
　　　　　　　　// 加載完以後，作一些邏輯操做
　　　　　　　　......
　　　　　　});
　　　　</script>

　　$LAB 的方法都返回一個 $LAB 對象，因此能夠進行鏈式調用。

　　$LAB.wait() 方法保證只有等 JS 文件下載並執行完以後，纔會執行最終的回調函數。

　　也能夠同時加載多個 JS 文件，　　

　　　　$LAB.script("first.js").script("the-rest.js").wait(function() {
　　　　　　// 加載完以後，作一些邏輯操做
　　　　　　......
　　　　});

　　通常狀況下，LAB 會按照順序執行多個JS 文件，但並不保證，因此，若是你要保證運行的先後順序，

　　那麼請使用 wait() 方法，以下，

　　　　$LAB.script("first.js").wait().script("the-rest.js").wait(function() {
　　　　　　// 加載完以後，作一些邏輯操做
　　　　　　......
　　　　});

　　這樣，就可保證 first.js 在 the-rest.js 以前運行。下載的順序能夠並行。