zoukankan      html  css  js  c++  java
  • defer和async(原生js学习)转

    (1)

    页面下载过程要干的事情

    页面parse完毕----DOMContentLoaded(DOM树建立完毕)----onload(全部资源下完,图片,iframe,flash这些)

    注意js脚本要下载并执行完毕,dom树才能出来,因为script标签也属dom的一部分,同时因为js也许有dom的操作,所以必须要等js脚本执行完毕,才能完成dom的构建。

    parse的过程则可理解为对文档全部扫一遍,知道要干什么,接下来才是整个DOM的构建过程。parse the markup and set the dom

    (2)

    如果既没defer也没async,而且js仍放于头部,则页面要等待js的下载和js的执行,会出现空白页的情况。

    (3)

    defer不被所有浏览器支持。defer之后,脚本的执行在页面解析完毕以后,在DOMContentLoaded事件之前。

    (4)

    async的特点是,一下载完成就执行,多个js如果都设置async则能形成并行下载,不一定按照文档的排放顺序,所以多个js之间有依赖关系,则容易出现问题,同时只能应用于外部脚本。

    Asynchronous scripts are guaranteed to execute before the page’s load event and may execute before or after DOMContentLoaded (see Chapter 13 for details). Firefox 3.6, Safari 5, and Chrome 7 support asynchronous scripts.

    async最少要比load快,,,,有可能快或者慢于DOMContentLoaded(不知道为什么,感觉它要比defer还快的,而且defer都是快于DOMContentLoaded,这个疑问以后来搞。。)

    如果async为false,defer为true,那么脚本会在页面解析完毕后才执行(有defer的时候,js脚本的下载并不会影响文档的解析,脚本在页面解析完后执行,这个时候脚本再执行完毕后,才构建好DOM,所以一定是先于DOMContentLoad事件的)

    如果async和defer都为false,那么脚本会在页面解析中,停止页面解析,立刻下载并且执行,形成block阻塞。

    设 置defer和async后,两者的加载(下载)都不阻塞页面渲染(parse),但是async是下载后就立即执行,所以会在parse完毕前执行,这 个执行过程会阻塞页面渲染(怕有dom操作),而defer是一定不会阻塞的,因为它执行的时候,页面已经parse完毕(后面脚本执行,修改dom不算 进来)。

    IE不支持DOMContentLoaded事件,检测doScroll来模拟(判断页面是否可以滚动)

  • 相关阅读:
    G1垃圾收集器入门-原创译文
    Dubbo微容器(Cooma)详解
    Dubbo工程结构和Maven打包
    Greys学习笔记(未完待续)
    ES学习笔记
    CSS标准盒子模型和IE怪异盒子模型
    npm install 报错
    安卓手机scrollTop失效问题记录
    npm run dev报错
    severless扫盲
  • 原文地址:https://www.cnblogs.com/leeten/p/3806150.html
Copyright © 2011-2022 走看看