浅谈async、defer以普通script加载的区别

更新时间：2023年05月12日 16:08:24 作者：白哥学前端

本文主要介绍了浅谈async、defer以普通script加载的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

如果用一张图片诠释这几种script加载的特点，应该是这样的：

结合图片我们可以将三种方式的特点总结如下：

<script> : 当HTML解析过程中遇到script标签时，浏览器中断HTML解析，随即下载script文件，完成后立即执行script，执行完成后再继续HTML解析
<script async> : 当HTML解析过程中遇到script标签时，不会中断HTML解析，同时并行下载script文件，下载完成后中断HTML解析并执行script，执行完成后再继续HTML解析（script的执行顺序不一定按照script标签的出现顺序，而是取决于script下载完成的顺序）
<script defer> : 当HTML解析过程中遇到script标签时，不会中断HTML解析，同时并行下载script文件，直到HTML解析完成再执行script（script的执行顺序与script标签出现顺序一致）

我们可以通过一个小项目验证上面的结论。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    console.time('timer');
    console.timeLog('timer', '--- Start parsing HTML');
    document.addEventListener('DOMContentLoaded', function () {
      console.timeLog('timer', '--- Document loaded');
    });
  </script>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <!-- 此处省略500行重复元素 -->
  <script>console.timeLog('timer', '--- Start loading 1.js')</script>
  <script src='./1.js'></script>
  <script>console.timeLog('timer', '--- Start loading 2.js')</script>
  <script src='./2.js'></script>
  <script>console.timeLog('timer', '--- Start loading 3.js')</script>
  <script src='./3.js'></script>
  <!-- 此处省略1500行重复元素 -->
   <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <script>
    console.timeLog('timer', '--- End parsing HTML')
  </script>
</body>
</html>

1.js:

const text1 = `
  // 超长文本
`
text1.split(' ');
console.timeLog('timer', '--- 1.js excuted');

2.js:

const text2 = `
  // 超长文本
`
text2.split(' ');
console.timeLog('timer', '--- 2.js excuted');

3.js:

const text3 = `
  // 超长文本
`
text3.split(' ');
console.timeLog('timer', '--- 3.js excuted');

我们分别使用普通、async和defer的方式加载1.js、2.js、3.js，观察控制台的打印结果：

普通:

结论：script出现会中断HTML加载，且script会顺序的加载、执行，所有script执行完成后再解析HTML。

Async:

结论：HTML解析和script下载同步进行，script执行会中断HTML解析；script执行顺序和tag出现顺序不一定相同；script可能会在document loaded之后执行。

Defer:

结论：HTML解析和script下载同步进行；script会在HTML解析完成后和document loaded之前执行，且执行顺序和tag出现顺序一致。

由以上实验可知：如果使用普通方式时通常建议将script放到<body>的最后，以免阻塞HTML解析影响网页打开速度。而defer相对于async更具优势，不会阻塞HTML解析且script的执行顺序可以预测，有一些需要预先下载执行的script可以使用defer的方式在<head>中引用。

到此这篇关于浅谈async、defer以普通script加载的区别的文章就介绍到这了,更多相关async、defer以及普通script加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

教你用wxml2canvas将微信小程序页面转为图片
如果需要实现将小程序的页面转为图片,第一步是要先把页面转为canvas,再将canvas转为图片,下面这篇文章主要给大家介绍了关于用wxml2canvas将微信小程序页面转为图片的相关资料,需要的朋友可以参考下
2022-11-11
Javascript 鼠标移动上去滑块跟随效果代码分享
这篇文章主要介绍了Javascript 鼠标移动上去滑块跟随效果代码，有需要的朋友可以参考一下
2013-11-11
javascript 变量作用域代码分析
作用域（scope）是javascript中一项令人棘手的的特性。所有面向对象编程语言都有某种形式的作用域，不过和把这个概念放在什么上下文中有关。在javascript里，作用域是由函数划分的。
2009-06-06
分享50个超级有用的JavaScript单行代码(推荐!)
JavaScript是一种脚本语言,是直接在浏览器运行的,下面这篇文章主要给大家介绍了50个超级有用的JavaScript单行代码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
d3.js实现图形缩放平移
这篇文章主要为大家详细介绍了d3.js实现图形缩放平移效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
JavaScript解决跨域的三种方法小结
在Web应用中,当一个网页的脚本试图去请求另一个域名下的资源时,就会遇到跨域问题,跨域问题是由浏览器的同源策略所引起的,本文给大家介绍了JavaScript解决跨域的三种方法,需要的朋友可以参考下
2024-03-03
javascript IE中的DOM ready应用技巧
当我们想在页面加载之后执行某个函数，肯定会想到onload了但onload在浏览器看来，就是页面上的东西全部都加载完毕后才能发生，但那就为时已晚了。
2008-07-07
如何利用JS判断整数x是否是回文数
回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数,下面这篇文章主要给大家介绍了关于如何利用JS判断整数x是否是回文数的相关资料,需要的朋友可以参考下
2022-01-01
利用babel将es6语法转es5的简单示例
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码，所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料，文章通过示例介绍的非常详细，需要的朋友可以参考下。
2017-12-12
使用javascript控制cookie显示和隐藏背景图
本文主要介绍了使用javascript来控制背景图片的显示和隐藏，当点击关闭按钮时，控制CSS使页面不加载背景图，同时记录COOKIE相关参数，并设置cookie的有效期
2014-02-02

浅谈async、defer以普通script加载的区别

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具