CSS镂空图片transition过渡初加载背景象块问题化解,用CSS开启硬件加速来抓好网站品质

记五回Taobao首页奇葩的渲染难题

2015/11/23 · CSSCSS镂空图片transition过渡初加载背景象块问题化解,用CSS开启硬件加速来抓好网站品质。 ·
渲染

原文出处: 天猫商城前端团队(FED)-
阎罗王   

亚洲必赢官网 1

也许你早就在 Chrome 浏览器上遭逢过如此令人瞠目结舌的难点:

  • hover 触发一个层浮现,hover 离开后,这些层还遗留残影
  • 浏览器没有清理一个因素渲染的上一个情景,导致页面多出一个错位的跟该元素一模一样的黑影
  • 相互时突然出现一个方形色块,覆盖在要素上
  • 依旧还有更奇葩的……

以上列举到的多个难题,我在爱惜Taobao首页的时候都赶上过。那个都是浏览器渲染页面时,因为渲染引擎的
bug 导致的题材,不广泛,越发难以写 demo
演示,它们只在特定的纷纭现象下,程序计算存在误差或者漏洞的时候出现,更加是涉嫌到分界判断的时候。

CSS镂空图片transition过渡初加载背景观块难点解决

2016/02/25 · CSS ·
transition

原稿出处:
张鑫旭(@张鑫旭)   

一、从哪个地方说起呢…

数年前写过一篇很实用的小说,介绍了一个很有新意的技巧:“CSS背景象镂空技术其实使用及进阶”,讲的图标图形为了更易于控制其颜色,对图纸选拔了镂空的处理。例如,上边那张图片(点击会有自由的背景观):
亚洲必赢官网 2

于是乎,咱们只要一套图片就可以完毕各个颜色效果了!
亚洲必赢官网 3

而不用类似上面这样,为了各样景况凑齐完整的葫芦七兄弟:
亚洲必赢官网 4

除外节约图片资源大小,CSS镂空图片技术还有一个益处,就是出于大家的图标颜色是CSS属性控制的,因而,大家可以渐进使用transition完毕连通效果,让相互更细致。

说到CSS控制图标颜色,我们放任自流会想到icon
fonts,
或者采纳SVG
sprites技术,或者使用掺杂情势来实现。

可是,都是有欠缺的,比方说:
亚洲必赢官网 5

SVG的包容性以及混合情势的了然成本和环境限制等。

为此,转了一圈,会意识,有时候,依旧图片来得最实际,且看下边demo完成的效益,即使应用的是background-image完成的,可是hover态,selected态都和文字hover
transition过渡,那是传统背景图片所无法达成的。

您能够狠狠地方击那里:镌刻背景图片下的transition过渡效果

一行:

transition: background-color .25s;

1
transition: background-color .25s;

就足以让相互变得细腻!

亚洲必赢官网 6

default, hover,
selected三种颜色态仅仅一个层层图片就搞定(见下图),看上去很赞,赞到飞起来。

亚洲必赢官网 7

唯独,那种已毕有一个沉重的缺乏,就是CSS的加载和背景图片的加载不是一道的,更加首次加载的时候,图片是异步的,具有强烈的推迟,于是,大家会看出这一个难看的色块在转手面世了(大家可以强刷demo体验到)!
亚洲必赢官网 8

亚洲必赢官网 9

正所谓“开发可忍设计不可忍”,那种问题明确是非常严重的,直接导致此看上去很酷的法子濒临崩溃的边缘,看上去只适用于默许隐藏的元素。

大家莫慌莫慌,有我在啊!

引言        
 对于多数Web开发者而言,Web页面的中坚模型就是DOM模型。页面的渲染进程不时并不为人所知,大家只是知道它是一个将页面的DOM表示方法转化为在显示屏上突显的一个图片的进度。近几年,现代浏览器采取图形卡对页面渲染形式举办了立异:那种创新一般都笼统地称为“硬件加快”。当谈及普通Web页面(也即:非Canvas2D要么WebGL页面)时,硬件加快那几个词到底意味着如何?本文将对作为Chrome中硬件加速下Web页面渲染基础的中坚模型举行认证。
  洋洋洒洒的注意事项        
 大家在此处探究的是WebKit,更具象地讲,大家商讨的是Chromium下的WebKit。
本文所关联的是Chrome的兑现细节,而不是Web平台的表征。Web平台及其标准并从未对那个层次的落实细节做出详细的规定,所以我们并不可以确保本文中的内容能够适用于任何的浏览器,不过对浏览器内部工作机理的刺探定会有益于对利用举办高品位的荒唐调试和质量调优。
       
 别的还要主意,整个那篇文章钻探的都是Chrome渲染架构中的一个主导部分,但以此布局仍在飞快生成之中。本文试图仅仅涉及那么些不太可能暴发变化的片段,但如若在三个月后再看那篇小说,这可就不肯定是什么动静了。
     
 很重点的是要领悟Chrome当下有段时光还会有五个差距的渲染途径:硬件加快式的渲染和中期软件式的渲染。直到写那篇小说之时截至,在Windows、ChromeOS和Android下的Chrome中,所有的页面都走的是硬件加快途径。在Mac和Linux下,
唯有这几个部分内容需求整合的页面才会走硬件加快途径(更加多关于怎样才须求结合的求证请参见下文),但用持续多长时间,所有页面将都会走硬件加速途径。
       
 最终要说的是,大家在那边的始末只是对Chrome的渲染引擎的夏虫语冰,所观察的只是其对品质影响比较大的局地特点。当您想要升高你的网站的质量时,对层模型有所通晓会丰裕有协理效用,但那也不难导致搬起石头砸自己脚的意况:层那种布局十分有用,不过创造过多的层会造成任何图形栈成本的增加。到时候可别说我从不提前警告过您哦!
    从DOM到屏幕   层的引入        
 页面一旦在装入并分析已毕后,就会表示为广大Web开发者所熟习的构造:DOM。然则,在页面的渲染进程中,浏览器还保有一体系并不直接暴光给开发者的页面中间表示方法。那么些代表方法中最要紧的社团就是层。
     
 在Chrome中实际有三种分歧档次的层:掌管DOM子树的渲染层(RenderLayer)以及经理渲染层子树的图形层(GraphicsLayer)。
大家这里最关怀的是后世,因为作为纹理上传到GPU之中的就是图形层。本文自此就只用“层”来代替图形层了。
       
 稍稍离题说一下同GPU有关的多少个术语:什么是纹理?纹理可以当做是位图图像,从主存储器(也就是RAM)传递到视频存储器(也就是GPU之上的VRAM)之中的就是这一个图像。一旦传递到GPU之中后,你就可见将纹理映射到一个网格几何结构如上
——
在摄像游戏或者CAD程序中,那种技术用来给框架式的3D模型加上“皮肤”。Chrome选择纹理把页面中的内容分块发送给GPU。纹理可以以很低的代价映射到差别的岗位,而且仍是可以以很低的代价通过把它们利用到一个相当简单的矩形网格中开展变形。那就是3D
CSS的完成原理,而且这么做对页面在屏幕的火速轮转也要命好 ——
现在先说这么些,那两上边更详尽的追究情状下文。
上面让大家用多少个例证来表达层的概念。        
 在Chome中研讨层时有一个老大有效的工具就是Chrome的开发者工具里安装(也就是老大小齿轮图标)中“渲染(rendering)”小标题下的“突显层的组合边界(show
composited layer
borders)”开关。让大家把这一个开关打开。本文中享有的截屏和例子都来源于最新版的Chrome
Canary,在写那篇著作的时候是Chrome 27。
图1: 唯有一层的页面 (将在新窗口中开辟) 1  <html> 2   
<body> 3      <div>I am a strange root.</div> 4   
</body> 5 </html>
(译者注:那里缺了一个图,原文中的图就看不到,可能是内需翻墙?) 

1. 何为硬件加速

题材复现

很宝贵有机会让自家蒙受一个得以复现的,我把它记录下来了。如下图所示,hover
到上学模块的边际地点时:

亚洲必赢官网 10

手动 hover 和宪章 hover
都有一样的难点,没有多想,立马加上了一句话修复了这么些题材:

CSS

.channel2 .channel-item { transform: translateZ(0); }

1
2
3
.channel2 .channel-item {
    transform: translateZ(0);
}

本条不是直觉,数次碰着那种奇葩难点,我第一想到的便是选取 3D
加速将那么些渲染层隔离渲染,80%
以上的几率能够化解难点,而解决难点的关键在于找准加那句代码的 DOM 元素。

二、base64 url图片与异步色块难题解决

以此很好通晓,就是把背景图片转换成base64
url图片,因为是合二为一在CSS文件中的,因而,基本上是还要表现,不会并发色块。然则,此方法局限性很肯定,就是只适用于部分尺寸很小的小图。类似下边demo的背景图片,有5K多大小,直接内嵌在CSS文件中,如同肉体里长了个肿瘤,太笨重了,而且base64渲染是相比较烧品质的,图片越大越慢,且IE7浏览器很难支撑base64图片。

由此,此方式在此地不适用,难道要天亡我也?非也!

在页面的基本层中组合层的渲染边界显示器截图
     
 那个页面唯有一层。灰色的栅格表示的是分块,那么些分块可以当做是比层更低顶级的单位,Chrome以那几个分块为单位,三遍向GPU上传一个分块的情节。那里它们并不怎么紧要。
  图2:有自己的层的元素 (open stand-alone) 1  <html> 2   
<body> 3      <div style=”-webkit-transform: rotateY(30deg)
rotateX(-30deg); width: 200px;”> 4        I am a strange root. 5     
</div> 6    </body> 7  </html>  
(译者注:那里缺了一个图,原文中的图就看不到,可能是亟需翻墙?) 
旋转后层的渲染边界的截屏        在<div>上添加让它旋转一个角度的3D
CSS属性后,大家就能够看到一个元素有协调的层是个如何样子:请留意其中的橘色边界,那几个境界给出了这几个视图中层的概况。
  层的创始准则  
还要此外什么因素会收获协调的层?Chrome在那地点利用的规则仍在乘胜时间推移逐步发展变化,但在眼前上面这个元素都会挑起Chrome创设层:

不怕将浏览器的渲染进程交给GPU处理,而不是拔取自带的相比较慢的渲染器。那样就可以使得animation与transition越发顺风。

探索 bug

以此层在自我的代码中必将是不设有的,大家只可以用 bug
来形容这一个难点。因为元素刚好贴在 .channel2 的边际,猜想应该跟层渲染有关,于是打开了控制台 ESC -> Rendering -> Show layer borders,看到了那个:

亚洲必赢官网 11

周全察看,可以看看,这么些灰色块在瓦片边界和父元素边界之中,可以判断,那多少个瓦片在渲染的时候存在难题。


那边要求补给下关于瓦片的学识。瓦片,英文里头称之为 tile,它是
webkit/blink
渲染页面时的中等进程,将全部页面分成四个轻重一样的瓦片,并发渲染每个瓦片的内容。一个因素开启
3D
硬件加快之后,会变成一个单身的层,这一个层的渲染也会被剪切成瓦片,可以想象成一个子页面。

瓦片和瓦片之间的境界计算是拍卖的难点,因为渲染的始末无法错位。


骨子里让自身找到标题根本原因的是,rendering
块的颜料,寻常在网页上开启 show layer borders 看到的是半晶莹剔透的红色块,而这里呈现的是蓝色块,搜索了下分歧色块象征的意义,没找到具体的文档表明,可是找到了 代码:

JavaScript

// Missing resize invalidations are in salmon pink. SkColor
DebugColors::MissingResizeInvalidations() { return SkColorSetARGB(255,
255, 155, 170); }

1
2
3
4
// Missing resize invalidations are in salmon pink.
SkColor DebugColors::MissingResizeInvalidations() {
  return SkColorSetARGB(255, 255, 155, 170);
}

对应的就是以此颜色,“缺失调整验证”,在 chromium
的源码仓库中搜了地点的代码,找到了 具体表明:

JavaScript

if (!deflated_content_rect.Contains(canvas_playback_rect)) { if
(clear_canvas_with_debug_color) { // Any non-painted areas outside
of the content bounds are left in // this color. If this is seen then it
means that cc neglected to // rerasterize a tile that used to intersect
with the content rect // after the content bounds grew.
canvas->save(); canvas->translate(-canvas_bitmap_rect.x(),
-canvas_bitmap_rect.y());
canvas->clipRect(gfx::RectToSkRect(content_rect),
SkRegion::kDifference_Op);
canvas->drawColor(DebugColors::MissingResizeInvalidations(),
SkXfermode::kSrc_Mode); canvas->restore(); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if (!deflated_content_rect.Contains(canvas_playback_rect)) {
  if (clear_canvas_with_debug_color) {
    // Any non-painted areas outside of the content bounds are left in
    // this color.  If this is seen then it means that cc neglected to
    // rerasterize a tile that used to intersect with the content rect
    // after the content bounds grew.
    canvas->save();
    canvas->translate(-canvas_bitmap_rect.x(), -canvas_bitmap_rect.y());
    canvas->clipRect(gfx::RectToSkRect(content_rect),
                     SkRegion::kDifference_Op);
    canvas->drawColor(DebugColors::MissingResizeInvalidations(),
                      SkXfermode::kSrc_Mode);
    canvas->restore();
  }
}

那边能看的必然就是注释啦,没有太多上下文,看的挺高烧!大约翻译了下上下几段注释:

  1. 就是完全覆盖,对于触遇到渲染层边界的栅格化处理,大家照样需要,在上次记录没有掩盖到的纹路下方和纹理化线性过滤的上面,栅格化处理背景颜色。
  2. 情节的结尾的纹路可能只有部分被栅格覆盖
  3. 在情节边界外没有被渲染到的局地将运用 MissingResizeInvalidations
    颜色,如若这些块可以被看见,那就象征程序忽视处理了内边边界增加之后栅格化与内容相交的瓦片。

从第三句大约可以明白到,因为元素的疆界增加造成了这一个渲染
bug,回头看了下元素的边际状态,果然…

三、content url图片与异步色块难点化解

6年前,也就是10年的时候,我在“CSS
content内容变更技术以及利用”一文中首次介绍了CSS
content url图片内容变更技术,就是before,
after伪元素可以直接插入图片,注意,是一贯图片,不是因素的背景图,语法如下:

.demo:after { content: url(xxx.png); }

1
.demo:after { content: url(xxx.png); }

OK,
我们只要观望过页面图片的加载,应该小心到那般个情景,就是只要图片并未通过HTML属性或者CSS值限定width/height宽高的时候,在浏览器get到图片的原始尺寸往日,图片占据的长空尺寸是0.
大家假如刷今日头条新浪,会意识页面中度蹭蹭蹭地往上升,就是如此个原因,那种不对图纸限定尺寸的做法在网页布局中是不推荐的,因为,会导致页面布局重绘,影响加载品质。

不过,存在必有道理,在那边,大家就可以好好地动用图片为加载时候占据空间为0的特点幸免出现色块的题材,怎么解决吗?就是把元素的background-image
url值变成伪元素的content
url值;同时background-position固定改成其它定位,如relative永恒,如下代码示意:

.icon { width: 140px; height: 140px; background: #c8c8c8 url(icon.png)
no-repeat 0 -140px; } ↓ .icon { /* 注意,只设中度不设宽度 */ height:
140px; background-color: #c8c8c8; overflow: hidden; } .icon:after {
content: url(icon.png); position: relative; top: -140px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.icon {
    width: 140px; height: 140px;
    background: #c8c8c8 url(icon.png) no-repeat 0 -140px;
}
.icon {
    /* 注意,只设高度不设宽度 */
    height: 140px;
    background-color: #c8c8c8;
    overflow: hidden;
}
.icon:after {
    content: url(icon.png);
    position: relative;
    top: -140px;
}

下边褐色注释“只设中度不设宽度”点出了落实的紧要性:

页面渲染流程如下,1. CSS加载;2.
对应DOM渲染,背景观出现;3.拉取DOM样式对应背景图片。

价值观完毕就是从2到3的时候现身了难点,图片从服务重视新请求,导致了岁月差,出现了色块。而我们这边的兑现就不一致等,当大家背景色出现,然则图片未加载的时候,由于大家的CSS没有设置元素的增幅,加上图片未加载占据宽度为0的风味,于是,在2形成3快要进展的时候,大家凡事因素的惊人140px,
宽度0,宽度是0啊!那意味着如何,意味着元素看不见啊,也即是纵然有背景观,无奈尺寸为0,大家是看不出有一丝丝背景致的;然后等图片请求到,自然就填满了元素,背景观也被遮掉了。没有了岁月差,于是,完美解决了色块出现的难题!

亚洲必赢官网 12

你可以狠狠地点击那里:content
url生成的缓解色块难题demo

IE7浏览器
怎么年代了,还IE7浏览器,即使喜欢,可以使用expression表明式,或者直接JS打个补丁,二哥我现在对这个浏览器不奉陪了!

  • 拓展3D要么透视变换的CSS属性
  • 应用硬件加快视频解码的<video>元素
  • 具备3D(WebGL)上下文或者硬件加快的2D上下文的<canvas>元素
  • 组合型插件(即Flash)
  • 抱有有CSS透明度动画或者使用动画式Webkit变换的要素
  • 所有硬件加快的CSS滤镜的因素
  • 子元素中存在具有组合层的因素的因素(换句话说,就是存在具有自己的层的子元素的元素)
  • 同级元素中有Z索引比其小的因素,而且该Z索引相比小的因素具有组合层(换句话说就是在组合层之上举办渲染的元素)

俺们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit)
发挥听从,从而进步质量

间接原因

咱俩看看 hover 上去然后,层边界的转移:

亚洲必赢官网 13

很引人注目,那里的中度溢出了,可是从未处理,看了下那么些因素的
css,确实中度上尚无做处理,在要素上添加

CSS

.channel-item { overflow: hidden; }

1
2
3
.channel-item {
  overflow: hidden;
}

平等可以缓解难点。

最终的化解手段:

亚洲必赢官网 14

层渲染的标题本身仍然相比较欣赏使用 3d
硬件加快来处理,而 overflow:hidden 这样的 css
布局处理上,我是不太推荐的,搞不佳就把哪些首要的情节隐藏掉了。

四、结束语

我测试发现,时间差似乎就Chrome浏览器比较分明,别的前面的content
url有必然几率会产出最后一个有色块的处境,依照道理应该不会的,现在太晚了,都2点了,我有时光在探究商讨。

亚洲必赢官网 15

有关小说

  • CSS背景色镂空技术其进行使及进阶
    (0.695)
  • 前景必热:SVG
    Sprite技术介绍
    (0.244)
  • IE6下png背景不透明难点的归结拓展
    (0.225)
  • CSS3图标图形生成技术个人攻略
    (0.225)
  • javascript HEX十六进制与RGB,
    HSL颜色的相互转换
    (0.169)
  • SVG图标颜色文字般持续与填充
    (0.169)
  • SVG-Morpheus达成SVG图标图形间的补形动画
    (0.169)
  • CSS1-CSS3
    颜色知识知多少?
    (0.169)
  • 伪类+js已毕CSS3 media
    queries跨界准确判断
    (0.136)
  • CSS
    content内容变更技术以及采用
    (0.097)
  • 小tip:
    某简单的字符重叠与图片生成
    (RANDOM – 0.075)

    1 赞 2 收藏
    评论

亚洲必赢官网 16

实际意义:动画   大家还是可以将层在页面中遍地移动,正好可用于动画。 图3:
动画层(将在新窗口中开拓) 01  <html> 02  <head> 03     
<style type=”text/css”> 04      div { 05         
-webkit-animation-duration: 5s; 06          -webkit-animation-name:
slide; 07          -webkit-animation-iteration-count: infinite; 08     
    -webkit-animation-direction: alternate; 09          width: 200px; 10
         height: 200px; 11          margin: 100px; 12         
background-color: gray; 13      } 14      @-webkit-keyframes slide { 15
         from { 16              -webkit-transform: rotate(0deg); 17     
    } 18          to { 19              -webkit-transform:
rotate(120deg); 20          } 21      } 22      </style> 23
 </head> 24  <body> 25      <div>I am a strange
root.</div> 26  </body> 27  </html>        
 正如前文所述,层在将Web页面中的静态内容遍地移动方面的确很有用。在最焦点的情况下,Chrome将层中的内容绘制到软件位图中,然后再将该位图作为纹理上载到GPU之中。假使层中的内容将来不会发生变化,那就不须要对其进展重绘了。那是个好事:重绘将会占有本可以用来干任何业务,比如运行JavaScript的小运,而且只要绘制进度太长,动画还会现出卡顿现象。
     
 例如,可以在Chrome的开发工具中看一下这些页面的年华线:但该层在来回旋转的时候,并不曾出现绘制操作。
动画进度中的开发者工具时间线显示屏截图   无效!重绘  
可是即使层中的内容发生了转移,它就必要重绘了。
  图4:层的重绘 (将在新窗口打开) 01  <html> 02  <head> 03   
<style type=”text/css”> 04    div { 05       
-webkit-animation-duration: 5s; 06        -webkit-animation-name: slide;
07        -webkit-animation-iteration-count: infinite; 08       
-webkit-animation-direction: alternate; 09        width: 200px; 10     
  height: 200px; 11        margin: 100px; 12        background-color:
gray; 13    } 14    @-webkit-keyframes slide { 15        from { 16     
      -webkit-transform: rotate(0deg); 17        } 18        to { 19   
        -webkit-transform: rotate(120deg); 20        } 21    } 22   
</style> 23  </head> 24  <body> 25    <div
id=”foo”>I am a strange root.</div> 26    <input id=”paint”
type=”button” onclick=”” value=”repaint”> 27    <script> 28   
  var w = 200; 29      document.getElementById(‘paint’).onclick =
function() { 30      document.getElementById(‘foo’).style.width = (w++)

前几日多数电脑的显卡都扶助硬件加快。鉴于此,大家可以发挥GPU的能力,从而使大家的网站或选拔表现的愈加流畅。

接近题材处理方案

固然之后大家蒙受类似的标题,可以打开 chrome
的层和瓦片分析工具,看看渲染出来的块有没有万分色块,越发是青色块。也得以考察交互进程中,元素的疆界有没有变动。

CSS
在浏览器中的渲染是我们接触相比较少的知识,要是想快捷找到难题,必须对浏览器的渲染原理有所精通,并且可以谙习的选择chrome 提供的调试工具,那是基础。

1 赞 1 收藏
评论

亚洲必赢官网 17

  • ‘px’; 31      } 32    </script> 33  </body> 34
     </html>
           
     每回点击按钮后,旋转中的元素的肥瘦就会大增1px。那将导致页面重新布局,整个因素都亟需重绘,在那些事例中须要重绘的是一切层。
    查看Chrome重绘了什么要素的一个很好的措施是运用开发者工具中的“展现绘制矩形”开关,这些开关同样也在开发者工具设置中的“渲染”标题下。打开该开关后,在点击按钮的时候请留意动画中的元素和按钮周围都会有一个革命的矩形闪现。
      亚洲必赢官网 18
      显示绘制矩形检查框的显示屏截图        
     同时绘制时间也应运而生在开发者工具里的小时线中了。明眼的读者可能还注意到此处有八个绘制事件:一个是层的,此外一个是按钮的。按钮会在它的意况变为按下情状和从按下景况成为非按下景况时要求开展重绘。
      亚洲必赢官网 19

2硬件加快原理

开发者工具时间线中层的重绘的显示屏截图
     
 请注意Chrome并不一连须求重绘整个层,它会尽量地以智慧的点子只绘制DOM中爆发变化的那有些情节。在大家的那么些事例中,我们所改变的DOM元素是整整层的尺寸。可是在重重场合下,在一层中会有大量的DOM元素。
       
 很鲜明接下去的标题是页面内容失效和勒迫举行重绘是由哪些引起的。要完美应对那一个题材并不易于,因为引起强制进行重绘的有雅量不太简单区分的景色。其中最常见的原委是由此操纵CSS样式或者滋生重新开展页面布局来改变DOM的特征。托尼Gentilcore写了一篇很不错的议论引起页面重新布局的因由的博文,Stoyan
Stefanov有一篇更近详尽地琢磨浏览器绘制进程的稿子(但那篇文章仅仅止于绘制进度,并没有关联奇特的组合部分的情节)。找出重绘是还是不是影响到了几许你正在关心中的元素的最好方法是利用开发者工具中的时间线以及“彰显绘制矩形”工具,用那七个工具可以看到浏览器是不是在重绘一些您并不认为必要重绘的情节,然后找出就在再次布局/重绘前的不得了时刻往日到底是在哪里改变了DOM结构。如若绘制进度不可能幸免但绘制进程却长的不太合理,请参见一下Eberhard
Gräther的篇章,那是一篇有关在开发者工具中要是对持续性绘制方式开展质量优化的稿子。
  Chrome是如何将DOM转换为显示器上的图像的吗?从概念上讲,它:

浏览器接收到页面文档后,会将文档中的标记语言分析为DOM树。DOM树和CSS结合后形成浏览器营造页面的渲染树。渲染树中包含了大气的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理,而图层在GPU中transform 是不会触发
repaint
的,最后那些使用 transform 的图层都会由单独的合成器进度展开处理。

  • 赢得DOM并将其分为若干个层
  • 分布将那几个层绘制到个其余软件位图中
  • 将绘制好的位图作为纹理上载至GPU里面
  • 将这个差距的层组合起来形成屏幕上最终突显出的图像

CSS transform 会成立了一个新的复合图层,可以被GPU直接用来推行 transform 操作。

这一个步骤在Chrome第五遍发生Web页面的帧时都亟需举办。可是在暴发随后的帧时,就可能会走一些近便的小路:

浏览器什么日期会创建一个独门的复合图层呢?事实上一般是在以下两种景况下:

  • 若是有少数CSS属性爆发了变更,就并不一定要重绘所有的始最终。Chrome可以将已经作为纹理保存在GPU之中的层重新组合起来,但只是在重新组合时,使用分化的构成属性(比如,在不一致的职位、以差其余透明度来组合等等)。
  • 万一某一层中的某个部分的情节变成无效的了,那么该层就须求重绘并在重绘完结后再行上载至GPU中。假设其情节仍旧不变,只是其构成属性暴发了转移(比如它的职分依然透明度改变了),Chrome就不会对GPU中该层的位图做其余处理,只是经过重复开展组合来生成新的帧。
  • 3D 或者 CSS transform
  • <video> 和 <canvas> 标签
  • CSS filters
  • 要素覆盖时,比如动用了 z-index 属性

       
 现在大家应该弄明白了,基于层的咬合模型对渲染质量兼备非凡大的意义。在未曾索要重新绘制的情节时,组合的代价相对来说代价更低一些,所以在调试渲染性能时,防止层的重绘是一个非凡好的总体目的。经验老到的开发者会去看上文提到的构成触发的列表,并发现到很可能会分外不难的导致浏览器创设很多层。不过,一定要小心无意识地去创造层,因为使用层是有代价的:它们会占有系统RAM以及GPU中的存储空间(移动设备上的贮存空间特地简单),层太多的话还会在跟踪哪些从可见哪些层不可知的算法中引入额外的支付。若是层都很大还要原来不重叠的层突然重叠了起来,那么太多的层就会增添浏览器花在栅格化方面的岁月,那会促成突发性称之为“过度绘制”的情状。所以,一定要明智地使用你所学到的知识!
暂时先写到那里了。请您之后再到此地来查阅别的几篇关于层模型实际意义的小说。

 

其余参考资料

3 为何硬件加快会使页面流畅

  • Scrolling Performance
  • Profiling Long Paint Times with DevTools’ Continuous Painting Mode

因为 transform 属性不会接触浏览器的
repaint(重绘),而相对定位absolute中的 left 和 top 则会平素触发
repaint(重绘)。

英文原文:Accelerated Rendering in Chrome – The Layer Model

为啥 transform 没有触发 repaint 呢?一言以蔽之,transform
动画由GPU控制,支持硬件增加速度,并不须要软件下面的渲染。

对于绝一大半Web开发者而言,Web页面的主干模型就是DOM模型。页面的渲染进度不时并不为人所知,大家只是知道它是一个将页面的DOM表示…

 

浏览器曾几何时会创设一个独立的复合图层呢?事实上一般是在以下二种状态下:

3D 或者 CSS transform

<video> 和 <canvas> 标签

CSS filters

要素覆盖时,比如利用了 z-index 属性

 

4并不是有着的CSS属性都能触发GPU的硬件加速,实际上只有个别特性可以,比如上面的那一个:

transform

opacity

filter

 

 

5.怎么样在桌面端和运动端用CSS开启硬件加快

CSS animations, transforms 以及 transitions
不会自行开启GPU加快,而是由浏览器的款款的软件渲染引擎来实施。那大家怎么样才足以切换来GPU格局吧,很多浏览器提供了几许触发的CSS规则。

现今,像Chrome, FireFox, Safari,
IE9+和新颖版本的Opera都协理硬件加快,当它们检测到页面中某个DOM元素采取了少数CSS规则时就会开启,最强烈的特点的要素的3D变换。

例如:

.cube {

   -webkit-transform: translate3d(250px,250px,250px)

   rotate3d(250px,250px,250px,-120deg)

   scale3d(0.5, 0.5, 0.5);

亚洲必赢官网 ,}

唯独在一些情状下,大家并不须求对元素选拔3D更换的效用,那如何是好吧?那时候大家可以动用个小技巧“欺骗”浏览器来打开硬件加速。

固然大家兴许不想对元素运用3D转移,可大家一致能够打开3D引擎。例如大家得以用transform:
translateZ(0); 来开启硬件加快 。

.cube {

   -webkit-transform: translateZ(0);

   -moz-transform: translateZ(0);

   -ms-transform: translateZ(0);

   -o-transform: translateZ(0);

   transform: translateZ(0);

   /* Other transform properties here */

}

在 Chrome and Safari中,当大家应用CSS transforms 或者
animations时或者会有页面闪烁的功用,下边的代码可以修复此情景:

.cube {

   -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;

   /* Other transform properties here */

}

在webkit内核的浏览器中,另一个得力的法子是

.cube {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

  /* Other transform properties here */

}

原生的移动端应用(Native mobile
applications)总是可以很好的拔取GPU,那是干什么它比网页应用(Web
apps)表现更好的由来。硬件加快在移动端越发有用,因为它可以使得的压缩资源的行使(移动端本身资源有限)。

 

6.行使硬件加快的题材

运用硬件加快并不是十全十美的事情,比如:

1内存。若是GPU加载了汪洋的纹路,那么很不难就会发出内容难点,那点在运动端浏览器上更是强烈,所以,一定要铭记在心不要让页面的各样元素都使用硬件加快。

2施用GPU渲染会潜移默化字体的抗锯齿效果。那是因为GPU和CPU具有不一样的渲染机制。固然最终硬件加快甘休了,文本照旧会在动画时期显得得很模糊。

 

总结

只对我们需求贯彻动画效果的要素拔取以上办法,要是一味为了打开硬件加快而任由乱用,那是不明智的。

小心使用那些艺术,若是通过你的测试,结果确是增长了品质,你才得以行使那几个办法。使用GPU可能会促成严重的品质难点,因为它扩大了内存的选取,而且它会打折扣运动端设备的电池寿命。

 

网站地图xml地图