如何解决安卓(系统版本低) CSS3 动画问题---高性能动画
目前对提升移动端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-shadows
与gradients
box-shadows
与gradients
往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们,所以拥抱扁平化设计吧。
尽可能的让动画元素不在文档流中,以减少重排
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 动画问题---高性能动画的更多相关文章
- adb获得安卓系统版本及截屏
[时间:2017-09] [状态:Open] [关键词:adb, android,系统版本,截屏,screencap] 本文主要是我遇到的android命令行用法的一个简单总结 系统版本 获取系统版本 ...
- 最全各种系统版本的XPosed框架资料下载整理
由于XPosed在不同安卓系统版本中对应的版本不同,给很多新手造成极大困扰,本文作者经过几番努力,给大家整理了各个版本对应的xposed框架版本以及相关资料,并附上相关下载链接,希望对大伙有所帮助. ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- hadoop本地库与系统版本不一致引起的错误解决方法
hadoop本地库与系统版本不一致引起的错误解决方法 部署hadoop的集群环境为 操作系统 centos 5.8 hadoop版本为cloudera hadoop-0.20.2-cdh3u3 集 ...
- Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法
简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口.二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享. 这两天在做微信自定义分享的 ...
- CSS3全览_动画+滤镜
CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...
- Linux实战教学笔记03:操作系统发展历程及系统版本选择
标签(空格分隔): Linux实战教学笔记-陈思齐 第1章 Linux简介 1.1 什么是操作系统? 简单讲:操作系统就是一个人与计算机硬件的中介. 操作系统,英文名称Operating System ...
- 安卓系统源码编译系列(六)——单独编译内置浏览器WebView教程
原文 http://blog.csdn.net/zhaoxy_thu/article/details/18883015 本文主要对从 ...
随机推荐
- Hackerrank GCD Product(莫比乌斯反演)
题意 题目链接 Sol 一道咕咕咕了好长时间的题 题解可以看这里 #include<bits/stdc++.h> #define LL long long using namespace ...
- FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- python之函数的参数
1.位置参数: 例如计算一个整数的平方: def power(x) return x * x 显然参数x就是一个位置参数,如果要是计算5*5*5..............*5 ,这个函数就太麻烦了, ...
- XSS 相关 payload 集合
Ajax 获取数据 GET function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Fire ...
- Vue 框架-12-Vue 项目的详细开发流程
Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...
- Nginx 配置多站点vhost
假设你想在Linux Nginx中用不同的域名访问不同的目录,这时就要配置多个vhost,具体配置如下,假设网站根目录设定在/var/www/ 1.在/var/www/下新建两个目录 /var/www ...
- 最常见到的runtime exception 异常
ArithmeticException, 算术异常ArrayStoreException, 将数组类型不兼容的值赋值给数组元素时抛出的异常BufferOverflowException, 缓冲区溢出异 ...
- tls/ssl工作原理及相关技术
https://www.wosign dot com/faq/faq2016-0309-03.htm TLS/SSL的功能实现主要依赖于三类基本算法:散列函数 Hash.对称加密和非对称加密,其利用非 ...
- Orcal数据库,使用EF的自增处理
1.定义EF拦截器,截获执行命令前的操作.修改执行sql.还需要定义orcal序列,供自增使用 using System; using System.Collections.Generic; usin ...
- Intel Nehalem微架构Calpella平台机型Windows XP系统下如何开启AHCI硬盘工作模式(XP系统下如何加载AHCI驱动)
问题描述用户来电表示使用IDE模式安装XP系统后开启AHCI模式会出现开机蓝屏重启的问题,咨询如何在XP下加载AHCI驱动,以便开启BIOS中AHCI选项来发挥硬盘的最佳性能 问题分析 Windo ...