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

相关文章:

JavaBean 到底是什么?

java如何创建单例

为什么自我组织是直观的,但又具有挑战性

javascript - 在提交给PHP上传之前,先在客户端调整图片大小

javascript - Angular 绑定(bind)错误

java如何处理 java.lang.outOfMemoryError PermGen space error

C语言结构体字节对齐

javascript - JavaScript中的简单浮点数学

javascript - 在onclick中使用preventDefault不起作用

javascript - 是否可以在 ng-class 中声明注释