加载页面时如何提高性能

将要加载的脚本放到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);
相关文章
相关标签/搜索