3、JS文件延迟和异步加载:defer和async属性

2021-03-03 08:28

阅读:664

标签:大型   body   布尔   function   避免   现在   应用程序   执行顺序   get   

在《第一个JavaScript程序》中提到,对于导入的 JavaScript 文件,将按照 <script> 标签在文档中出现的顺序来执行,而且执行过程是文档解析的一部分,不会单独解析或者延期执行。

—般情况下,在文档的

标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件。这意味着必须等到全部 JavaScript 代码都被加载、解析和执行完以后,才能继续解析后面的 HTML 部分。如果加载的 JavaScript 文件很大, HTML 文档解析就容易出现延迟。

为了避免这个问题,在开发 Web 应用程序时,建议把导入 JavaScript 文件的操作放在 后面,让浏览器先 将网页内容解析并呈现出来后,再去加载 JavaScript 文件,以便加快网页响应速度。

延迟执行 JavaScript 文件

示例

在下面示例中,外部文件 test.js 包含的脚本将延迟到浏览器解析完网页之后再执行。浏览器先显示网页标题和段落文本,然后才弹出提示文本。如果不设置 defer 属性,则执行顺序是相反的。

test.html 源码:

  1. span>html>
  2. charset="UTF-8">
  3. 网页标题

  4. 正文内容


test.js 源码:

  1. alert("外部文件");


注意:defer 属性适用于外部 JavaScript 文件,不适用于

异步加载JavaScript文件

在默认情况下,网页都是同步加载外部 JavaScript 文件的,如果 JavaScript 文件比较大, 就会影响后面 HTML 代码的解析。上面提到一种解决方法:就是最后加载 JavaScript 文件。

现在可以为

示例

如果为

  1. span>html>
  2. charset="UTF-8">
  3. 网页标题

  4. 正文内容


async 是 HTML5 新增的布尔型属性,通过设置 async 属性,就不用考虑

3、JS文件延迟和异步加载:defer和async属性

标签:大型   body   布尔   function   避免   现在   应用程序   执行顺序   get   

原文地址:https://www.cnblogs.com/phpcqy/p/14280016.html


评论


亲,登录后才可以留言!