js动态加载js文件(js异步加载之性能优化篇)

1、【基本优化】

将所有需要的<script>标签都放在</body>之前，确保脚本执行之前完成页面渲染而不会造成页面堵塞问题，这个大家都懂。

2、【合并JS代码，尽可能少的使用script标签】

最常见的方式就是带代码写入一个js文件中，让页面只使用一次<script></script>标签来引入

3、【使用async和defer】

通过给script标签增加 defer属性或者是 async 属性来实现，async和defer不同之处是async加载完成后会自动执行脚本，async是无顺序加载脚本，如果脚本之间没有相互依赖可以说使用，defer加载完成后需要等待页面也加载完成才会执行代码，defer  是顺序加载脚本，只有IE下有效              

defer： <script type='text/javascript' src="file.js" defer></script>

async： <script type='text/javascript' src="file.js" async></script>

4、【动态创建js加载-推荐】

function loadJS(url, callback) {

var script = document.createElement('script'),

fn = callback || function() {};

script.type = 'text/javascript';

//IE

if (script.readyState) {

script.onreadystatechange = function() {

if (script.readyState == 'loaded' || script.readyState == 'complete') {

script.onreadystatechange = null;

fn();

}

};

} else {

//其他浏览器

script.onload = function() {

fn();

};

}

script.src = url;

document.getElementsByTagName('head')[0].appendChild(script);

}

//用法

loadJS('file.js',

function() {

alert('加载成功！');

});

可以将其封装成类库，单独引入。

该原理实现的也有很多不错的js类库可以使用，如LazyLoad.js，支持数组的形式引入，打开浏览器在network中可看到js是同步加载的

这种异步动态加载js可以说是大大提高网页性能，并且还能够处理回调函数。