外部js引用标注async属性后网页速度加快

时间:2019-08-04 17:18:30 分类:建站知识 阅读:1023
摘要:async属性和defer属性类似,也是会开启一个线程去下载js文件
外部js引用标注async属性后网页速度加快 一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件。在谈异步加载之前,先来看看浏览器加载js文件的原理。

浏览器加载 JavaScript 脚本,主要通过`script`元素完成。正常的网页加载流程是这样的。

浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
解析过程中,浏览器发现`script`元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。
如果`script`元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。
JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复解析 HTML 网页。

加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染。原因是 JavaScript 代码可以修改 DOM,所以必须把控制权让给它,否则会导致复杂的线程竞赛的问题。

上面所说的,就是我们平时最常见到的,将`script`标签放到`head`中的做法,这样的加载方式叫做同步加载,或者叫阻塞加载,因为在加载js脚本文件时,会阻塞浏览器解析HTML文档,等到下载并执行完毕之后,才会接着解析HTML文档。如果加载时间过长(比如下载时间太长),就会造成浏览器“假死”,页面一片空白。而且,放在`head`中同步加载的js文件中不能对DOM进行操作,否则会产生错误,因为这个时候HTML还没有进行解析,DOM还没有生成。由此看来,同步加载带来的体验往往并不好。

下面我们来看几种异步加载的方式。

1. 将`script`标签放到`body`底部

严格来说,这并不算是异步加载,但是这也是常见的通过改变js加载方式来提升页面性能的一种方式,所以也就放到这里来说。

将`script`放到`body`底部,解决上上面说到的几个问题,一是不会造成页面解析的阻塞,就算加载时间过长用户也可以看到页面而不是一片空白,而且这时候可以在脚本中操作DOM。

2. defer属性

通过给`script`标签设置defer属性,将脚本文件设置为延迟加载,当浏览器遇到带有defer属性的`script`标签时,会再开启一个线程去下载js文件,同时继续解析HTML文档,等等HTML全部解析完毕DOM加载完成之后,再去执行加载好的js文件。

这种方式只适用于引用外部js文件的`script`标签,可以保证多个js文件的执行顺序就是它们在页面中出现的顺序,但是要注意,添加defer属性的js文件不应该使用document.write方法。

3. async属性

async属性和defer属性类似,也是会开启一个线程去下载js文件,但和defer不同的时,它会在下载完成后立刻执行,而不是会等到DOM加载完成之后再执行,所以还是有可能会造成阻塞。

同样的,async也是只适用于外部js文件,也不能在js中使用document.write方法,但是对多个带有async的js文件,它不能像defer那样保证按顺序执行,它是哪个js文件先下载完就先执行哪个。

4. 动态创建`script`标签

可以通过动态地创建`script`标签来实现异步加载js文件,例如下面代码:

异步加载js文件

上面两种方法中,第一种方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。第二种则不会阻止onload事件的触发。

这里要简要说明一下window.DOMContentLoaded和window.onload这两个事件的区别,前者是在DOM解析完毕之后触发,这时候DOM解析完毕,JavaScript可以获取到DOM引用,但是页面中的一些资源比如图片、视频等还没有加载完,作用同jQuery中的ready事件。后者则是页面完全加载完毕,包括各种资源。

说完了这几种常见的异步加载js脚本的方式,再来看最后一个问题,什么时候用defer,什么时候用async呢?一般来说,两者之间的选择则是看脚本之间是否有依赖关系,有依赖的话应当要保证执行顺序,应当使用defer没有依赖的话使用async,同时使用的话defer失效。要注意的是两者都不应该使用document.write,这个导致整个页面被清除。

下面一幅图表明了同步加载以及defer、async加载时的区别,其中绿色线代表 HTML 解析,蓝色线代表网络读取js脚本,红色线代表js脚本执行时间:

同步加载以及defer、async加载时的区别

那么怎么用这个方法呢?看如下截图即可:

async属性标注


珈文网络凭借6年专业企业网站建设经验,坚持以“帮助中小企业实现网络营销化”为宗旨,累计为1200多家中小企业客户提供品质建站服务,得到了客户的一致好评。如果您有公司网站建设优化、公司网站改版、竞价落地页设计、域名注册、主机空间租赁、手机网站建设、网站备案、小程序开发、APP开发、企业宣传视频制作、万词霸屏等方面的需求,请点击QQ咨询我们或拨打咨询热线:158 155 17902(同微信)吧。
声明:本文来自网友投稿,本站免一切责任,如有侵权,请联系小编删除。
链接:https://www.jin-you.com/news/670.html

需要做网站还是小程序?

欢迎联系我们,我们可以提供企业网站建设、小程序开发、外贸独立站、商城建设等IT外包服务

您身边的【企业建站服务专家】

搜索千万次不如咨询1次

主营项目:各类网站建设,电商套图设计,小程序开发,外贸独立站建设等

立即咨询 400 188 2712
在线客服
嘿,我来帮您!