HTML页面加载过程

window.onload 和 DOMContentLoaded 的区别

• DOMContentLoaded：DOM结构加载完毕
• window.onload：DOM结构和静态资源加载完毕

从输入 url 到得到 html 的过程

1. 输入资源地址（地址栏输入、页面跳转、页面加载）发起请求
2. 浏览器缓存机制，优先查找本地有无缓存可用
   
   • 搜索自身的 DNS 缓存
   • 搜索操作系统自身的DNS 缓存
   • 读取本地的 HOST 文件
   • 发起一个 DNS 的系统调用
3. 浏览器向 DNS 服务器发起 域名 解析 请求
   
   • 宽带运营服务商服务器查看本身缓存
   • 运营商服务器发起一个迭代DNS解析的请求
   • 运营商服务器把结果返回操作系统内核同时缓存起来
   • 操作系统内核把结果返回浏览器
   • 浏览器拿到 域名 对应的 IP 地址
4. 建立与服务器的 TCP/IP 连接，三次握手 过程
5. 向服务器发送 http / https 请求，创建端口
6. 服务器在端口监听客户端请求
   
   • 接收请求，根据路径参数，经过后端处理后
   • 返回状态和内容
7. 浏览器得到返回内容
   
   • 拿到HTML页面代码，开始解析页面
   • 碰到的 js、css、图片等静态资源，发起请求
   • 从发起请求到返回结果，同样经过上面的步骤
   • 根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给用户

浏览器渲染页面的过程

• 根据 HTML 结构生成 DOM Tree
• 根据 CSS 生成 CSSOM
• 将 DOM 和 CSSOM 整合形成 RenderTree
• 根据 RenderTree 开始渲染和展示
• 遇到 <script> 时，会执行并阻塞渲染，因为 Javascript 代码有权利改变DOM树

window.onload 和 DOMContentLoaded 的区别

• DOMContentLoaded：DOM结构加载完毕
• window.onload：DOM结构和静态资源加载完毕

从输入 url 到得到 html 的过程

1. 输入资源地址（地址栏输入、页面跳转、页面加载）发起请求
2. 浏览器缓存机制，优先查找本地有无缓存可用
   
   • 搜索自身的 DNS 缓存
   • 搜索操作系统自身的DNS 缓存
   • 读取本地的 HOST 文件
   • 发起一个 DNS 的系统调用
3. 浏览器向 DNS 服务器发起 域名 解析 请求
   
   • 宽带运营服务商服务器查看本身缓存
   • 运营商服务器发起一个迭代DNS解析的请求
   • 运营商服务器把结果返回操作系统内核同时缓存起来
   • 操作系统内核把结果返回浏览器
   • 浏览器拿到 域名 对应的 IP 地址
4. 建立与服务器的 TCP/IP 连接，三次握手 过程
5. 向服务器发送 http / https 请求，创建端口
6. 服务器在端口监听客户端请求
   
   • 接收请求，根据路径参数，经过后端处理后
   • 返回状态和内容
7. 浏览器得到返回内容
   
   • 拿到HTML页面代码，开始解析页面
   • 碰到的 js、css、图片等静态资源，发起请求
   • 从发起请求到返回结果，同样经过上面的步骤
   • 根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给用户

浏览器渲染页面的过程

• 根据 HTML 结构生成 DOM Tree
• 根据 CSS 生成 CSSOM
• 将 DOM 和 CSSOM 整合形成 RenderTree
• 根据 RenderTree 开始渲染和展示
• 遇到 <script> 时，会执行并阻塞渲染，因为 Javascript 代码有权利改变DOM树