在前端性能优化中，有哪些策略可以降低页面的重排（reflow）和重绘（repaint）频率？请列举至少四种具体做法，并说明其原理。

回答思路

1. 【回答框架 1】重排是布局引擎重新计算元素几何位置和尺寸的过程，重绘是元素外观变化但不影响布局时的重新绘制，重排必定导致重绘，而重绘不一定触发重排。
2. 【回答框架 2】减少重排的方法包括：批量修改DOM样式，使用CSS类替代多次样式操作；将频繁变动的元素设置为绝对定位或固定定位，使其脱离文档流，减少对周围元素的影响。
3. 【回答框架 3】减少重绘的方法包括：避免频繁修改背景色、边框等触发重绘的属性；使用CSS3 transform和opacity实现动画，因为它们由合成器处理，不触发重排和重绘。
4. 【回答框架 4】利用文档片段（DocumentFragment）或display:none隐藏元素后操作，最后一次性显示，可减少多次重排。
5. 【回答框架 5】缓存布局信息，避免在循环中反复读取offsetTop等属性，防止强制同步布局（forced reflow）。
6. 【关键点 1】重排和重绘是渲染性能瓶颈，应尽量减少频率。
7. 【关键点 2】批量修改DOM和使用CSS类可减少重排次数。
8. 【关键点 3】使用transform和opacity动画避开重排重绘。
9. 【关键点 4】读取布局属性会触发强制同步布局，应缓存。
10. 【关键点 5】脱离文档流的元素影响范围更小。
11. 【易错点 1】transform和opacity动画在低版本浏览器中可能仍会触发重排。
12. 【易错点 2】过度使用position:absolute可能增加管理复杂度。
13. 【易错点 3】强制同步布局是隐蔽的性能杀手，需避免在循环中读取布局属性。