zoukankan      html  css  js  c++  java
  • async和defer

    参考链接:https://github.com/xiaoyu2er/blog/issues/8

    两者都会并行下载,下载过程不会影响页面的解析。

    普通script

    <script src="./test1.js"></script>
    <script src="./test2.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            console.log('DOMContentLoaded触发了')
        })
        console.log('同步执行代码1')
        //打印顺序 test1 test2 同步执行代码1 DOMContentLoaded触发了
    </script>
    • 停止页面解析
    • 请求test1.js,执行test1.js脚本
    • 请求test2.js,执行test2.js脚本
    • 执行script标签中脚本
    • 继续页面解析
    • 触发DOMContentLoaded事件

    async

    并行下载,下载完成后立即执行,与DOMContentLoaded事件前后不确定(脚本很小或脚本缓存,并且页面很大的情况,脚本可能在DOMContentLoaded前发生)

    适合用在完全不依赖其他脚本的脚本上。

    <script src="./test1.js" async></script>
    <script src="./test2.js" async></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            console.log('DOMContentLoaded触发了')
        })
        console.log('同步执行代码1')
    //打印顺序 同步执行代码1 DOMContentLoaded触发了 test1 test2
    </script>
    • 页面解析不会停止,test1.js与test2.js并行下载
    • 脚本下载完成后立即执行(两者执行顺序不确定,执行阶段不确定,也可能是在DOMContentLoaded之前执行)

    defer

    并行下载,下载完成后按照代码顺序在页面解析完成后(所有同步脚本都执行完)但DOMContentLoaded事件发生前执行。

    <script src="./test1.js" defer></script>
    <script src="./test2.js" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            console.log('DOMContentLoaded触发了')
        })
        console.log('同步执行代码1')
    //打印顺序 同步执行代码1 test1 test2 DOMContentLoaded触发了
    </script>
    • 页面解析不会停止,test1.js与test2.js并行下载
    • 执行‘同步执行代码1’
    • 按照test1与test2的位置,在其他同步脚本都执行完后,依次执行test1.js与test2.js
    • 触发DOMContentLoaded事件

    其他

    script标签无src属性,defer与async会被忽略

    动态添加的script标签隐含async属性

  • 相关阅读:
    file_zilla 通过key连接远程服务器
    git 恢复丢失的文件
    花括号中的json数据--->转为数组array
    3种日志类型,微信付款反馈-->写入txt日志
    清空数据库中所有表--连表删除
    冒泡排序, 使用最低票价.---双重循环,一重移动次数.二重移动
    navicat 连接远程mysql
    付款前.检查状态.防止重复付款,需要ajax设置为同步,等待ajax返回结果再使用
    反射
    设计模式六大原则
  • 原文地址:https://www.cnblogs.com/lianglanlan/p/14750948.html
Copyright © 2011-2022 走看看