非ui线程更新ui_UI线程外CSS动画

非ui线程更新ui

This excellent Google I/O talk mentions that Chrome for Android moves the CSS animations off of the UI thread, which is, of course, a great idea. Playing around with it, here's what I found:

谷歌在I / O上的精彩演讲提到，Chrome for Android将CSS动画从UI线程中移出，这当然是个好主意。 玩弄它，这是我发现的内容：

• Browser support: Desktop Safari, iOS Safari, Android Chrome.
  浏览器支持：桌面Safari，iOS Safari，Android Chrome。
• You need to use CSS transforms. Animating regular properties doesn't work.
  您需要使用CSS转换。 动画常规属性不起作用。

Update: (see comments) confirmed support in IE10. Reported support in Firefox OS too, but I cannot personally confirm

更新：(请参阅评论)确认了对IE10的支持。 也报告了Firefox OS中的支持，但我个人无法确认

More details and test page below.

更多详情和下面的测试页。

单UI线程 (Single UI thread)

As you probably know the browser is single threaded. Do something heavy in ECMAScript land and everything freezes.

您可能知道浏览器是单线程的。 在ECMAScript领域中做一些繁重的工作，一切都会冻结。

好主意 (The big idea)

CSS animations should be excluded from the "everything" that freezes.

CSS动画应从冻结的“所有内容”中排除。

测试页 (Test page)

Here's a test page with some animations. Click the kill button and see what happens.

这是带有一些动画的测试页。 单击“杀死”按钮，看看会发生什么。

演示地址

动画制作(Animations)

The red box that spins is animated like:

旋转的红色框的动画如下：

.spin {
  animation: 3s rotate linear infinite;
}
 
@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

The green one is also animated with a transform:

绿色的还可以通过以下转换进行动画处理：

.walkabout-new-school {
  animation: 3s slide-transform linear infinite;
}
 
@keyframes slide-transform {
  from {transform: translatex(0);}
  50% {transform: translatex(300px);}
  to {transform: translatex(0);}
}

The blue one is animated using the margin-left property, not a transform:

蓝色的是使用margin-left属性(而非变换)设置动画的：

.walkabout-old-school {
  animation: 3s slide-margin linear infinite;
}
 
@keyframes slide-margin {
  from {margin-left: 0;}
  50% {margin-left: 100%;}
  to {margin-left: 0;}
}

杀死开关 (Kill switch)

The kill button just pegs the CPU in a infinite loop for 2 seconds:

按下kill按钮只会使CPU陷入无限循环2秒钟：

function kill() {
  var start = +new Date;
  while (+new Date - start < 2000){}
}

结果 (Results)

In non-supporting browsers, which is most of them, the kill switch kills all the animations. Business as usual.

在大多数不支持的浏览器中，kill开关会杀死所有动画。 照常营业。

In the supporting browsers (All Safaris and Andriod Chrome) the kill only affects the blue button, the one that animates a CSS property, as opposed to using a CSS transform. But the animations that use a transform keep on going!

在支持的浏览器(所有Safaris和Andriod Chrome)中，终止只会影响蓝色按钮，该蓝色按钮为CSS属性设置了动画，而不是使用CSS转换。 但是使用变换的动画仍在继续！

外卖 (Take aways)

1. Rejoice! The future is here! Drink and dance uncontrollably around the campfire!
   麾！ 未来就在这里！ 在篝火旁无法控制地喝酒跳舞！

2. After you sober up, make sure your CSS animations use transform: where possible

   清醒之后，请确保您CSS动画使用transform:

3. Keep migrating them JS animations to CSS
   继续将它们的JS动画迁移到CSS
4. Bug your browser vendor to support this
   烦您的浏览器厂商以支持此

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/css-animations-off-the-ui-thread/

非ui线程更新ui