小千解析：防JS阻塞加载网页，异步加载提升页面加载速度

Web前端性能优化——如何提高页面加载速度，网站页面加载秒打开，JS异步延迟加载，提升网页打开速度的方法，JavaScript文件使用异步加载和延迟加载的方法，详细教程尽在小千个人博客网站。

自从上次分享了《图片懒加载效果，只要一句代码就行了》图片延迟加载，最近又有小伙伴问我，如何解决JS阻塞加载，使用异步加载或者延迟加载的方法，让你的网站打开速度更快。下面，小千盘点一下，同步加载、异步加载、延迟加载的方法，总使用同步加载，需使用延迟加载，总有一款适合你的。

方式一：同步加载

<script type="text/javascript" src="aaa.js"></script>

点评：大多数站长，又懒得研究，都是使用这种方式。这种外部调用JS的方式，称为同步加载，又称为阻塞加载，当JS过多，网页过大，宽带过低时，或者是JS加载不出来的时候，会严重卡顿网站打开速度，甚至是卡30-60秒以上，严重的影响用户体验。我们的网站需要这种引用方式，但是又不能全部使用这种引用方式。

方式二：浏览器延迟加载

①、写法一：defer 属性

<script type="text/javascript" src="aaa.js" defer></script>

使用 defer 属性：你可以在script标签中添加 defer 属性，这样浏览器就会延迟加载和执行这个脚本，直到文档解析完毕。

②、写法二： async 属性

<script type="text/javascript" src="aaa.js" async></script>

使用 async 属性：你也可以在script标签中添加 async 属性，这样浏览器就会异步下载和执行这个脚本，但并不保证脚本一定会在文档解析完毕之后才执行。

点评：这两种浏览器延迟加载的方式，就像脱裤子放屁，效果都是一样的。例如：99%的人，会认为 rel="nofollow" 标签，能够限制蜘蛛抓取，只有我是那1%的人，说这种写法就像脱裤子放屁。

方式三：异步加载

<!--{需要加载jQuery插件库}-->
<script type="text/javascript" src="http://nidecms.com/ueditor/jquery.min.js"></script>
<!--{需要加载jQuery插件库}-->
<script type="text/javascript" data-url="aaa.js"></script>    
<script type="text/javascript">$('script[data-url]').each(function() {var _this = $(this),url = _this.attr('data-url');_this.attr('src',url); });</script>

之前写过《网站统计加载慢，提高网站打开速度的解决办法》一文，用于外部、内部JS异步加载都可以，但是，不能盲目的调用，记得要测试加载效果。

点评：机智如我，这种就是异步加载了。异步加载的作用，无论这个aaa.js存在或者不存在，能打开或者是不能打开，都不会影响网站打开速度。悄悄的告诉你，这个可用于百度统计、51统计、友盟统计、自动推送等外部的JS链接效果很好。当然，引用外部JS一定要引用官方的、权威的、信誉好的网站，那些所谓的国外服务器网站就不要引用啦。

方式四：JS中同步加载

①、写法一：直接加载

<script type="text/javascript">
var script = document.createElement("script");
script.src = "aaa.js";
document.head.appendChild(script);
</script>

②、写法二：使用 onload 事件

<script type="text/javascript">
window.addEventListener("load", function () {
    var script = document.createElement("script");
    script.src = "aaa.js";
    document.head.appendChild(script);
});
</script>

使用 onload 事件：你可以在window对象上绑定一个 onload 事件处理器，然后在这个处理器里面加载并执行你的脚本。

③、写法三：在JS中加载

<script type="text/javascript">
document.writeln('<script type="text/javascript" src="aaa.js"></script>');
</script>

这种方式虽然有点好笑，但是有时候也需要这种写法，比同步加载、阻塞加载，效果就强那么一点点而已，因为这个，可以在JS中加判断，在不需要的页面，可以不需要加载。

点评：这种JS中同步加载，和方式二的浏览器延迟加载，以及方式一的同步加载，效果都是一样的，就像脱裤子放屁，都是同步加载，阻塞加载的方式，只是换个不一样的写法而已，JS加载的写法多样，写法高级，纯忽悠小白还是阔以的。

方式五：延迟加载

<script type="text/javascript">
setTimeout(function () {
    var script = document.createElement("script");
    script.src = "aaa.js";
    document.head.appendChild(script);
}, 3000); // 延迟3秒
</script>

设置定时器：你也可以设置一个定时器，等待一定的时间后，再加载和执行你的脚本。

点评：这种写法，确实能够起到延迟加载的作用，甚至能和图片预加载、延迟加载堪比美，但是JS又不是图片，图片可以延迟加载，JS延迟加载太长，有的特效就不起作用了。当然，延迟3-5秒还可以，延迟高了，真的是能把网站的特效给整没了。众所周知，广告联盟代码卡，这种加载方式，一般多数用于加载广告联盟代码，延迟加载效果还是挺到位的。

方式六：非必要加载

<script type="text/javascript">
const bdTongJiToken = "57229cd37c3a574d09838938463ba128";
if(bdTongJiToken){
  var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?" + bdTongJiToken;var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s)})();
}
</script>

设置KEY秘钥，当变量 bdTongJiToken 为空时。
不会加载 https://hm.baidu.com/hm.js?57229cd37c3a574d09838938463ba128 这个JS文件，能提高了网页打开速度。

写在最后

当然，还有很多的写法，比较明显的沉淀代码。像子比主题的JS加载方式，网页特效很多，都是使用load加载的，前端网页只有一个JS调用，其实调用的JS高达15个以上。好了，不要随便测评别人的网站，只要服务器配置够高，只要服务器宽带到位，像JS数量、CSS数量，图片大小，根本不会影响网站加载速度，因为，没有什么问题是钞能力解决不了的。

温馨提示：无论你选择什么加载方式，同步加载、异步加载、延迟加载等加载方式，动手小手，测试一下，真的能提升网站加载速度哦。当然，有的网站，将CSS和JS全部调用第三方网站，虽然能提升加载速度，但是我想告诉你，99%的人打开你的网站是乱码的，因为外部的CSS和JS引用不到位，图片、视频存第三方就好了，CSS和JS没必要存第三方。