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


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

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

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

    延迟执行 JavaScript 文件

    <script> 标签有一个布尔型属性 defer,设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行。

    示例

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

    test.html 源码:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <script type="text/javascript" defer src="test.js"></script>
    6. </head>
    7. <body>
    8. <h1>网页标题</h1>
    9. <p>正文内容</p>
    10. </body>
    11. </html>


    test.js 源码:

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


    注意:defer 属性适用于外部 JavaScript 文件,不适用于 <script>签包含的 JavaScript 脚本。

    异步加载JavaScript文件

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

    现在可以为 <script> 标签设置 async 属性,让浏览器异步加载 JavaScript 文件,即在加载 JavaScript 文件时,浏览器不会暂停,而是继续解析。这样能节省时间,提升响应速度。

    示例

    如果为 <script> 标签设置 async 属性,然后在浏览器中预览,则会看到网页标题和段落文本同步,或者先显示出来,然后同步弹出提示文本。如果不设置 async 属性,则先弹出提示文本,然后才开始解析并显示网页标题和段落文本。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <script type="text/javascript" async src="test.js"></script>
    6. </head>
    7. <body>
    8. <h1>网页标题</h1>
    9. <p>正文内容</p>
    10. </body>
    11. </html>


    async 是 HTML5 新增的布尔型属性,通过设置 async 属性,就不用考虑 <script> 标签的放置位置,用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。

  • 相关阅读:
    天梯程序设计竞赛 L2-005. 集合相似度 STL
    Oulipo kmp
    剪花布条 kmp
    poj 1321 dfs
    蓝桥杯历届试题 打印十字图
    windows 10家庭版安装SQL Server 2014出现.net 3.5失败问题解决。
    使用分区助手转移windows 10系统出现黑屏boot manager报错问题。
    使用java AWT做一个增加按钮的简单菜单窗体
    R基本画图
    R的基础学习之数据结构
  • 原文地址:https://www.cnblogs.com/phpcqy/p/14280016.html
Copyright © 2020-2023  润新知