zoukankan      html  css  js  c++  java
  • 怎样理解script标签的defer属性和async属性

    如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async属性. 

    方法1. 使用 defer属性

    defer属性的作用是延迟脚本的执行, 只有等到DOM生成之后才会执行脚本. 类似在DOMContentLoaded事件下添加监听函数.

    // test1.js
    // console.log(document.body.nodeName);
    
    // test1.html
    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <script defer src="./test1.js"></script>
    </head>
    
    <body>
    </body>
    
    </html>

    defer 属性的运行流程主要有下面几步: 

    1. 浏览器下载的同时解析html

    2. 发现带有defer的script标签时, 会在下载html的同时下载这个script标签的外部js文件

    3. 下载并解析html完成后会触发 DOMContentLoaded事件, 但在这个事件触发之前, 带defer的js文件就会开始执行.

    注意:

    1. 多个带defer的script标签的最终执行顺序是跟它们在html中出现的先后顺序严格对应的

    2. 对于不是加载外部js文件和动态生成的script文件, defer属性不生效

    3. 使用defer加载的外部脚本不应该使用document.write()方法.

    方法2. 使用async属性

    async属性和defer属性都能解析加载script外部js文件引起的阻塞问题, 不过defer属性是在DOM载入完成以后才会执行, 而async是另开一个进程去下载脚本, 下载完成以后立刻执行, 执行的时候是会暂停解析的. 

    也就是说: async解决阻塞的方法是: 另开一个进程下载脚本, 这样就不会阻塞主进程html网页的解析.

    // test1.js
    // console.log("defer是DOM载入完成后执行.")
    
    // test2.js
    // console.log("async是新开一个进程, 下载完成后就暂停主进程的解析, 执行下载的脚本.")
    
    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <script defer src="./test1.js"></script>
        <script async src="./test2.js"></script>
    </head>
    
    <body>
    </body>
    
    </html>

    注意: 

    1. 使用async不能保证脚本的执行顺序, 而是谁先下载完, 就先执行谁, 因此async适用于脚本直接没有依赖关系的情况. 反之在用defer;

    2. 如果一个scritp标签同时有defer和async属性, 则defer失效, script的行为由async决定;

    3. 在脚本中还是不能使用document.write()方法.

    总结起来, defer和async区别在于, 前者是在html解析完毕后按顺序执行, 而async是单独下载, 完成后立即执行. 

  • 相关阅读:
    convert image to base64 and post to RESTful wcf
    在android webview实现截屏的手动tounchmove裁剪图片
    How to use jquery ajax and android request security RESTful WCF
    using swfUpload in asp.net mvc
    using HttpClient and sending json data to RESTful server in adroind
    ODP.NET数据访问
    android image watermark
    解决国内不能访问github的问题
    idapro权威指南第二版阅读笔记第九章 交叉引用和绘图功能
    idapro权威指南第二版阅读笔记第二章 逆向和反汇编工具
  • 原文地址:https://www.cnblogs.com/aisowe/p/11698983.html
Copyright © 2011-2022 走看看