## 當渲染引擎遇上強迫癥 ```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