谈谈CSS性能

CSS性能优化

• 衡量属性和布局的消耗代价
• 探索W3C的性能优化新规范
• 用测试数据判断优化策略

慎重选择高消耗的样式（Expensive Styles）

1. 合理安排Selectors(selectors瘦身);

2. 高消耗属性？-> 绘制前需要浏览器进行大量计算：

避免过分重排(Reflow)

浏览器重新计算布局位置与大小。

常见的重排元素;

避免过分重绘(Repaints)

常见的重绘元素;

CSS性能优化

• 衡量属性和布局的消耗代价
• 探索W3C的性能优化新规范
• 用测试数据判断优化策略

CSS Will Change

• 思路：把GPU利用起来
• 适用场景：transform, opacity等
• 使用位置：提前告知浏览器
• 

requestAnimationFrame

• 让视觉更新按照浏览器的最优时间来安排计划: 60fps
• 取代 setTimeout 和 setInterval hack
• 和pageVisibility的冲突

Web Animations & Smoothness Timing

为更未来流畅的动画效果提供准备

一份标准的诞生：问题-用例和目标-编写标准

W3C Web性能工作组

发布Resource Priorities, Resource Hints, Navigation Timing等规范；

订阅public-web-perf@w3.org邮件组；

围观讨论；