浏览器渲染流程---影响渲染过程的方式

前言

了解浏览器渲染相关知识可以在开发中帮助我们什么呢？

那么从想渲染层面去优化，那么就需要知道浏览器渲染相关知识

回顾

回顾一下，浏览器渲染过程都做了哪些事？

解析HTML ----渲染主线程

• 1. 生成渲染任务。网络线程获取到HTML文档，生成渲染任务交给任务队列，渲染主线程从任务队列中读取选渲染任务
• 1. 构建DOM树。把HTML转换成浏览器能够理解的树形数据结构
• 1. 构建CSSOM树。把CSS转换成浏览器能够理解的树形结构
• 1. DOM树和CSSOM树结合。
• 1. 样式计算。得到一棵带有样式的DOM树。
• 1. 布局。dom树和样式dom树结合去除一些不加入布局的元素，生成布局树

绘制（生成绘制指令列表）----渲染主线程

• 1. 分层。浏览器把页面分成多个图层，生成图层树。
• 1. 绘制图层。浏览器为每一个图层生成绘制指令列表，并把绘制指令列表交给合成线程进行真正的绘制

合成和显示 ---合成线程

• 1. 栅格化。将每图层分块，再利用GPU将块变成位图。根据指令对文本、形状、图像等元素进行具体的像素计算
• 1. 合成和显示。合成线程会根据绘制指令，对不同的图层进行合成。最终的合成图像将被传递到显示设备，以在用户屏幕上呈现。

在知道了浏览器渲染流程之后，我们日常开发中的哪些操作，可能会影响浏览器的渲染？

影响渲染过程的方式

一：重排

重排（Reflow）：是浏览器对文档的可视化部分进行重新计算并渲染，这通常是由于元素的几何属性发生变化，也就是说，它的布局、几何形状或者某些属性发生了改变。

简单来说，重排会根据cssom重新计算布局树，然后进行布局，之后完整执行渲染流水线

暂时无法在飞书文档外展示此内容

会导致重排的操作

1. 改变窗口大小：用户改变浏览器窗口的大小，或者改变字体大小都会触发重排。

2. 插入或删除可见的 DOM 元素：这会改变文档的结构，也会触发重排。

3. 元素位置和尺寸的变化：当元素的位置、大小（包括外边距、内边距、边框厚度和高/宽）发生改变时，都会触发重排。

4. 内容变化：比如用户在输入框中输入文字，可能会改变元素的高度，从而触发重排。

5. 修改 DOM 布局信息：例如 offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()。

二：重绘

重绘（Repaint）是浏览器重新绘制页面的过程，它发生在重排之后。重绘是指在元素的几何属性没有改变的情况下，只需要重新绘制元素的外观，而不需要重新计算元素的布局。

会导致重绘的操作

1. 改变元素的颜色：修改元素的背景色、文字颜色、边框颜色等属性。

2. 改变元素的背景图像：修改元素的背景图像或背景图像的位置。

3. 改变元素的可见性：通过修改元素的 display 属性或 visibility 属性来显示或隐藏元素。

4. 添加或移除阴影效果：通过 box-shadow 属性为元素添加或移除阴影效果。

5. 改变文字样式：修改文字的字体、字号、字重、字间距等属性。

6. 改变元素的透明度：通过修改元素的 opacity 属性来改变元素的透明度。

三：css3部分属性会跳过部分阶段

当使用 transform 属性对元素进行变换时，例如平移、缩放、旋转或倾斜等操作，不会触发重排（Layout）过程。这意味着元素的几何属性（位置、尺寸等）不会发生改变，因此布局过程可以被跳过，从而提高性能。

然而，使用 transform 属性会触发重绘（Repaint）过程。因为元素的外观发生了改变，浏览器需要重新绘制元素的视觉呈现，即重新生成像素信息。

Vue是怎么优化来提高性能的？

JS引擎和渲染引擎虽然是两个独立的线程，但是JS引擎却可以触发渲染引擎工作，当我们通过脚本去修改元素位置或外观时，JS引擎会利用DOM相关的API方法去操作DOM对象,此时渲染引擎变开始工作，渲染引擎会触发回流或者重绘。

因此为了降低开销，我们需要做的是尽可能减少DOM操作。

1. 虚拟 DOM（Virtual DOM） ：Vue.js 使用虚拟 DOM 来进行渲染，它是一个轻量级的 JavaScript 对象树，用于描述实际 DOM 的结构。通过对比新旧虚拟 DOM，Vue.js 可以准确地找出需要更新的部分，并将更新应用到实际 DOM 上，以避免不必要的重渲染。
2. 异步更新队列：Vue.js 在更新过程中使用异步更新队列来进行批量更新，将多个数据变更合并为一个更新操作。这样可以最大程度地减少重渲染的次数，提高性能。
3. 计算属性和监听属性：Vue.js 提供了计算属性和监听属性，可以根据需要缓存或监听数据的变化，以避免不必要的重渲染。
4. 组件级别的 懒加载：Vue.js 支持组件级别的懒加载，即只有在需要时才会加载组件的代码。这可以减少初始加载的资源量，提高页面的加载速度。
5. 标记静态内容：Vue.js 允许将静态内容标记为静态，避免不必要的重新渲染。这可以通过使用 v-once 指令或将静态内容提取到单独的组件中来实现。
6. 合理使用 v-for 和 key：在使用 v-for 指令渲染列表时，为每个项提供唯一的 key，以便 Vue.js 可以更好地跟踪每个项的变化。这样可以避免不必要的重渲染和重新排序。
7. 使用 keep-alive 缓存组件：Vue.js 的 keep-alive 组件可以缓存已经渲染过的组件实例，以便在需要时快速重用，而不必重新创建和渲染。这对于频繁切换的组件非常有用。
8. 使用异步组件：Vue.js 支持异步组件，可以在需要时延迟加载组件。这可以减少初始加载的资源量，提高页面的加载速度。