用 transform: translateX(); 来替换 left的好处

用 transform: translateX(); 来替换 left 来实现位移有什么好处?

不会使页面造成重绘或者回流,当动画修改一个元素的 left 和 top会改变它的形状,而且可能引起页面上其它元素的移动和形状改变,会引起页面的重绘和回流

什么是重绘和回流?

重绘:当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘。

重排(回流):当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程

引起重绘的属性

在这里插入图片描述

引起回流的属性

在这里插入图片描述

引起回流的场景

1.添加、删除可见的dom
2.元素的位置改变
3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
4.页面渲染初始化
5.浏览器窗口大小改变
6.设置style属性
7.改变文字大小
8.添加/删除样式表
9.激活伪类,如:hover
10.操作class属性
11.内容的改变,(用户在输入框中写入内容也会)

如何减少重绘(Repaint)和重排(reflow)

(1)不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className。
(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。
(4)千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
(5)不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)
(6)用translate替代top改变
(7)用opacity替代visibility(在独立图层下优化重绘)

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值