加载页面时如何提升性能

将要加载的脚本放到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);

转载于:https://www.cnblogs.com/hbujt/p/5586387.html