document的状态onload/ready?

原文 标签 IT工具网 javascript

原问题: window.onload vs $(document).ready()

这两个在本质上都是DOM document渲染过程中JavaScript的执行时机问题,$(document).ready()是jQuery提供的一个简单JavaScript编程接口。

客户端JavaScript时间线

《JS Definitive Guide》的13.3.4小节(链接1,链接2)已经对这部分内容做了详细的说明了。这里的内容参考自此书内容。

在浏览器解析并渲染DOM的过程中,document对象的readyState属性也随之变化.变化过程:

  • 浏览器创建document对象,开始解析HTML元素
    • document.readyState = loading
  • DOM解析完成,用户看到东西 document.readyState = interactive
  • 所有defer/async JavaScript脚本执行完毕,图片加载完毕
    • document.readyState = complete
  • 浏览器开始调用异步事件,以异步响应用户的输入事件、网络事件、计时器过期。

window.onload

window.onload是浏览器提供的事件,它要在网页内所有的元素全部加载完毕后才触发,包括图片和flash等。

对应到上面的客户端JavaScript时间线可知,在document.readyState = complete之后会触发该事件。

现在的JavaScript框架大多提供了DOMReady事件代替window.onload事件,但DOMReady并不是window原生事件,而是JavaScript对readyState和window事件进行包装之后提供的简便接口。

比如在jQuery中就是:

jQuery(document).ready(callback);

jQuery.fn.ready的实现本质上也是读取document.readyState的状态,当它的值为complete的时候就立即执行回调,否则就将回调注册为DOM事件的处理函数。详细请参考源码: https://github.com/jquery/jquery/blob/10399ddcf8a239acc27bdec9231b996b178224d3/src/core/ready.js#L80

相关文章:

Chrome浏览器禁止http自动转成https

tcpdump命令

javascript - Knockout JS 级联状态/城市下拉列表(使用 JSON)

javascript - 使javascript变量在整个脚本中可见

为什么处理排序的数组要比非排序的快

java去掉烦人的"!=null"(判空语句)

垃圾邮件中的javascript;它想做什么?

javascript - 不推荐使用无效的类型/语言属性获取脚本并将被删除

javascript - AngularJS:过滤 json 对象而不是数组

基于发号器构建的短网址系统