下面舉一個margin-left移動的動畫下,啓動js阻塞動畫的性能圖表css
<style> .walkabout-old-school { animation: 3s slide-margin linear infinite; } @keyframes slide-margin { from {margin-left: 0;} 50% {margin-left: 100%;} to {margin-left: 0;} } </style> <script> function kill() { var start = +new Date; while (+new Date - start < 2000){} } </script>
上圖在運行kill方法以後明顯能夠看到動畫停滯了2s後才繼續。
html
而後再看看使用了transform做爲動畫的元素dom
.walkabout-new-school { animation: 3s slide-transform linear infinite; } @keyframes slide-transform { from {transform: translatex(0);} 50% {transform: translatex(300px);} to {transform: translatex(0);} }
下圖是運行對比圖(藍色爲margin,綠色爲transform)
ide
從上圖看出使用了transform的徹底不受kill方法的影響,再來看下調試的圖表
函數
這裏能夠看出margin會頻繁觸發頁面的重排,而transform是不會的,而js阻塞了頁面重排。因此margin的動畫會卡住。佈局