HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 查看内容

CSS Animation性能优化(上)

2016-9-30 07:38| 发布者: Hyukoh| 查看: 764| 评论: 0|原作者: Airen的博客|来自: Airen的博客

摘要: CSS Animation是实现Web Animation方法之一,其主要通过 @keyframes 和 animation-* 或者 transition 来实现一些Web动效。

  CSS Animation是实现Web Animation方法之一,其主要通过 @keyframes 和 animation-* 或者 transition 来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,咱们来聊聊CSS Animation性能相关的话题。


  浏览器渲染原理


  关于浏览器工作原理之前有一篇非常出名的文章《 浏览器的工作原理:新式网络浏览器幕后揭秘 》。文章详细阐述了浏览器工作原理,下面用两张图来分别描述Firefox和Chrome浏览器对Web页面的渲染过程:


  Chrome渲染过程

  有关于Chrome浏览器渲染的详细内容,可以参考《 图解浏览器渲染过程 - 基于Webkit/Blink内核Chrome浏览器 》一文。


  Firefox渲染过程

  特别声明:接下来的内容都是针对于Chrome浏览器进行讨论。


  Chrome渲染部分的实际含义


  从上面的流程图中不难看出,Chrome渲染主要包括Parse Html、Recalculate Style、Layout、Rasterizer、Paint、Image Decode、Image Resize和Composite Layers等。简单了解一下其含义,以便后续内容的更好理解。


  Parse Html


  发送一个 http 请求,获取请求的内容,然后解析HTML的过程。

  有一个经典的前端面试题: 当你在浏览器中输入google.com并且按下回车之后发生了什么? 这个面试题或许能帮助大家更好的理解Parse Html,甚至是浏览器渲染的其他几个部分。


  Recalculate Style


  重新计算样式,它计算的是Style,和Layout做的事情完全不同。Layout计算的是一个元素绝对的位置和尺寸,或者说是“Compute Layout”。

  Recalculate被触发的时候做的事情就是处理JavaScript给元素设置的样式而已。Recalculate Style会计算Render树(渲染树),然后从根节点开始进行页面渲染,将CSS附加到DOM上的过程。

  任何企图改变元素样式的操作都会触发Recalculate。同Layout一样,它也是在JavaScript执行完成后才触发的。


  Layout


  计算页面上的布局,即元素在文档中的位置及大小。正如前面所述,Layout计算的是布局位置信息。任何有可能改变元素位置或大小的样式都会触发这个Layout事件。

  触发Layout的属性非常的多,如果想了解什么属性会触发Layout事件,可以在 CSS Triggers 网站查阅。下图截了一部分:

  Rasterizer


  光栅化,一般的安卓手机都会进行光栅化,光栅主要是针对图形的一个栅格化过程。低端手机在这部分耗时还是蛮多的。


  Paint


  页面上显示东西有任何变动都会触发Paint。包括拖动滚动条,鼠标选择中文字等这些完全不改变样式,只改变显示结果的动作都会触发Paint。

  Paint的工作就是把文档中用户可见的那一部分展现给用户。Paint是把Layout和Recalculate的计算的结果直接在浏览器视窗上绘制出来,它并不实现具体的元素计算。


  Image Decode


  图片解码,将图片解析到浏览器上显示的过程。


  Image Resize


  图片的大小设置,图片加载解析后,若发现图片大小并不是实际的大小(CSS改变了宽度),则需要Resize。Resize越大,耗时越久,所以尽量以图片的原始大小输出。


  Composite Layers


  最后合并图层,输出页面到屏幕。浏览器在渲染过程中会将一些含有特殊样式的DOM结构绘制于其他图层,有点类似于PhotoShop的图层概念。一张图片在PotoShop是由多个图层组合而成,而浏览器最终显示的页面实际也是有多个图层构成的。

  下面这些因素都会导致新图层的创建:

  •   进行3D或者透视变换的CSS属性
  •   使用硬件加速视频解码的 元素
  •   具有3D(WebGL)上下文或者硬件加速的2D上下文的 元素
  •   组合型插件(即Flash)
  •   具有有CSS透明度动画或者使用动画式Webkit变换的元素
  •   具有硬件加速的CSS滤镜的元素

  有关于Composite方面的深入剖析,可以阅读《 无线性能优化:Composite 》一文。


  像素渲染流水线


  通过前面的介绍,在屏幕上最终呈现的页面,是类似于图层一样合并输出到屏幕上的。其实所写的Web页面最终以像素的形式在浏览器屏幕上呈现。这样一来,我们需要理解所写的页面代码是如何被转换成屏幕上显示的像素。这个转换过程可以归纳为这样的一个流水线,主要包含五个关键步骤:

  •   JavaScript :一般来说,我们会使用JavaScript来实现一些视觉变化的效果。比如CSS Animation、Transition和Web Animation API。
  •   Style :计算样式。这个过程是根据CSS选择器,对每个DOM元素匹配对应的CSS样式。这一步结束之后,就确定了每个DOM元素上应该应用什么CSS样式规则。
  •   Layout :布局。上一步确定了每个DOM元素的样式规则,这一步就是具体计算每个DOM元素最终在屏幕上显示的大小和位置。Web页面中元素的布局是相对的,因此一个元素的布局发生变化,会联动地引发其他元素的布局发生变化。比如, 元素的 width 变化会影响其后代元素的宽度。因此,对于浏览器而言, 布局过程是经常发生的 。
  •   Paint :绘制。本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等,也就是一个DOM元素所有的可视效果。一般来说,这个绘制过程是在多个层上完成的。
  •   Composite :渲染层合并。前面也说过,对于页面中DOM元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后在屏幕上呈现。对于有位置重叠的元素的页面,这个过程尤其重要,因为一量图层的合并顺序出错,将会导致元素显示异常。

  上述过程的每一步都有可能会发生,因此一定要弄清楚自己的代码将会运行在哪一步。

  虽然在理论上,而面的每一帧都是结过上述的流水线处理之后渲染出来的,但并不意味着页面每一帧的渲染都需要经过上述五个步骤的处理。实际上,对视觉变化效果的一个帧的渲染,有三种常用的流水线。


  JavaScript/CSS =>计算样式=>布局=>绘制=>渲染层合并

  如果你修改一个DOM元素的“Layout”属性,也就是改变了元素的样式(比如 width、 height 或者 position 等),那么浏览器会检查哪些元素需要重新布局,然后对页面激发一个reflow(重排)过程完成重新布局。被reflow(重排)的元素,接下来也会激发绘制过程,最后激发渲染层合并过程,生成最后的画面。

  reflow又叫重排,是指浏览器计算页面的全部或部分布局所做的处理。reflow必定会引发重绘,这对于Web的性能影响是极大的。


  JavaScript/CSS => 计算样式 =>绘制 =>渲染层合并

  如果你修改一个DOM元素的“Paint Only”属性,比如背景图片、文字颜色或阴影等,这些属性不会影响页面的布局,因此浏览器会在完成样式计算之后,跳过布局过程,只会绘制和渲染层合并过程。


  JavaScript/CSS => 计算样式 =>渲染层合并

  如果你修改一个非样式且非绘制的CSS属性,那么浏览器会在完成样式计算之后,跳过布局和绘制的过程,直接做渲染层合并。这种方式在性能上是最理想的,对于动画和滚动这种负荷很重的渲染,我们要争取使用第三种渲染过程。

  通过前面这么多的内容介绍,我们可以得知,影响Web性能主要过程包括Layout、Paint和Composite。那么对于CSS Animation而言,我们的所有操作都是通过CSS的样式控制动画,言外之意,只要是会触发Layout、Paint和Composite的CSS属性都会直接影响动画的性能。在CSS中所有影响Layout、Paint和Composite的属性都可以通过CSS Triggers **网站查阅。那么如何避免达到前面所述的,整个动画尽量避开重排和重绘,只做渲染层合并呢?暂且先不讨论,把这部分放到最后面来讨论。接下来接着先看看其他相关的知识点。



来源作者:Airen的博客

鲜花

握手

雷人

路过

鸡蛋
更多

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-27 16:14

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部