前端性能优化的七大手段之减少重绘回流(一)

减少重绘回流

【样式设置】

    1. 避免使用层级较深的选择器,或者其他一些复杂的选择器,以提高 CSS 渲染效率;

    2. 避免使用 CSS 表达式, CSS 表达式是动态设置 CSS 的属性,虽然强大方便,但是属于危险方法,它的问题就是在于计算频率很快。不仅仅是在页面显示和缩放时,就是在页面滚动,乃至移动鼠标时都会要重新计算一次;

    3. 元素适当地定义高度或者最小高度,否则元素的动态内容载入时,会出现页面元素的晃动或位置抖动,造成回流;

    4. 给图片设置尺寸, 如果图片不设置尺寸,首次载入时,占据空间从 0 到完全出现,上下左右都可能位移,发生回流;

    5. 不用使用 table 布局,因为一个小改动可能造成整个 table 重新布局,而且 table 渲染通常要 3 倍于同等元素时间

    6. 能够使用 CSS 实现的效果,尽量使用 CSS 而不使用 JS 实现;

【渲染层】

    1. 将需要多次重绘的元素独立为 render layer 渲染层, 如设置 absolute, 可以减少重绘范围;

    2. 对于一些进行动画的元素, 使用硬件渲染,从而避免重绘和回流; 

发表评论

电子邮件地址不会被公开。 必填项已用*标注