## 当渲染引擎遇上强迫症 ```javascript $dom.show(); $dom.hide(); ``` 显示/隐藏，你试一下就知道了，其实页面上并不会有闪动问题。 理论上说，两个操作，就算再快，也会有一个闪动效果，但其实没有。 强迫症的认为会有闪动效果，本质是没有错的，但没有闪动是因为，渲染引擎并不会这么勤快，并不会每一个dom操作就立马执行，而是会把多个操作叠加，在看情况做操作，像这样的两个操作，相互抵消了，所以渲染引擎就什么都没干，这也是为了效率，不然渲染引擎不得累死啊，要做很多无意义的操作。 ```javascript var i = 0; setInterval(function() { $dom.css('left', i + 'px'); $dom.css('top', i + 'px'); i++; }, 100); ``` 类似的还有，如果你认为元素是走“台阶路线”那你也错了，渲染引擎也是合并操作在进行dom渲染的，不是更新一个横轴，在更新一下纵轴，而是先计算好，再一次性更新dom。 本质就是，dom的更新操作，并不是直接由我们的代码控制，渲染引擎自己会决定如何更新DOM。 知道了浏览器的这个特性之后，平常我们就要注意一些东西了，比如如果你想UI上有过度变化，就要控制dom操作的频率（比如将代码放在延时器中执行），要想办法避免操作被抵消了，否则将看不到任何dom变化而得不到你想要的效果。 * * * * * ### 参考 [javascript - js运行动画实际上是锯齿状的是吗？ - SegmentFault 思否](https://segmentfault.com/q/1010000005180169) * * * * * last update：2018-7-3 18:29:06