无线页面动画优化实例,css渲染流程及动画深入理解和优化方案

作者:亚搏app官网    发布时间:2019-11-06 10:24    浏览:151 次

[返回]

有线页面动漫优化实例

2016/04/20 · CSS · 无线

原著出处: 大额_skylar(@大额大额哼歌等日落卡塔 尔(英语:State of Qatar)   

有线页面本就闲不住,更不用说当我们在有线页面中采用动画片的时候。不管是css动漫依然canvas动漫,我们都亟需每天小心着,何况有不能够贫乏精通页面品质的核心深入分析方法。

既然如此大家的靶子是优化,那么就与浏览器的部分渲染和奉行机制有关,更好的迎合浏览器的作为方式,才足以让大家的动漫通畅而好看。

对的,浏览器是特别,全听它的。

图片 1

 

网页的支行机制

二个网页是由八个层体现的,然后再将那么些层归总成一个层,当dom恐怕样式发生变化时,GPU能够缓存一些不改变的内容,就要变化的层与缓存层再合成,提高渲染效用,因而在做动画时要让GPU插足进去,升高动漫品质

后生可畏、设备刷新率(帧率卡塔 尔(英语:State of Qatar)

大家想让页面变快,想让动漫通畅,大家必要先领会一下是什么在影响着大家的感知。

页面运转在设备的浏览器中,未来市道上的运动设备的基本功代谢频率很多是56遍/秒(帧率卡塔尔。所以给浏览器渲染每黄金时代帧的画面包车型的士年月应该是(1s/60=16.67ms卡塔尔。

但实则,浏览器并非把武术全花在为我们渲染页面上,他还索要做一些额外的行事,比方渲染队列的田间管理和差别线程的切换等等。所以,单纯的浏览器渲染工作留给大家的岁月大概也便是10ms左右,当大家在每生机勃勃帧所做的渲染操作大于那些时间的时候,相比直观的表现便是页面卡顿,动漫卡顿。

当大家使用css animation完毕动漫时,那或多或少看起来未有那么重大,因为浏览器会为大家handle一些政工。可是当我们必要接受js比方canvas来兑现流畅的逐帧动漫时,需求深深记住那些轻易的时光,它很注重。

Layer模型层

图片 2

* 浏览器遵照CSS属性为要素生成Layers

* 将Layers作为位图上传到GPU

* 当改动Layer的transform,opcity等属性时,渲染会跳过Layout,paint,直接文告GPU对Layer做转换

Layer层创建规范

根元素、拥有3dtransform属性、使用animation,transition实现 opacity,transform的动画

position、transform、半透明、CSS滤镜fitters、Canvas2D、video、溢出,Flash,

z-index大于有些相邻节点的Layer的要素

二、浏览器的页面渲染流水线

我们的代码是如何一步步的渲染成页面包车型大巴呢?

图片 3

  • JavaScript。日常的话,大家运用JavaScript来落到实处部分页面逻辑,但有的时候大家也恐怕会接受JavaScript来促成都部队分视觉变化的作用。比方用jQuery的animate函数做三个动漫、也许往页面里加多一些DOM成分等。当然,以后更可能的是应用CSS Animations, Transitions和Web Animation API。
  • 总结样式(Style卡塔 尔(阿拉伯语:قطر‎。这一个进度是因此体制文件中的CSS选用器,对种种DOM成分匹配成对应的CSS样式。
  • 布局(Layout)。上一步明显了各种DOM成分的体制准则,这一步正是现实地衡量算每种DOM成分最终在荧屏上出示的分寸和职位。web页面桐月素的布局是争执的,因而三个成分的布局发生变化,会联合浮动地掀起其余因素的布局发生变化。因而对此浏览器来讲,布局进度是时常发出的。
  • 绘制(Paint)。绘制,本质上就是填充像素的进程。包含绘制文字、颜色、图像、边框和阴影等,也正是一个DOM成分全部的可视效果。日常的话,这一个绘制过程是在五个层上做到的。
  • 渲染层归并(Composite)。由上一步可以知道,对页面中DOM成分的绘图是在八个层上海展览中心开的。在每种层上到位绘制进度之后,浏览器会将全体层依据合理的依次归总成二个图层,然后显示在显示屏上。对于有岗位重叠的因素的页面,那一个进程越是入眼,因为只要图层的统意气风发顺序出错,将会招致成分展现分外。

看起来每种页面都会经历那样的多少个经过,不过大家实际上能够采取部分技艺,扶助浏览器跳过一些步骤,而浓缩他的干活时间。

1.八个步骤都消耗了时间

当大家在js中改换了有个别DOM成分的layout时,那么浏览器就能检讨页面中的哪些要素需求再一次布局,然后对页面激发叁个reflow进度以达成页面包车型客车再次布局。被reflow的成分,接下去就自然会再一次通过Paint和Composite那七个经过,以渲染出最新的页面。

 

2.跳过layout这一步

当大家只校正了一个DOM成分的paint only属性的时候,比如background-image/color/box-shadow等。那时候不会触发layout,浏览器在实现样式的简政放权之后就能跳过layout的进度,就只Paint和Composite了。

 

3.跳过layout和paint这两步

比如您改改三个非样式且非绘制的CSS属性,那么浏览器会在成就样式总括之后,跳过布局和制图的历程,直接Composite。

咱俩尝试下接收transform动漫来狠命的高达这种效应。

 

HTML的渲染机制

图片 4

图片 5

图片 6

图片 7

图片 8

图片 9

三、使用transform完成动漫

咱俩只怕时时须求做一些动漫片,例如在做一些揭秘也许生手指导的功用时,会需求做一些将内容移入移出的操作。

当然可能率先个想到的正是 css transition 只要联网一下 left 值恐怕 bottom 的值即可了。效果说不许极快就能够促成,可是当大家在三个页面频仍的做着那样的移入移出操作时,留心地大家放在手提式有线电话机中(6P卡塔 尔(英语:State of Qatar)看生龙活虎看,动漫并不会很流利,特别是在有个别低等机型上。

咱俩换用 transform 来兑现平等的效果与利益:

transition: left 2s ease-in-out; ---> transition: transform 2s ease-in-out; left: xxx; ---> transform: translate3d(xxx, yyy, zzz);

1
2
transition: left 2s ease-in-out;  ---> transition: transform 2s ease-in-out;  
left: xxx; ---> transform: translate3d(xxx, yyy, zzz);

由来在于:

  • 简易的说页面包车型地铁绘图并非在单层的画面里做到的,这里面有渲染层合成层等概念。对 opacity 和 transform 应用了 CSS 动漫的渲染层、有 3D 只怕 perspective transform 的 CSS 属性的渲染层等满足一些尺度的渲染层被称作合成层;
  • 合成层有本人的渲染上下文,并且交由 GPU 管理,比 CPU 要快;
  • 当页面须求重绘时,合成层的成分只会重绘本身层内的因素,而非整个页面;

优化今后再放在设备里查看,能够心得到成效显著的晋升。其实这里就到位了地点提到的,节省了layout和paint。

1.webkit渲染html+css

1-1.获取DOM 分割层 

1-2.计算CSS样式 

1-3.重排,放置dom的位置(layout) 

1-4.节点填充 重绘(paint)

 1-5.GPU生成纹理表现到页面(成分偏移、缩放)

 1-6.GPU参加网页合成层(compsite) => 显示屏最后图像 

【DOM子树渲染层(RenderLayer) -> RenderObject(成分) -> GraphicsContext】 

【Compositor -> 渲染层子树的图形层(GraphicsLayer) -> RenderLayer -> RenderObject】 【Compositor将享有的有所compositing layer 举办合成,合成进度GPU实行涉企。 合成终结能够将纹理映射到叁个网格几何机构之上,纹理能够以异常低代价映射到差异的职务,而且还能够够以十分的低的代价通过把他们采纳到贰个特简单的矩形网格中开展变形,这正是3D CSS 完成原理。】

 【GPU到场: CSS3D、webgel、transform、硬件加快】 

【硬件加快: ①.Texture,即CPU传输到GPU的三个BitMap位图 ②GPU能便捷对Texture进行偏移、缩放、旋转、改进光滑度等操作 开启硬件加速,让动漫成分独立创立七个层,譬如transform:translateZ(0) 】 

【Composite:GPU也可能有限度的,不要滥用GPU能源转移不须求的Layer,在乎意外生成的Layer】

 总括: 浏览器渲染: Load、Layout、Paint、Composite Layers 改进分裂的CSS属性会接触分裂品级 接触的阶段越前,渲染的代价越高

2.网页就像搭积木:大器晚成旦积木地点移动-重排,上色-重绘

2.1.网页生成时,最少会渲染一次,顾客访谈进度中,还不会各处重复渲染(校勘DOM、改良样式表、客户事件卡塔尔

2.2.重绘不必然引起重排,但重排一定会孳生重绘

2.3.重排产生原因:页面包车型客车早先化、引起的盒子变化、增多或然去除可知的DOM元素、成分地方变动、成分尺寸改革、成分内容改变(譬喻:一个文件被另四个莫衷一是尺寸的图纸替代卡塔尔国、页面渲染起头化(不能够制止卡塔尔、浏览器窗口尺寸改造、读取CSS相关属性也会触发重排 

图片 10

2.3.1.尽量不触发Layout、使用transform替代top,left的卡通

2.4.重绘:外观改造:当改进border-radius,box-shadow,color,backgroud等显得相关属性时候,会接触重绘、在平日paint的区域,要幸免代价太高style、、不要用gif图,只怕在不要求时,display:none,减弱绘制区域,为孳生大面积Paint的元素生成独立的Layer(比方将动画片部分装置position:absolute)

四、从css到canvas,使用requestAnimationFrame

今天css的卡通越来越好用,也能知足越多的供给。但在有个别复杂的急需中大家大概依旧需要助于js。

譬喻说作者那边实现的二个半圆的动漫片:[半圆progress] [Source Code]。看起来使用css动漫就完全能够满意自个儿的要求,可是当必要变动的时候,大家也不能不拥抱变化了。

 

**使用requestAnimationFrame**

[圆弧progress][Source Code] 这里用canvas达成了自定义弧度圆弧的提升动漫。

此处我们依靠那些动漫效果看一下是什么样利用canvas和requestAnimationFrame来兑现流畅的逐帧动漫的。

window.requestAnimationFrame 是七个特地为卡通而生的 web API 。它打招呼浏览器在页面重绘前实行你的回调函数。平时来讲被调用的功用是每秒62遍。

假使大家的页面上有二个动漫效果,假设大家想保障每风度翩翩帧的得手绘制,那么大家就要求requestAnimationFrame来保管大家的绘图机缘了。

洋洋框架和示范代码都以用setTimeoutsetInterval来贯彻页面中的动漫效果,譬喻jQuery中的animation。这种实现格局的主题材料是,你在setTimeoutsetInterval中钦命的回调函数的实施时机是心有余而力不足作保的。它就要此风姿洒脱帧动漫的_有些时间点_被施行,非常大概是在帧截止的时候。这就意味着那我们或者失去那风流倜傥帧的音讯。

图片 11

 

**requestAnimationFrame的别样高能用法**

依附requestAnimationFrame的表征,其实大家还是能在重重其他想不到的地点来风流洒脱显身手。

  • 动漫:也是它的主要用项,它将咱们动漫的实行时机和实行作用交由浏览器决定,以获取越来越好的品质;
  • 函数节流:requestAnimationFrame 的试行功能(豆蔻梢头帧卡塔 尔(英语:State of Qatar)是16.67ms,利用那一个特色就可以产生函数节流,幸免频繁事件在生机勃勃帧内做多余的无用功的函数推行,例:
JavaScript

var $box = $('#J_Test'), $point = $box.find('b');
$box.on('mouseenter',function(e){ requestAnimationFrame(function(){
$point.css({ top : e.pageY, left : e.pageX }) }); });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-10">
10
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d19187bb345735832-1" class="crayon-line">
var $box = $('#J_Test'),
</div>
<div id="crayon-5b8f6d19187bb345735832-2" class="crayon-line crayon-striped-line">
      $point = $box.find('b');
</div>
<div id="crayon-5b8f6d19187bb345735832-3" class="crayon-line">
$box.on('mouseenter',function(e){
</div>
<div id="crayon-5b8f6d19187bb345735832-4" class="crayon-line crayon-striped-line">
  requestAnimationFrame(function(){
</div>
<div id="crayon-5b8f6d19187bb345735832-5" class="crayon-line">
      $point.css({
</div>
<div id="crayon-5b8f6d19187bb345735832-6" class="crayon-line crayon-striped-line">
          top : e.pageY,
</div>
<div id="crayon-5b8f6d19187bb345735832-7" class="crayon-line">
          left : e.pageX
</div>
<div id="crayon-5b8f6d19187bb345735832-8" class="crayon-line crayon-striped-line">
      })
</div>
<div id="crayon-5b8f6d19187bb345735832-9" class="crayon-line">
  });
</div>
<div id="crayon-5b8f6d19187bb345735832-10" class="crayon-line crayon-striped-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>
  • 分帧伊始化:相像采用大器晚成帧的举行时间将模块的开端化或渲染函数分散到不一致的帧中来进行,那样各种模块都有16.67ms的实施时间,并不是一股脑的堆在此等着试行;
JavaScript

var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || function(c) { setTimeout(c, 1
/ 60 * 1000); }; function render() {
self.$container.html(itemHtml);
self.$container.find('.J_LazyLoad').lazyload(); } rAF(render);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-11">
11
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d19187bf045103677-1" class="crayon-line">
var rAF = window.requestAnimationFrame ||  window.webkitRequestAnimationFrame || 
</div>
<div id="crayon-5b8f6d19187bf045103677-2" class="crayon-line crayon-striped-line">
        function(c) {
</div>
<div id="crayon-5b8f6d19187bf045103677-3" class="crayon-line">
            setTimeout(c, 1 / 60 * 1000);
</div>
<div id="crayon-5b8f6d19187bf045103677-4" class="crayon-line crayon-striped-line">
        };
</div>
<div id="crayon-5b8f6d19187bf045103677-5" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d19187bf045103677-6" class="crayon-line crayon-striped-line">
    function render() {
</div>
<div id="crayon-5b8f6d19187bf045103677-7" class="crayon-line">
       self.$container.html(itemHtml);
</div>
<div id="crayon-5b8f6d19187bf045103677-8" class="crayon-line crayon-striped-line">
       self.$container.find('.J_LazyLoad').lazyload();
</div>
<div id="crayon-5b8f6d19187bf045103677-9" class="crayon-line">
    }
</div>
<div id="crayon-5b8f6d19187bf045103677-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d19187bf045103677-11" class="crayon-line">
    rAF(render);
</div>
</div></td>
</tr>
</tbody>
</table>

深档案的次序理解重排与重绘

浏览器推行线程: 主线程 和 制版线程 

1.主线程: 平时情形下,主线程首要承受以下职业:运转JavaScript、计算HTML成分的CSS样式、布局页面、把页面元素绘制作而成二个或两个位图、把这几个位图移交给制版线程

 2.制版线程: 通过GPU把位图绘制到了荧屏上

 3.重排与重绘 浏览器下载完页面中的全数财富(html、js、css、图片)

-> 解析成 DOM树和渲染树

-> DOM树表示页面结构,渲染树表示DOM节点如何展现

-> DOM树中的每八个急需出示的节点在渲染树种起码存在二个相应的节点(隐蔽的DOM元素disply值为none 在渲染树中从不对景挂画的节点卡塔尔国

-> 渲染树中的节点被称得上“帧”或“盒”,切合CSS模型的概念,精通页面元素为三个装有填充,边距,边框和职位的盒子

-> 少年老成旦 DOM和渲染树创设实现,浏览器就起来体现(绘制卡塔 尔(英语:State of Qatar)页面成分

-> 当DOM的扭转影响了成分的几何属性(宽或高卡塔 尔(阿拉伯语:قطر‎,浏览器供给再度总括成分的几何属性,相像其余因素的几何属性和地点也会为此遭受震慑。浏览器会使渲染树中遇到震慑的局地失效,相提并论复布局渲染树。这几个进度称为重排。

-> 完成重排后,浏览器会重新绘制受影响的有个别到显示器,该进程称为重绘

五、解析你的有线页面

作者们仍然依附那么些例子,[圆弧progress][Source Code] 轻巧的看下怎样深入分析有线页面包车型地铁天性。

此处的完结思路是那样的:

1 - 鲜明圆弧的早先弧度(0.75PI卡塔 尔(英语:State of Qatar)和安歇弧度(遵照当下分值占上限分值的比重总计,最大为2.25PI卡塔 尔(英语:State of Qatar); 2 - 随着时间的滋长逐帧绘制终点地点 requestAnimationFrame(draw); 3 - 依照每生机勃勃帧的终端地点的 cos 和 sin 值得到跟随的圈子坐标并绘制;

1
2
3
1 - 确定圆弧的起始弧度(0.75PI)和终止弧度(根据当前分值占上限分值的比例计算,最大为2.25PI);
2 - 随着时间的增长逐帧绘制终点位置 requestAnimationFrame(draw);
3 - 根据每一帧的终点位置的 cos 和 sin 值得到跟随的圆圈坐标并绘制;

但当然,达成产生只是走了第一步,大家来依附Chrome 提姆eline来深入分析一下以此差不离的页面。

图片 12

 

  1. 看一下帧率,在进程动漫举办的时候,看起来帧率不错,没有发出掉帧的场所,表明每意气风发帧的耗时都还ok,作者的动漫片基本不会卡顿;
  2. 在函数的奉行和调用那生机勃勃栏中,或然有题指标有的右上角会被标红,还足以查看也许存在难点的内幕;这里提示笔者页面强制重排了,留意考查上边包车型大巴Bottom-up tab 中得以牢固到实际的代码。

利用Timeline就能够见到页面包车型的士二种指标,帧率,js施行等等。就足以本着现身难题的帧动手优化。

在分析页面品质的时候,严重推荐阅读:[] .timeline的详实使用表明,它真的很强劲,能扶持大家深入分析到页面包车型客车各类方面包车型客车主题素材。

1 赞 1 收藏 评论

图片 13

这正是说大家怎么避免重排和重绘给它们进行优化呢?

浏览器会把要引起重绘与重排的操作都塞到主线程队列里面,正打算举办优化后队列的时候,假若您做了一个读取width的操作,浏览器会全部摈弃此前的优化,形成品质大幅度下落

方案风姿浪漫 :直面外人写好的代码,使用requestAnimationFrame 推迟到下生龙活虎帧试行

//Bad Code - 旁人写好的代码

el1.addEventListener('click', function(){

    var h1 = el1.clientHeight;

    el1.style.height = (h1 * 2) + 'px';

});

el2.addEventListener('click', function(){

    var h2 = el2.clientHeight;

    el2.style.height = (h2 * 2) + 'px';

});

//Good Code - 优化代码

el1.addEventListener('click', function(){

    //Read

    var h1 = el1.clientHeight;

    //Write 推迟到下意气风发帧再实行

    requestAnimationFrame(function(){

      el1.style.height = (h1 * 2) + 'px';

    });

});

el2.addEventListener('click', function(){

    var h2 = el2.clientHeight;

    requestAnimationFrame(function(){

      el2.style.height = (h2 * 2) + 'px';

    });

});


requestAnimationFrame(function(){

    $('#test').width();

})

方案二: 抽离读写,裁减Layout

在每意气风发帧先做批量的读操作,再批量运维写操作

fastdom.js 3.1.使用读写分类的政策来优化

4.毫无感到单独的层是才德兼顾的,单独层内部的因素触发重排、重绘的基准,相仿会只重排、重绘那风姿罗曼蒂克层

5.CPU VS GPU

图片 14

ALU 面积越大,总计本领越强,

ALU总括单元越来越多,吞吐量就越大

同风华正茂: 两个都有总线和外面沟通,有友好的缓存种类,以至运算单元,两个都为了产生计算而生 差别: CPU主要负责操作系统和应用程序的逻辑运算,GPU管理显示相关的多少管理 GPU运算越来越快,GPU的活CPU平日都能干,可是功能低下

6.品质质量评定工具:Timeline或Performance 质量评定动画性能

相比一下多个卡通

//1.不利用transform:引起重排和重绘

@keyframes run-around{

    0%{top: 0;left: 0;}

    25%{top: 0;left: 200px;}

    50%{top: 200px;left: 200px;}

    75%{top: 200px;left: 0;}

    100%{top: 0;left: 0;}

}

图片 15

//2.利用transform:不引起重排和重绘

@keyframes run-around{

    0%{transform: translate(0,0);}

    25%{transform: translate(200px,0);}

    50%{transform: translate(200px,200px);}

    75%{transform: translate(0,200px);}

    100%{transform: translate(0,0);}

}

//3.矩阵动漫: 更敏捷

@keyframes run-around{

    0%{transform: matrix(1, 0, 0, 1, 0, 0);}   

    25%{transform: matrix(1, 0, 0, 1, 200, 0);} 

    50%{transform: matrix(1, 0, 0, 1, 200, 200);}

    75%{transform: matrix(1, 0, 0, 1, 0, 200);} 

    100%{transform: matrix(1, 0, 0, 1, 0, 0);}

}

图片 16

1.在整个动画的每生龙活虎帧中,浏览器都要去重新布局,绘制页面,并把新型的位图对象加载到GPU2.基于定义,CSS的transform属性不会变动成分的布局,也不会影响到其左近的因素。它把成分充作三个总体待遇——缩放整个因素、旋转整个因素只怕移动整个因素。 浏览器只需在动漫最初的时候生成那一个因素的位图对象,并把它传递给GPU。在这里之后,浏览器不需求再做任何重新布局,绘制页面以致传递位图对象的操作了,相反,浏览器可以使用GPU长于的绘图的表征来十分的快的在区别之处,旋转或缩放同三个位图对象

transform: 节省了CPU举行Layout、Paint的年华((跳过),节省了CPU向GPU传输位图的大运

终极用矩阵matrix来代替转变来transform那样子又幸免了动漫片开始的时候生成那些因素的位图图像,把质量做到十二万分

完美的Animation

-- 15FPS 有卡顿

-- 30FPS 认为通畅

-- 60FPS 更舒畅完美

-- 60FPS: 1s/60FPS = 16.7ms 表示1分钟完毕的60帧, 16.7ms/FPS (16.7纳秒,将在把生龙活虎帧酌量好)

###三个难点

-- 最早绘制的火候

-- 绘制大器晚成帧的年月(16.7ms最全面)

setTimeout(有延时差卡塔尔国

1.setTimeout相当不够标准,它依赖浏览器内置时钟更新频率,分歧浏览器更新频率不相同

    1.1:setTimeout(fn, 1/60);

    1.2:IE8及早前更新间隔为15.6ms,set提姆eout 16.7内需多少个15.6ms才触发,超越14.5ms就能够丢帧

2.setTimeout的回调会走入到异步队列,需求等到主队列实践完,才会奉行异步队列,所以不能够时刻保证做每意气风发帧。

3.requestAnimationFrame

    定义绘制每生机勃勃帧前的预备工作 requestAnimation(callback);

机动调治频率,callback工作太多无法在风流倜傥帧内到位,会自动减弱为30FPS,固然频率裁减但比丢帧好

总结

图片 17

搜索