zoukankan      html  css  js  c++  java
  • javascript 阻塞

    async 和 defer 属性
    1. defer 属性
    <script src="file.js" defer></script> 
    defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
    浏览器将会并行下载 file.js 和其它有 defer 属性的script,而不会阻塞页面后续处理。
     
    defer属性在IE 4.0中就实现了,超过13年了!Firefox 从 3.5 开始支持defer属性 。   
    注:所有的defer 脚本保证是按顺序依次执行的。
     
     
    2. async 属性
    <script src="file.js" async></script> 
    async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
    Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有 IE 都支持异步加载。
     
    3. 详细解释
     
    <script> 标签在 HTML 4.01 与 HTML5 的区别:
    • type 属性在HTML 4中是必须的,在HTML5中是可选的。
    • async 属性是HTML5中新增的。
    • 个别属性(xml:space)在HTML5中不支持。
     
    说明:
    1. 没有 async 属性,script 将立即获取(下载)并执行,然后才继续后面的处理,这期间阻塞了浏览器的后续处理。
    2. 如果有 async 属性,那么 script 将被异步下载并执行,同时浏览器继续后续的处理。
    3. HTML4中就有了defer属性,它提示浏览器这个 script 不会产生任何文档元素(没有document.write),因此浏览器会继续后续处理和渲染。
    4. 如果没有 async 属性 但是有 defer 属性,那么script 将在页面parse之后执行。
    5. 如果同时设置了二者,那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理,而不是同步方式。
  • 相关阅读:
    hdu4135(容斥原理求质数,队列实现)
    poj2559(单调栈)
    poj2796(单调栈)
    icpc2018焦作Transport Ship(背包思想)
    icpc2018焦作Mathematical Curse(动态规划)
    2018icpc徐州OnlineA Hard to prepare
    icpc2018徐州OnlineG-Trace(线段树)
    hdu3499(分层图最短路 or 反向建图)
    MINE
    数论(Mathmatics)总结[1]
  • 原文地址:https://www.cnblogs.com/zhangxiangdong/p/9619967.html
Copyright © 2011-2022 走看看