浏览器实现移动端高性能css3动画(开启gpu加速)


Posted in HTML / CSS onDecember 23, 2013

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。

关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。
然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。
目前对提升移动端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)?
我们从浏览器的源码实现入手,以开源Webkit/Blink为例, 对layout的更新,Webkit 主要通过 Document::updateLayout 与Document::updateLayoutIgnorePendingStylesheets 两个方法:

复制代码
代码如下:

void Document::updateLayout()
{
ASSERT(isMainThread());

FrameView* frameView = view();
if (frameView && frameView->isInLayout()) {
ASSERT_NOT_REACHED();
return;
}

if (Element* oe = ownerElement())
oe->document()->updateLayout();

updateStyleIfNeeded();

StackStats::LayoutCheckPoint layoutCheckPoint;

if (frameView && renderer() && (frameView->layoutPending() || renderer()->needsLayout()))
frameView->layout();

if (m_focusedNode && !m_didPostCheckFocusedNodeTask) {
postTask(CheckFocusedNodeTask::create());
m_didPostCheckFocusedNodeTask = true;
}
}

void Document::updateLayoutIgnorePendingStylesheets()
{
bool oldIgnore = m_ignorePendingStylesheets;

if (!haveStylesheetsLoaded()) {
m_ignorePendingStylesheets = true;

HTMLElement* bodyElement = body();
if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) {
m_pendingSheetLayout = DidLayoutWithPendingSheets;
styleResolverChanged(RecalcStyleImmediately);
} else if (m_hasNodesWithPlaceholderStyle)
recalcStyle(Force);
}

updateLayout();

m_ignorePendingStylesheets = oldIgnore;
}

从 updateLayoutIgnorePendingStylesheets 方法的内部实现可知,其也是对 updateLayout 方法的扩展,并且在现有的 layout 更新模式中,大部分场景都是调用 updateLayoutIgnorePendingStylesheets 来进行layout的更新。
搜索 Webkit 实现中调用 updateLayoutIgnorePendingStylesheets 方法的代码, 得到以下可导致触发 layout 的操作:

Element: clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

Frame, HTMLImageElement: height, width

Range: getBoundingClientRect(), getClientRects()

SVGLocatable: computeCTM(), getBBox()

SVGTextContent: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()

SVGUse: instanceRoot

window: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

HTML / CSS 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 #HTML / CSS
css3高级选择器使用方法
Dec 02 #HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 #HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 #HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 #HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 #HTML / CSS
CSS3之多背景background使用示例
Oct 18 #HTML / CSS
You might like
转换中文日期的PHP程序
2006/10/09 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Python实现自动装机功能案例分析
2020/10/22 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
在Python中实现字典反转案例
2020/12/05 Python
Python: glob匹配文件的操作
2020/12/11 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
大四学生毕业自荐信
2013/11/07 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
房产公证书样本
2015/01/23 职场文书
教师聘用意向书
2015/05/11 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python