html 页面加载以及加载事件

1. dom 解析跟 css 解析，互不影响

2. dom 渲染，页面 dom 解析完形成 dom 树，css 解析完形成 cssom 树，然后 dom、cssom 合成 render 树，

    这个过程是  dom 渲染

3. js 会操作 dom 跟 css，故 js 会影响解析和渲染过程，如下三种情况：

• <script> ，dom 树解析遇到script 标签，立即停止解析，下载并运行 js 脚本，待 js 执行完毕，继续 dom 解析
• <script defer>，这种是延迟执行脚本，dom 树解析时遇到此标签，立即下载该 js 脚本，并保持 dom 解析同步进行。

　　　dom 解析完毕后，按照 js 脚本顺序，依次执行 js 脚本。然后触发 document 的 DOMContentLoaded 事件。

• <script async>，异步执行脚本，dom 渲染跟 js 互不干扰，DOMContentLoaded 事件 跟 js 脚本无关。多个 js 脚本执行顺序不定。

4. 页面事件的生命周期：

DOMContentLoaded事件在DOM树构建完毕后被触发，我们可以在这个阶段使用js去访问元素。

图片及其他资源文件可能还在下载中。该事件由 document 触发
load事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久。该事件由 window触发
beforeunload在用户即将离开页面时触发，它返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开。
unload在用户已经离开时触发，我们在这个阶段仅可以做一些没有延迟的操作，由于种种限制，很少被使用。
document.readyState表征页面的加载状态，可以在readystatechange中追踪页面的变化状态：

loading — 页面正在加载中。
interactive -- 页面解析完毕，时间上和 DOMContentLoaded同时发生，不过顺序在它之前。
complete -- 页面上的资源都已加载完毕，时间上和window.onload同时发生，不过顺序在他之前。

html 页面加载以及加载事件

原文：https://www.cnblogs.com/wudeyun/p/14884930.html