正在读取数据,页面载入中,请稍后...

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

小千解析:防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没必要存第三方。

本文结束

评论专区

发表评论

评论列表(无评论)