加載頁面時如何提高性能

將要加載的腳本放到body底部:

最簡單且最經常使用的方法,當頁面加載完DOM元素以後再加載腳本文件

減小引入腳本數量

如有多個腳本文件,能夠使用YUI Compressor壓縮爲一個文件

使用無阻塞腳本

load事件以後在下載腳本

延遲腳本

使用defer屬性 <script src='test.js' defer></script>

在js中動態建立腳本元素

var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.appendChild(script);

使用XMLHttpRequest腳本注入

var xhr= new XMLHttpRequest();
xhr.open('get', 'test.js', true);
xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4){ 
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ 
            var script = document.createElement (「script」);
                script.type = 「text/javascript」; 
                script.text = xhr.responseText; 
                document.body.appendChild(script); 
        } 
    } 
};
xhr.send(null);
相關文章
相關標籤/搜索