异步加载JavaScript的方法

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_34966814/article/details/88709794

在一般情况下,HTML文档中的标签是按顺序加载的。如果将<script>标签嵌在文档头部,那么只有当脚本加载完毕,并且解释后才能加载页面内容,会降低网页性能。为了解决这个问题,在嵌入脚本时,一般会将<script>标签放置在文档的最后,这样可以先让页面显示,再加载js脚本,提高用户体验。

以上情况对于嵌入脚本和外部脚本来说都使用。对于外部脚本来说,我们可以让它异步加载,在加载HTML文档的同时,加载js外部脚本。js异步加载的方式如下:

  1. defer:这是<script>标签的一个属性,是表明脚本在执行时不会影响页面的构造。也就是说,脚本会延迟到整个页面都解释完毕后再运行。因此,在<script>标签中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。按照标准,设置了defer属性的脚本是按照顺序执行的,但在实际中不一定顺序执行,因此页面最好只包含一个设置了defer属性的脚本。

  2. async:这也是<script>标签的一个属性,它告诉浏览器,应立即下载脚本文件,但不得妨碍页面中其他操作。该属性不能保证外部脚本的加载顺序,而且脚本加载完立即执行,执行顺序不能保证。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。

  3. 使用<script>标签加载es6标签的时候,设置属性type=module,等同于打开了<script>标签的defer属性,等待渲染完毕后再执行模块脚本。<script>标签的async属性也可以打开,这时只要加载完成,渲染引擎就会中断渲染立即执行。执行完成后,再恢复渲染。

展开阅读全文

没有更多推荐了,返回首页