HTML文档的加载与页面的首次渲染

1 浏览器首先下载该地址所对应的html页面

2 浏览器解析 html 页面的 DOM 结构（*****这里只是形成DOM结构，到解析body会把DOM节点添加到这个结构上*****）

3 开启下载线程对文档中的所有资源按优先级排序下载

4 主线程继续解析文档，到达 head 节点 ，head 里的外部资源是外链样式表和外链 js。

（ 发现有外链 css 或者外链 js，如果是外链 js ，则停止解析后续内容，等待该资源下载，下载完后立刻执行。如果是外链 css，继续解析后续内容）

5、解析到 body

body 里的情况比较多，body 里可能只有 DOM 元素，可能既有 DOM、也有 css、js 等资源，js 资源又有可能异步加载图片、css、js 等。DOM 结构不同，浏览器的解析机制也不同，所以需要分开来讨论。

• 只有 DOM 元素
  • 这种情况比较简单了，DOM 树构建完，页面首次渲染。
• 有 DOM 元素、外链 js
  • 当解析到外链 js 的时候，该 js 尚未下载到本地，则 js 之前的 DOM 会被渲染到页面上，同时 js 会阻止后面 DOM 的构建，即后面的 DOM 节点并不会添加到文档的 DOM 树中。所以，js 执行完之前，我们在页面上看不到该 js 后面的 DOM 元素。
• 有 DOM 元素、外链 css
  • 外链 css 不会影响 css 后面的 DOM 构建，但是会阻碍渲染。简单点说，外链 css 加载完之前，页面还是白屏。
• 有 DOM 元素、外链 js、外链 css
  • 外链 js 和外链 css 的顺序会影响页面渲染，这点尤为重要。当 body 中 js 之前的外链 css 未加载完之前，页面是不会被渲染的。
  • 当body中 js 之前的 外链 css 加载完之后，js 之前的 DOM 树和 css 合并渲染树，页面渲染出该 js 之前的 DOM 结构。

 6、文档解析完毕，页面重新渲染。当页面引用的所有 js 同步代码执行完毕，触发 DOMContentLoaded 事件。

 7、html 文档中的图片资源，js 代码中有异步加载的 css、js 、图片资源都加载完毕之后，load 事件触发。

总结

页面首次渲染经过的过程？（首次渲染过程应该也是html加载过程）

1下载html，2解析DOM结构， 3开启下载线程对所有资源按优先级排序下载，4解析head节点（如果是外链 js ，则停止解析后续内容，等待该资源下载，再继续解析），5解析body完成后就可以首次渲染

记：js在head中会阻断资源的下载（也就是必须下载完js才能下载后面的），js在body中会直接阻止DOM的构建（遇到JS要下载完后面的DOM节点才会添加到DOM树）

DomContentLoaded 事件时候触发？

DOMContentLoaded 事件在 html文档加载完毕，并且 html 所引用的内联 js、以及外链 js 的同步代码都执行完毕后触发。

load 事件什么时候触发？

当页面 DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load 事件。

HTML文档的加载与页面的首次渲染

原文：https://www.cnblogs.com/dfzj/p/13661012.html