每日一博 | 从浏览器渲染层面解析 CSS3 动效优化原理
引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让DOM脱离文档流,减少页面的重排(relayout) 使用CSS3 3D属性开启硬件加速 那么,CSS3与动效优化有什么关系呢,本文将从浏览器渲染层面讲述CSS3的动效优化原理 浏览器页面展示过程 首页,我们需要了解一下浏览器的页面展示过程: Javascript:主要负责业务交互逻辑。 Style: 根据 CSS 选择器,对每个 DOM 元素匹配对应的 CSS 样式。 Layout: 具体计算 DOM 元素显示在屏幕上的大小及位置。 Paint: 实现一个 DOM 元素的可视效果(颜色、边框、阴影等),一般来说由多个渲染层完成。 Composite: 当每个层绘制完成后,浏览器会将所有层按照合理顺序合并为一个图层,显示到屏幕。 本文我们将重点关注 Composite 过程。 浏览器渲染原理 在讨论 Composite 之前,我们还需要了解一下浏览器渲染原理 从该图中,我们可以发现: DO...

