浏览器面试题整理

重排（reflow）和重绘（repaint）

• 原因
  在页面初次加载完毕之后，我们可能由于交互或者一些JS操作，导致页面的布局和样式发生变化，从而重新触发浏览器的渲染过程，这期间就会涉及到回流和重绘两种情况。
• 重排
  一些操作导致DOM尺寸的变化（比如修改宽、高，显示或隐藏元素），就会发生重排。可以通过让盒模型宽高确定来减少重排，优化
• 重绘
  对 DOM 的修改导致了样式的变化，但不改变其几何形状，如改变某个元素的颜色、文本和阴影，就会发生重绘。

浏览器性能优化手段

1、页面的加载和渲染

1.1 减少渲染量。
虚拟列表：只渲染可见区;
惰性加载：无限滚动;
按需加载：页面只在切换过去时才加载。

1.2 减少 DOM 元素数量**
- 不建议使用表格布局？
更多的标签，增加文件大小；
不易维护，无法适应响应式设计；
性能考量，默认的表格布局算法会产生大量重绘

1.3 减少渲染次数
总体思路：避免重复的渲染。
防抖与节流;