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

尽可能多的利用硬件能力,如使用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);

如动画过程有闪烁(通常发生在动画开始的时候),可以尝试下面的Hack:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; -webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性:

#ball-1 {
transition: -webkit-transform .5s ease;
-webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
-webkit-transform: translate3d(500px, 0, 0);
} #ball-2 {
transition: left .5s ease;
left: 0;
}
#ball-2.slidein {
left: 500px;
}

注:3D变形会消耗更多的内存与功耗,应确实有性能问题时才去使用它,兼在权衡

尽可能少的使用box-shadowsgradients

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

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

position: fixed;
position: absolute;

优化 DOM layout 性能

我们从实例开始描述这个主题:

var newWidth = aDiv.offsetWidth + 10;
aDiv.style.width = newWidth + 'px';
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.height = newHeight + 'px'; var newWidth = aDiv.offsetWidth + 10;
var newHeight = aDiv.offsetHeight + 10;
aDiv.style.width = newWidth + 'px';
aDiv.style.height = newHeight + 'px';

这是两段能力上完全等同的代码,显式的差异正如我们所见,只有执行顺序的区别。但真是如此吗?下面是加了说明注释的代码版本,很好的阐述了其中的进一步差异:

// 触发两次 layout
var newWidth = aDiv.offsetWidth + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + 'px'; // Write // 只触发一次 layout
var newWidth = aDiv.offsetWidth + 10; // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
aDiv.style.height = newHeight + 'px'; // Write

从注释中可找到规律,连续的读取offsetWidth/Height属性与连续的设置width/height属性,相比分别读取设置单个属性可少触发一次layout。

从结论看似乎与执行队列有关,没错,这是浏览器的优化策略。所有可触发layout的操作都会被暂时放入 layout-queue 中,等到必须更新的时候,再计算整个队列中所有操作影响的结果,如此就可只进行一次的layout,从而提升性能。

关键一,可触发layout的操作,哪些操作下会layout的更新(也称为reflow或者relayout)?

如何解决安卓(系统版本低) CSS3 动画问题---高性能动画的更多相关文章

  1. adb获得安卓系统版本及截屏

    [时间:2017-09] [状态:Open] [关键词:adb, android,系统版本,截屏,screencap] 本文主要是我遇到的android命令行用法的一个简单总结 系统版本 获取系统版本 ...

  2. 最全各种系统版本的XPosed框架资料下载整理

    由于XPosed在不同安卓系统版本中对应的版本不同,给很多新手造成极大困扰,本文作者经过几番努力,给大家整理了各个版本对应的xposed框架版本以及相关资料,并附上相关下载链接,希望对大伙有所帮助. ...

  3. Web高性能动画及渲染原理(1)CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  4. 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  5. hadoop本地库与系统版本不一致引起的错误解决方法

    hadoop本地库与系统版本不一致引起的错误解决方法 部署hadoop的集群环境为 操作系统 centos 5.8 hadoop版本为cloudera   hadoop-0.20.2-cdh3u3 集 ...

  6. Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法

    简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口.二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享. 这两天在做微信自定义分享的 ...

  7. CSS3全览_动画+滤镜

    CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...

  8. Linux实战教学笔记03:操作系统发展历程及系统版本选择

    标签(空格分隔): Linux实战教学笔记-陈思齐 第1章 Linux简介 1.1 什么是操作系统? 简单讲:操作系统就是一个人与计算机硬件的中介. 操作系统,英文名称Operating System ...

  9. 安卓系统源码编译系列(六)——单独编译内置浏览器WebView教程

    原文                   http://blog.csdn.net/zhaoxy_thu/article/details/18883015                 本文主要对从 ...

随机推荐

  1. Hackerrank GCD Product(莫比乌斯反演)

    题意 题目链接 Sol 一道咕咕咕了好长时间的题 题解可以看这里 #include<bits/stdc++.h> #define LL long long using namespace ...

  2. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  3. python之函数的参数

    1.位置参数: 例如计算一个整数的平方: def power(x) return x * x 显然参数x就是一个位置参数,如果要是计算5*5*5..............*5 ,这个函数就太麻烦了, ...

  4. XSS 相关 payload 集合

    Ajax 获取数据 GET function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Fire ...

  5. Vue 框架-12-Vue 项目的详细开发流程

    Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...

  6. Nginx 配置多站点vhost

    假设你想在Linux Nginx中用不同的域名访问不同的目录,这时就要配置多个vhost,具体配置如下,假设网站根目录设定在/var/www/ 1.在/var/www/下新建两个目录 /var/www ...

  7. 最常见到的runtime exception 异常

    ArithmeticException, 算术异常ArrayStoreException, 将数组类型不兼容的值赋值给数组元素时抛出的异常BufferOverflowException, 缓冲区溢出异 ...

  8. tls/ssl工作原理及相关技术

    https://www.wosign dot com/faq/faq2016-0309-03.htm TLS/SSL的功能实现主要依赖于三类基本算法:散列函数 Hash.对称加密和非对称加密,其利用非 ...

  9. Orcal数据库,使用EF的自增处理

    1.定义EF拦截器,截获执行命令前的操作.修改执行sql.还需要定义orcal序列,供自增使用 using System; using System.Collections.Generic; usin ...

  10. Intel Nehalem微架构Calpella平台机型Windows XP系统下如何开启AHCI硬盘工作模式(XP系统下如何加载AHCI驱动)

    问题描述用户来电表示使用IDE模式安装XP系统后开启AHCI模式会出现开机蓝屏重启的问题,咨询如何在XP下加载AHCI驱动,以便开启BIOS中AHCI选项来发挥硬盘的最佳性能   问题分析 Windo ...