页面渲染

页面渲染

页面渲染的4个阶段（并非严格按顺序执行）

1. 解释代码

   html-->dom

   css-->cssdom

2. 对象合成
   dom + cssom --> 渲染树(render tree)

3. 布局：计算出渲染树的布局

4. 绘制：将渲染树绘制到屏幕

重流与重绘

• 重流必然导致重绘

• 重绘不一定导致重流

• 重流：改变元素的布局

• 重流与重绘导致阻塞效应，消耗很多时间与计算资源

• 重流的代价>重绘

• 减少重流的次数

  • documentFragment

    批量操作 dom

  • class 一次性改变样式

  • 虚拟 dom

  • window.requestAnimationFrame()

    代码推迟到下一次重绘之前执行