启用硬件加速:translate3d
Enabling hardware acceleration: translate3d
正如 David Walsh 简要介绍的那样 discusses,可以在 CSS.
中使用从零开始的 translate3d 属性 强制硬件加速
它是这样工作的:
.animClass {
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
/* more specific animation properties here */
}
我仍然不确定是否应该开始使用这种技术。尽管 none 会同时 运行,但我在我的响应式网站上使用了很多转换,我希望为旧设备和高性能设备提供流畅的体验。
那么我的问题是:
- 上述技术是否改进了不透明度、宽度和位置(左、右、上、下)等过渡的执行?并且应该具备以上属性。
- 这有多跨浏览器?我对 IE8 和更低版本不感兴趣,但尤其是移动 Android、iOS 和 Windows Phone 设备应该从中受益。要添加什么代码以提高兼容性?
- 是否应将硬件启用代码添加到具有
transition
属性 的每个元素?如果是这样,有没有办法将其改造成一个简单的 SASS 可以轻松使用的 mixin?
第三部分提示:
您应该记住,浏览器已经优化了布局和设计动画。强制对每个动画元素进行硬件加速会适得其反,因为您会取消任何浏览器优化。在考虑使用此类 hack 之前,您应该始终使用适当的工具来衡量您的网站呈现性能。
简而言之:浏览器的每个新版本都变得越来越聪明,而您——作为一个人——不可能比一群有时在渲染引擎上工作多年的开发人员更聪明。
- 我一般可以说(根据我自己的经验)如果使用得当,它可以提高速度和性能(尤其是在 Android 和 iOS 上的 Web 视图中)。对所有元素应用硬件加速可能会适得其反,尤其是在内存较小的设备上。
我在渲染图像时经常使用它,我需要提高质量以使图像不模糊,并强制设备缓存整个图像。 Android 通常 "cuts of images" 当它的一部分在视口之外时。但要小心,当 运行 on Android 时对许多元素应用硬件加速可能会使应用程序崩溃。同样的规则也适用于 iOS(即使 iOS 在网络视图中有更好的性能,所以你 "can do more")。
它可以跨浏览器工作,但需要添加前缀。在 Android 上,我将它降至 4.2。
正如我所说,明智地使用它。将其应用于 class,然后仅将 class 设置为需要硬件加速的特定元素。当不再需要时,删除 class.
所以只在需要的时候使用它,并且只在当前需要它的元素上使用它。小心将它同时应用于很多元素。元素数量的限制很难说。但由于浏览器内存的原因,它在 desktop/iOS/Android 等
上会有所不同
不要使用位置动画,而是使用平移,这将提高动画的性能(尤其是在设备上)。
我不会在我的应用程序上删除硬件加速,因为那样它的性能会差很多:)
正如 David Walsh 简要介绍的那样 discusses,可以在 CSS.
中使用从零开始的 translate3d 属性 强制硬件加速它是这样工作的:
.animClass {
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
/* more specific animation properties here */
}
我仍然不确定是否应该开始使用这种技术。尽管 none 会同时 运行,但我在我的响应式网站上使用了很多转换,我希望为旧设备和高性能设备提供流畅的体验。
那么我的问题是:
- 上述技术是否改进了不透明度、宽度和位置(左、右、上、下)等过渡的执行?并且应该具备以上属性。
- 这有多跨浏览器?我对 IE8 和更低版本不感兴趣,但尤其是移动 Android、iOS 和 Windows Phone 设备应该从中受益。要添加什么代码以提高兼容性?
- 是否应将硬件启用代码添加到具有
transition
属性 的每个元素?如果是这样,有没有办法将其改造成一个简单的 SASS 可以轻松使用的 mixin?
第三部分提示:
您应该记住,浏览器已经优化了布局和设计动画。强制对每个动画元素进行硬件加速会适得其反,因为您会取消任何浏览器优化。在考虑使用此类 hack 之前,您应该始终使用适当的工具来衡量您的网站呈现性能。
简而言之:浏览器的每个新版本都变得越来越聪明,而您——作为一个人——不可能比一群有时在渲染引擎上工作多年的开发人员更聪明。
- 我一般可以说(根据我自己的经验)如果使用得当,它可以提高速度和性能(尤其是在 Android 和 iOS 上的 Web 视图中)。对所有元素应用硬件加速可能会适得其反,尤其是在内存较小的设备上。
我在渲染图像时经常使用它,我需要提高质量以使图像不模糊,并强制设备缓存整个图像。 Android 通常 "cuts of images" 当它的一部分在视口之外时。但要小心,当 运行 on Android 时对许多元素应用硬件加速可能会使应用程序崩溃。同样的规则也适用于 iOS(即使 iOS 在网络视图中有更好的性能,所以你 "can do more")。
它可以跨浏览器工作,但需要添加前缀。在 Android 上,我将它降至 4.2。
正如我所说,明智地使用它。将其应用于 class,然后仅将 class 设置为需要硬件加速的特定元素。当不再需要时,删除 class.
所以只在需要的时候使用它,并且只在当前需要它的元素上使用它。小心将它同时应用于很多元素。元素数量的限制很难说。但由于浏览器内存的原因,它在 desktop/iOS/Android 等
上会有所不同不要使用位置动画,而是使用平移,这将提高动画的性能(尤其是在设备上)。
我不会在我的应用程序上删除硬件加速,因为那样它的性能会差很多:)