浏览器是如何解析页面的？

这是一道经典的面试题，很多朋友应该都听说过。本文将带大家熟悉一下从输入网址到网页显示的整个过程，巩固一下基础知识。

主要流程

当我们在浏览器的地址栏输入一个网址并按下回车键时，会发生一系列复杂的流程，最终将网页呈现在我们的屏幕上。总体来说分为以下几个过程：

1. DNS解析
2. TCP连接
3. 发送HTTP请求
4. Web服务器处理请求
5. 发送HTTP响应
6. 浏览器渲染页面

1. DNS解析

浏览器将向本地DNS服务器发送一个DNS查询请求，该请求将被转发给服务提供商（ISP）的DNS服务器。如果ISP的DNS服务器缓存了相应的DNS记录，它将返回查询结果；否则，它将向其他DNS服务器发出查询请求，直到找到与该域名对应的IP地址为止。

2. TCP连接

一旦浏览器已经知道了目标网站的IP地址，它就会尝试与该网站建立TCP连接。TCP是一种协议，用于在互联网上创建可靠的、有序的、双向的数据传输通道。浏览器将向目标网站的Web服务器发送一个SYN包，表示请求建立连接。如果服务器能够接受连接，则返回一个ACK包，表示连接已经建立。

3. 发送HTTP请求

一旦TCP连接建立，浏览器便可以向Web服务器发送HTTP请求。HTTP是一种协议，用于在互联网上传输超文本数据。浏览器将构建一个HTTP请求报文，并发送给Web服务器。该请求报文包含了请求的方法、URL、协议版本、请求头等信息。

4. Web服务器处理请求

一旦Web服务器收到HTTP请求，它将根据请求的内容和配置文件中的规则，进行相应的处理。通常情况下，Web服务器会根据URL路径来确定需要哪些文件或数据，并返回相应的响应。

5. 发送HTTP响应

一旦Web服务器完成请求的处理，它将通过TCP连接向浏览器发送HTTP响应。这个响应消息包括了响应状态码、响应头和响应体等信息。如果请求成功，那么响应状态码将会是200。响应头包含了很多关于响应的信息，比如响应类型、长度、编码方式等。而响应体则是实际的数据内容，例如HTML文档、图片、CSS 或 JS 文件等。

6. 浏览器渲染页面

一旦浏览器收到响应内容，它将开始渲染页面。渲染过程包括解析HTML文档、构建DOM树、计算样式等步骤，最终将生成一张图像，呈现在用户的屏幕上。浏览器还会执行JavaScript代码，更新页面的内容和样式。

浏览器渲染页面这个过程是非常重要的，也是前端优化过程中比较重要的一个地方：

1. 渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。
2. 渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。
3. 创建布局树，并计算元素的布局信息。
4. 对布局树进行分层，并生成分层树。
5. 为每个图层生成绘制列表，并将其提交到合成线程。
6. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
7. 合成线程发送绘制图块命令DrawQuad给浏览器进程。
8. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

将关键渲染路径划分理解，那网页的渲染过程可分为以下部分。

• 解析文件
  • DOM树：将html文件转换为DOM树
  • CSSOM树：将css文件转换为CSSOM树
  • 渲染树：将DOM树与CSSOM树合并生成渲染树
• 绘制图层
  • 回流：根据渲染树生成布局渲染树
  • 重绘：根据布局渲染树生成绘制渲染树
• 合成图层
  • 根据绘制渲染树合成图层显示在屏幕中

总结

熟悉网页的请求和渲染流程，能够帮助我们在工作中解决问题，合理的处理浏览器渲染流程，可以让我们更好的优化网站，加快网站访问时间，减少白屏，提高用户体验。