每日一篇——23秋招浏览器相关面经（1）

⭐输入URL后发生了什么

我的掘金博客中有详细写到：

在浏览器中输入URL后发生了什么 | 青训营笔记 - 掘金 (juejin.cn)

⭐描述一下浏览器渲染页面的过程

浏览器的渲染过程包括以下几个步骤：

1. 获取HTML代码：浏览器从本地文件或网络上获取HTML代码。
2. 解析HTML代码：浏览器将HTML代码解析成DOM tree，构建页面的结构树。在解析过程中，如果遇到外部资源例如CSS和JavaScript文件，则会发送请求并等待响应。
3. 构建CSSOM：浏览器解析CSS代码，并生成CSSOM（CSS Object Model），表示页面的样式信息。
4. 构建Render Tree：浏览器将DOM tree和CSSOM组合成Render Tree，Render Tree 包含了需要显示在页面上的节点和样式信息。
5. 布局（Layout）：浏览器根据Render Tree计算每个元素在屏幕上的位置和大小，即确定元素的几何尺寸。
6. 绘制（Paint）：浏览器将布局后的元素绘制在屏幕上，创建页面的可视化内容。
7. 回流（Reflow）和重绘（Repaint）：如果有DOM元素的几何属性（如宽度、高度）发生改变，浏览器需要重新计算布局（回流），并重新绘制受影响的部分（重绘）。回流和重绘是比较消耗性能的操作，应尽量避免频繁发生。

⭐如何避免重绘或者重排？

1. 集中改变样式，不要一条一条地修改 DOM 的样式。

2. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

3. 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

4. 尽量只修改position：absolute或fixed元素，对其他元素影响不大

5. 动画开始GPU加速，translate使用3D变化

6. 提升为合成层

   将元素提升为合成层有以下优点：

   • 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
   • 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
   • 对于 transform 和 opacity 效果，不会触发 layout 和 paint

   提升合成层的最好方式是使用 CSS 的 will-change 属性：

   #target {
     will-change: transform;
   }
   

创建合成层可以优化一些具体场景，但需要慎重使用，过多的合成层可能会导致内存占用增加和渲染性能下降。因此，在使用合成层时，需要权衡性能和资源消耗，并进行合理的优化。

以下是一些常见的场景，可以考虑使用合成层优化性能：

1. 动画和过渡效果：当元素需要进行频繁的动画或过渡效果时，使用合成层可以提高性能。通过将需要动画的元素创建为独立图层，只需重绘该图层而无需重新渲染整个页面。
2. 3D转换：使用CSS 3D转换属性（如transform: translate3d(), rotate3d()等）来创建3D效果时，浏览器会自动创建合成层，利用GPU加速渲染。
3. 视频和音频：在页面中播放视频或音频时，将其嵌入到一个独立图层中，可以提高视频或音频的性能，使其能够流畅地播放。
4. 滚动性能优化：对于拥有大量内容的滚动区域（如长列表或大型表格），将其拆分为多个图层，可以提高滚动的流畅性和响应速度。
5. 响应式设计：使用合成层可以在不同设备上优化性能，通过将一些元素创建为独立图层，可以减少页面的重绘和重排，提高响应速度。