Chrome浏览器原理及优化

1. 相关面试题 

1.1. 请说说从输入 URL 到页面渲染完成的全过程

1. 输入URL，用户在浏览器的地址栏输入一个URL，并按下回车键；

2. DNS解析；

浏览器需要将域名转换为服务器的IP地址，以建立连接。 

(1). 如果浏览器缓存、操作系统缓存或路由器缓存中已有该域名的IP地址，则直接获取；

(2). 否则，会向本地域名服务器发起DNS查询请求，通过递归查询的方式获得IP地址；

3. TCP链接；

浏览器与目标服务器之间使用三次握手建立TCP连接：

(1). SYN：浏览器发送SYN同步序号请求包，要求服务器建立连接；

(2). SYN-ACK：服务器收到SYN包后，回应SYN-ACK包；

(3). ACK：浏览器收到SYN-ACK包后，回复ACK确认包，完成连接；

4. TLS握手；

如果使用HTTPS，浏览器与服务器之间进行TLS握手，确保传输的安全性：

(1). 客户端问候：浏览器发送支持的加密套件列表和随机数；

(2). 服务器问候：服务器选择加密套件、返回公钥证书和随机数；

(3). 密钥生成：双方通过公钥证书和随机数生成会话密钥；

(4). 握手完成：双方使用生成的会话密钥加密通信；

5. 发送HTTP请求；

建立连接后，浏览器发送HTTP请求：

(1). 请求行：包括方法、路径、HTTP版本，如GET / HTTP/1.1；

(2). 请求头：携带相关头信息，如User-Agent、Accept-Language；

(3). 请求体：通常在POST请求中携带数据；

6. 服务器处理请求；

服务器接收到请求后：

(1). 根据URL和请求方法，确定处理逻辑；

(2). 可能需要查询数据库或调用其他API；

(3). 生成响应，包括响应行、响应头和响应体；

7. 返回HTTP响应；

服务器发送响应：

(1). 响应行：包括HTTP版本、状态码、状态描述，如HTTP/1.1 200 OK；

(2). 响应头：携带相关头信息，如Content-Type、Cache-Control；

(3). 响应体：通常是HTML、JSON、图片等内容；

8. 浏览器渲染页面；

浏览器开始渲染页面，主要经过以下阶段：

(1). 构建DOM树；

解析HTML文档，构建DOM树，遇到外部资源CSS、JavaScript或是图片时，根据属性决定是否同步或异步加载。

(2). 构建CSSOM树；

解析CSS文件和<style>标签，构建CSSOM树。

(3). 合成渲染树；

将DOM树和CSSOM树合并，生成渲染树，只包含可见元素。

(4). 布局计算；

确定每个元素的大小和位置，根据CSS盒模型进行布局。

(5). 绘制；

绘制每个元素的内容，包括文本、图像、背景等。

(6). 分层与合成；

渲染层分为多个图层，独立绘制并最终组合成完整页面。

9. 执行JavaScript

在页面渲染过程中或渲染完成后，浏览器执行JavaScript脚本：

(1). 阻塞脚本：在构建DOM时遇到<script>标签会暂停解析，直到脚本加载并执行完成；

(2). 异步脚本：async和defer属性可用于异步加载和执行脚本，不阻塞DOM解析；

10. 事件处理与交互

(1). 页面加载完成后，浏览器继续处理用户的交互操作；

(2). 根据事件绑定的处理函数，执行相应的JavaScript代码；

1.2. DOM和CSSOM的关系和影响

1. 描述DOM和CSSOM是如何分别构建的？

DOM是通过解析HTML文档来构建的，每个HTML标签都会变成DOM树中的一个节点。

CSSOM是通过解析CSS文件和<style>标签中的样式信息构建的，它反映了所有CSS规则和对应样式属性的层次结构。

2. 它们是如何相互影响，最终形成渲染树的？

当DOM和CSSOM均构建完成后，浏览器将它们合并成一个渲染树，该树只包括页面中实际需要渲染的元素及其样式信息。

3. 修改DOM或CSSOM中的元素对页面渲染有何影响？

修改DOM或CSSOM都可能引发重排和重绘，严重时会导致整个页面的重新渲染，影响性能，可以借助 transform3D调用GPU优化，减少重排。

1.3. 浏览器的重排与重绘怎么理解

1. 解释什么是重排和重绘？

重排是指浏览器为了重新计算页面布局而进行的过程，通常发生在添加或删除可见的DOM元素，或者元素尺寸改变的情况下。

重绘发生在元素的外观改变，但位置和尺寸未变的情况下，例如改变颜色、阴影等。

2. 提供哪些常见操作会触发重排和重绘？

常见触发重排的操作包括修改DOM结构、改变元素位置和尺寸，而改变颜色或背景图将触发重绘。

3. 如何优化代码以减少重排和重绘的影响？

优化方法包括使用CSS类进行样式变更而非直接操作样式属性，避免在循环中直接操作DOM，利用文档碎片或虚拟DOM来批量更新DOM，使用transform和opacity进行动画处理，因为这些属性可以由合成器处理。

1.4. 请说说浏览器的合成层

1. 什么是浏览器的合成层？

合成层是浏览器处理完重排和重绘后，将页面分割成多个层次，然后由合成器合成最终视觉输出的过程。每个层可以单独被GPU处理，以优化性能。

2. 为何某些CSS属性可以触发GPU加速？

CSS属性如transform和opacity可以触发GPU加速，因为它们不影响DOM的布局，而只是影响元素的外观和位置变换。GPU处理这类变换比CPU更高效，因为GPU专门设计来处理图形和视觉效果。

3. 如何通过开发者工具来识别和优化合成层的性能？

使用Chrome等浏览器的开发者工具的“Layers”面板可以查看页面的层信息。通过这些工具，开发者可以观察哪些元素被创建成单独的层，评估合成层的性能，并进行相应的优化，比如减少不必要的层，合并可以合并的层，或调整动画使用合适的属性来优化GPU处理。

2. 浏览器渲染过程详解

2.1. DNS 查询

对于一个 web 页面来说导航的第一步是要去寻找页面资源的位置。如果导航到 Example Domain，HTML页面被定位到 IP 地址为93.184.216.34的服务器。如果以前没有访问过这个网站，就需要进行 DNS 查询。

浏览器向域名服务器发起 DNS 查询请求，最终得到一个 IP 地址。第一次请求之后，这个 IP 地址可能会被缓存一段时间，这样可以通过从缓存里面检索 IP 地址而不是再通过域名服务器进行查询来加速后续的请求。

每个主机名 在页面加载时通常只需要进行一次 DNS 查询。但是，对于页面指向的不同的主机名，则需要多次 DNS 查询。如果字体、图像、脚本、广