动态修改元素background-position是否会重绘背景?

Question

问题源于修改background-position实现背景滑动效果，发现效果在移动端卡顿效果严重，在iphone6真机测试都能明显感受到。

因此想问一下修改元素的background-position，是否将背景重新画了一遍导致出现这种情况？

如果是的话，那么在移动端css动画中，除了这个，是否也应注意修改position等导致元素冲绘等情况发生。

在移动端css动画关键帧使用中，是否只能使用transform？我翻了翻animate.css源码，看他都是使用的transform。

Answer 1

dom更新有两种：

• 重排(reflow)：当DOM的改变影响了元素几何属性（例如宽和高）,影响其他元素，导致浏览器重新构造渲染树。
• 重绘(repaint)：浏览器会重新绘制受到影响的部分，不涉及其他元素

重排也会导致重绘

所以，在动画中，我们需要尽量避免重排。可以搜下重排导致的原因。

我们有几点优化方案：

1. 合并修改，将style的修改转为class（浏览器应该也有优化）
2. 让元素脱离文档流
3. 硬件加速

tansform3d可以启用硬件加速，且与left等熟性不在一层，因此会比直接操作Position性能要好。

background-position导致的是重绘，可能因为background过大等原因导致的吧，还要看具体情况，可以尝试其他动画优化手段