从输入https://juejin.cn到页面渲染之间的那些事（附带字节面试题）
💡
原文中文，约4300字，阅读约需11分钟。
📝
内容提要
本文介绍了浏览器中的回流和重绘的概念，以及如何减少回流和重绘来优化浏览器性能。回流是指浏览器重新计算元素位置和几何结构的过程，常见触发回流的操作包括修改元素尺寸、位置、内容等。重绘是指根据元素样式和内容对页面进行重新绘制的过程，常见触发重绘的操作包括修改元素颜色、背景、文字样式等。文章提供了几种减少回流和重绘的方法，包括合理利用浏览器的优化策略、使用虚拟文档片段和克隆元素等。
🎯
关键要点
- 回流是浏览器重新计算元素位置和几何结构的过程。
- 常见触发回流的操作包括修改元素尺寸、位置、内容等。
- 重绘是根据元素样式和内容对页面进行重新绘制的过程。
- 常见触发重绘的操作包括修改元素颜色、背景、文字样式等。
- 回流一定会导致重绘，但重绘不一定会导致回流。
- 浏览器的优化策略包括渲染队列、获取布局和样式信息、强制重绘等。
- 减少回流重绘的方法包括合理利用浏览器的优化策略、使用虚拟文档片段和克隆元素。
- 使用display:none可以减少回流次数。
- 文档片段允许在内存中创建和操作DOM节点，减少重排和重绘。
- 通过替换DOM而不是直接修改来减少回流是一种优雅的方案。
➡️
