从输入https://juejin.cn到页面渲染之间的那些事（附带字节面试题）
内容提要
本文介绍了浏览器中的回流和重绘的概念，以及如何减少回流和重绘来优化浏览器性能。回流是指浏览器重新计算元素位置和几何结构的过程，常见触发回流的操作包括修改元素尺寸、位置、内容等。重绘是指根据元素样式和内容对页面进行重新绘制的过程，常见触发重绘的操作包括修改元素颜色、背景、文字样式等。文章提供了几种减少回流和重绘的方法，包括合理利用浏览器的优化策略、使用虚拟文档片段和克隆元素等。
关键要点
-
回流是浏览器重新计算元素位置和几何结构的过程。
-
常见触发回流的操作包括修改元素尺寸、位置、内容等。
-
重绘是根据元素样式和内容对页面进行重新绘制的过程。
-
常见触发重绘的操作包括修改元素颜色、背景、文字样式等。
-
回流一定会导致重绘，但重绘不一定会导致回流。
-
浏览器的优化策略包括渲染队列、获取布局和样式信息、强制重绘等。
-
减少回流重绘的方法包括合理利用浏览器的优化策略、使用虚拟文档片段和克隆元素。
-
使用display:none可以减少回流次数。
-
文档片段允许在内存中创建和操作DOM节点，减少重排和重绘。
-
通过替换DOM而不是直接修改来减少回流是一种优雅的方案。
延伸问答
什么是回流和重绘？
回流是浏览器重新计算元素位置和几何结构的过程，重绘是根据元素样式和内容对页面进行重新绘制的过程。
哪些操作会触发回流？
常见触发回流的操作包括修改元素的尺寸、位置、内容，添加或删除可见的DOM元素，以及改变浏览器窗口的大小。
如何减少回流和重绘以优化性能？
可以通过合理利用浏览器的优化策略、使用虚拟文档片段、克隆元素等方法来减少回流和重绘。
回流和重绘之间有什么关系？
回流一定会导致重绘，但重绘不一定会导致回流。回流涉及元素的几何属性变化，而重绘则是样式变化。
使用display:none有什么好处？
使用display:none可以减少回流次数，因为在隐藏元素时，浏览器不会计算其布局。
文档片段在减少回流方面有什么优势？
文档片段允许在内存中创建和操作DOM节点，插入时一次性添加到文档中，避免多次重排和重绘，从而提高性能。
