js怎么动态加载js⽂件（JavaScript性能优化篇）
下⾯介绍⼀种JS代码优化的⼀个⼩技巧，通过动态加载引⼊js外部⽂件来提⾼⽹页加载速度
1. 【基本优化】
将所有需要的<script>标签都放在</body>之前，确保脚本执⾏之前完成页⾯渲染⽽不会造成页⾯堵塞问题，这个⼤家都懂的。
2.
【合并JS代码，尽可能少的使⽤script标签】
最常见的⽅式就是带代码写⼊⼀个js⽂件中，让页⾯只使⽤⼀次<script></script>标签来引⼊
3.
【⽆堵塞加载JS】
通过给script标签增加 defer属性或者是 async 属性来实现
<script src="file.js" defer></script>
注解：
async和defer不同之处是async加载完成后会⾃动执⾏脚本，defer加载完成后需要等待页⾯也加载完成才会执⾏代码
4.
【动态创建script来加载-推荐】
function loadJS( url, callback ){
var script = ateElement('script'),
fn = callback || function(){};
//IE
adyState){
if( adyState == 'loaded' || adyState == 'complete' ){
fn();
}
js合并两个数组};
}else{
//其他浏览器
fn();
};
}
script.src = url;
}
//⽤法
loadJS('file.js',function(){
alert(1);
});
5.
⾕歌浏览器运⾏效果，script被动态创建在head中
6.
建议⼤家可以封装成类库，单独引⼊。
该原理实现的也有很多不错的js类库可以使⽤，如LazyLoad.js，⽀持数组的形式引⼊，打开浏览器在network中可看到js是同步加载的
7.
【XHR加载】
使⽤ajax⽅式加载
代码：
var xhr = new XMLHttpRequest;
xhr.open('get','file.js',true);
if( adyState == 4 ){
if( xhr.status >=200 && xhr.status < 300 || xhr.status == 304 ){
var script = ateElement('script');
< = sponseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
8. 8
【总结】
最好的⽅式还是使⽤动态创建script的⽅式加载，当动态创建script，浏览器会分配⼀个线程去下载src指向的资源，多个script也是同步下载的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。