沿着时间顺序有几个有趣的点。这个通用序列是一个很好的概述,尽管不同的浏览器和版本实现细节略有不同。 (这假设您使用原始 Javascript 并且需要最大限度地减少跨浏览器问题;JQuery 具有对跨浏览器问题的全面内部处理,但略有不同):
T0] 页面开始——浏览器已开始在页面上工作,但环境仍在变化。你的 JS 操作可能会发生在错误的上下文中,并且当正确的上下文稳定时就会被刷新。您可能根本不想尝试执行任何 JS。
T1]“onLoad”事件--[但是您获得事件:addEventListener("Load"..., window.onload=..., 等等] 页面的所有部分都已被识别并且下载的来自服务器并位于本地系统的内存中。为了识别所有部分,已经进行了一些解析。 (请注意,“加载”与“下载”同源,而不是“解析”或“渲染”。)
现在你已经有了合适的环境,可以开始执行 JS 代码而不必担心丢失任何东西。HOWEVER,尝试读取或操作 HTML [getElementById(...,appendChild(...,etc)] 的操作可能会以奇怪的方式失败,或者可能看起来有效但随后消失,或者可能会执行与您预期不同的操作。
T2] DOM-almost-ready-- 这个 hack 非常简单并且完全跨浏览器。只需将 JS 放在 HTML 的最后,就在
T3] DOM-ready-- [但是你获取事件:addEventListener("DOMContentLoaded"..., window.ondomcontentloaded=..., 等等] 此时 HTML 已完全解析,JS 100% 可用,包括所有读取或操作 HTML 的函数 [getElementById(...、appendChild(..., 等等])。
T4]渲染完成--浏览器完成在屏幕上显示内容。有NOT任何此类事件或任何合理的跨浏览器版本无关的方法来检测这种情况。这样也好,因为你可能并不真正想要这样。如果浏览器已经在屏幕上显示该页面并且then当你操作 DOM 时,你会得到一个“闪光”,之前和之后在屏幕上至少短暂地可见。您可能真正想要的是可以执行任意 JS 代码的点;那就是previous(T3] DOM 就绪) 时间点。