浏览器渲染过程

• 根据 HTML 构建 HTML 树 (DOM)
• 根据 CSS 构建 css 树 (cssDOM)
• 将两棵树合并成一颗渲染树 (render tree)
• layout 布局
• paint 绘制
• composite 合成 (根据层叠关系展示画面)

更新样式的渲染方式

如果修改了布局（lauoyt）元素，浏览器将检查所有其他元素，进行重新布局

如果修改背景图、文字颜色或者阴影等，浏览器会跳过布局，直接执行绘制

如果不改变布局也不绘制属性的话，比如动画属性，浏览器会直接执行合成

css 元素渲染属性表

跳转地址

google 优化