Clement

如果丢掉盔甲,我依然是骄傲帅气的骑士。

  • 菜单
  • 标签
  • 友情链接
  • 关于我
  • 擅长前端各项技能,喜欢折腾新技术,对JavaScript/Html/CSS相关客户端、服务端(Java/Node.js)以及数据库(MYSQL/SQLServer)知识很感兴趣。

    js的defer属性对dom加载的影响

    1
    <script> defer 属性根据w3cschool对defer属性的描述是“规定当页面已完成加载后执行脚本”。也就是说相当于将<html>…</html>内所有节点加载完毕才执行带有defer属生的<script>标签


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //示例代码:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    </head>
    <body>
    <script type="text/javascript" src="http://www.w3school.com.cn/example/html5/demo_defer.js" defer="defer"></script>
    <p>上面的脚本从下面的段落请求信息。通常,这是不可能的,因为脚本在段落加载之前已经执行了。</p>
    <p id="p1">Hello World!</p>
    <p>不过,defer 属性规定脚本稍后执行。这样脚本就可以从段落中请求信息了。</p>
    </body>
    </html>
    如果将defer = ”defer” 属性移除, 更改为async = "async",
    那么脚本相对于页面的其余部分异步地执行( 当页面继续进行解析时, 脚本将被执行)意思就是说 <script><html> 内部的节点是异步执行, 比如<script>标签内的代码如下:
    alert(document.getElementById("p1").firstChild.nodeValue);
    当html的“P1”DOM节点还没有加载到页面显示时,document.getElementById()方法会一直等待捕获这个DOM节点,直到浏览器页面显示时才会执行这个方法, 在执行顺序上async与defer有很大的不同。

    文章目录
  • 拉格朗日中值定理学习笔记
  • 罗尔定理学习笔记
  • 零点定理学习笔记
  • JavaScript创建对象之理解原型对象(笔记4)
  • JavaScript创建对象之理解原型对象(笔记3)
  • JavaScript创建对象之构造函数模式(笔记2)
  • JavaScript创建对象之工厂模式(笔记1)
  • ECMAScript属性类型
  • 各大互联网公司前端笔试面试题–JavaScript篇(持续更新)
  • Web异步交互技术之iframe
  • html页头设置不缓存
  • GitHub配置与使用总结(持续更新)
  • 七牛的qrsbox命令行工具使用 for osx
  • VirtualBox在OSX下无法识别U盘,提示Failed to create a proxy device for the USB device. (Error: VERR_PDM_NO_USB_PORTS).
  • sublime基本介绍和使用技巧(持续更新)
  • 第一次和大家见面
  • 数据迁移中,敬请期待!
  • css+div解决文字溢出控制显示字数
  • js的defer属性对dom加载的影响
  • Web前端开发学习教程