zoukankan      html  css  js  c++  java
  • 5.css3动画性能优化

    高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度

    在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况

    关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。

    然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。

    目前对提升移动端CSS3动画体验的主要方法有几点:

    1.尽可能多的利用硬件能力,如使用3D变形来开启GPU加速

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    2.尽可能少的使用box-shadows与gradients

    box-shadows与gradients往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们,所以拥抱扁平化设计吧。

    3.尽可能的让动画元素不在文档流中,以减少重排

    position: fixed;
    position: absolute;
    

      

  • 相关阅读:
    centos8.0 安装 jenkins
    No match for argument: mysql-community-server Error: Unable to find a match: mysql-community-server
    Navicat 远程连接 centos8.0
    centos8.0 安装 mysql
    -bash: java-version: command not found
    centos8.0 安装 JDK1.8
    [Err] 1062
    android之Fragment基础详解(一)
    Android之RecyclerView(一)
    Android之ProgressBar
  • 原文地址:https://www.cnblogs.com/rained/p/6528197.html
Copyright © 2011-2022 走看看