新浦京81707con > 注册购买 > 前端性能优化之,无线性能优化

原标题:前端性能优化之,无线性能优化

浏览次数:73 时间:2019-05-02

有线品质优化:Composite

2016/04/26 · 基本功才能 · 无线

初稿出处: Tmall前端团队(FED)- 冬萌   

澳门葡京网上赌场 1

一个 Web 页面包车型客车展现,简来讲之能够认为经历了以下下几个步骤。

澳门葡京网上赌场 2

  • JavaScript:一般的话,大家会使用 JavaScript 来兑现部分视觉变化的效应。比如做3个卡通可能往页面里增加一些 DOM 成分等。
  • Style:总括样式,那些进程是依附 CSS 选用器,对种种 DOM 成分相配对应的 CSS 样式。这一步结束未来,就规定了各样 DOM 成分上该应用什么 CSS 样式规则。
  • Layout:布局,上一步分明了每一个 DOM 成分的体制规则,这一步正是具体育项目检验算种种 DOM 成分最后在显示屏上显得的大小和岗位。web 页面相月素的布局是相对的,由此多个成分的布局产生变化,会联合浮动地吸引别的因素的布局发生变化。比方,`` 成分的小幅度的成形会潜移默化其子成分的大幅,其子成分宽度的变化也会继续对其外甥成分爆发影响。由此对此浏览器来说,布局进度是常事产生的。
  • Paint:绘制,本质上正是填充像素的历程。包含绘制文字、颜色、图像、边框和阴影等,也正是二个DOM 成分全数的可视效果。一般的话,那一个绘制进度是在七个层上完毕的。
  • Composite:渲染层合并,由上一步可见,对页面中 DOM 成分的绘图是在四个层上举行的。在每一种层上做到绘制进度之后,浏览器会将全数层根据合理的各类合并成八个图层,然后展现在显示屏上。对于有职责重叠的成分的页面,那一个进度更是主要,因为即使图层的联合顺序出错,将会促成元素展现极度。

理所当然,本文大家只来关注 Composite 部分。

摘要: 八个 Web 页面包车型客车显得,轻巧的话能够认为经历了 JavaScript/Style/Layout/Paint/Composite 多少个步骤。本文首要深入Composite 部分,从渲染原理、Composite 原因以及如何针对其举办质量优化等开始展览拓展。

1.浏览器渲染原理分析

浏览器渲染原理

在争执 Composite 在此之前,有不能缺少先轻便领会下一些浏览器(本文只是本着 Chrome 来讲)的渲染原理,方便对之后有的概念的精晓。越来越多详细的始末能够参阅 GPU Accelerated Compositing in Chrome

注:由于 Chrome 对 Blank 引擎有个别完结的修改,某个大家事先纯熟的类名有了转移,例如 RenderObject 产生了 LayoutObject,RenderLayer 形成了 PaintLayer。感兴趣的看以参阅 Slimming Paint。

在浏览器中,页面内容是积存为由 Node 对象组成的树状结构,也正是 DOM 树。每2个 HTML element 元素都有一个 Node 对象与之对应,DOM 树的根节点恒久都以 Document Node。这点亲信我们都很熟习了,但实则,从 DOM 树到最终的渲染,需求开始展览局地调换映射。

澳门葡京网上赌场 3

八个 Web 页面包车型客车显示,一言以蔽之能够感到经历了以下下多少个步骤。

想要升高网页的性质,主要的正是要明了浏览器渲染原理,上面关于浏览器的法则分析,我们以chrome内核webkit为例,其余基础的浏览器原理也基本阳江小异,可投砾引珠。

从 Nodes 到 LayoutObjects

DOM 树中得各种 Node 节点都有2个应和的 LayoutObject 。LayoutObject 知道怎么样在显示屏上 paint Node 的内容。

澳门葡京网上赌场 4

 澳门葡京网上赌场 5

从 LayoutObjects 到 PaintLayers

一般的话,具备一致的坐标空间的 LayoutObjects,属于同三个渲染层(PaintLayer)。PaintLayer 最初是用来达成 stacking contest(层叠上下文),以此来保管页面成分以准确的1一合成(composite),那样工夫科学的来得成分的重合以及半透明成分等等。由此满足产生层叠上下文条件的 LayoutObject 一定会为其创立新的渲染层,当然还有别的的部分出奇情形,为局地出奇的 LayoutObjects 创设1个新的渲染层,比方 overflow != visible 的因素。依照创建 PaintLayer 的原故莫衷1是,能够将其分为常见的 三 类:

  • NormalPaintLayer
    • 根元素(HTML)
    • 有鲜明的稳定属性(relative、fixed、sticky、absolute)
    • 透明的(opacity 小于 1)
    • 有 CSS 滤镜(fliter)
    • 有 CSS mask 属性
    • 有 CSS mix-blend-mode 属性(不为 normal)
    • 有 CSS transform 属性(不为 none)
    • backface-visibility 属性为 hidden
    • 有 CSS reflection 属性
    • 有 CSS column-count 属性(不为 auto)或者 有 CSS column-width 属性(不为 auto)
    • 眼下有对于 opacity、transform、fliter、backdrop-filter 应用动画
  • OverflowClipPaintLayer
    • overflow 不为 visible
  • NoPaintLayer
    • 不供给 paint 的 PaintLayer,比方二个并未有视觉属性(背景、颜色、阴影等)的空 div。

满意以上原则的 LayoutObject 会具备独立的渲染层,而任何的 LayoutObject 则和其首先个具备渲染层的父成分共用3个。

▪ JavaScript:一般的话,我们会使用 JavaScript 来兑现部分视觉变化的作用。比如做二个动画片或许往页面里增添一些 DOM 成分等。

如上航海用体育场合所示,浏览器解析页面步骤可分为:

从 PaintLayers 到 GraphicsLayers

一些特殊的渲染层会被认为是合成层(Compositing Layers),合成层具有独立的 GraphicsLayer,而其余不是合成层的渲染层,则和其首先个具备 GraphicsLayer 父层公用3个。

每种 GraphicsLayer 都有二个 GraphicsContext,GraphicsContext 会负担输出该层的位图,位图是积攒在共享内部存款和储蓄器中,作为纹理上传到 GPU 中,最终由 GPU 将多个位图进行合成,然后 draw 到荧屏上,此时,大家的页面也就展现到了显示器上。

渲染层提高为合成层的来由有瞬间两种:

注:渲染层提高为合成层有一个先决条件,该渲染层必须是 SelfPaintingLayer(基本可以为是上文介绍的 NormalPaintLayer)。以下所商量的渲染层进步为合成层的情况都是在该渲染层为 SelfPaintingLayer 前提下的。

  • 直接原因(direct reason)
    • 硬件加速的 iframe 成分(比方 iframe 嵌入的页面中有合成层)demo
    • video 元素
    • 蒙面在 video 成分上的录像调控栏
    • 3D 恐怕 硬件加快的 二D Canvas 成分
      • demo:普通 二D Canvas 不会进级为合成层
      • demo:3D Canvas 提高为合成层
    • 硬件加快的插件,比如 flash 等等
    • 在 DPI 较高的荧屏上,fix 定位的要素会活动地被升高到合成层中。但在 DPI 异常的低的装置上却并非如此,因为那些渲染层的晋升会使得字体渲染形式由子像素变为灰阶(详细内容请参考:Text Rendering)
    • 有 3D transform
    • backface-visibility 为 hidden
    • 对 opacity、transform、fliter、backdropfilter 应用了 animation 也许 transition(需即使 active 的 animation 恐怕 transition,当 animation 只怕 transition 效果未伊始或终止后,提高合成层也会失效)
      • demo:animation
      • demo:transition澳门葡京网上赌场 6
    • will-change 设置为 opacity、transform、top、left、bottom、right(个中 top、left 等急需设置醒目标原则性属性,如 relative 等)demo
  • 子孙成分原因
    • 有合成层后代同时本身有 transform、opactiy(小于 一)、mask、fliter、reflection 属性 demo
    • 有合成层后代同时作者 overflow 不为 visible(尽管自个儿是因为料定的固化因素发生的 SelfPaintingLayer,则须要 z-index 不为 auto) demo
    • 有合成层后代同时本人 fixed 定位 demo
    • 有 3D transfrom 的合成层后代同时自个儿有 preserves-3d 属性 demo
    • 有 3D transfrom 的合成层后代同时本身有 perspective 属性 demo
  • overlap 重叠原因为什么会因为重叠原由此爆发合成层呢?举个简易的板栗。澳门葡京网上赌场 7青蓝的矩形重叠在浅暗绿矩形之上,同时它们的父成分是一个GraphicsLayer。此时借使灰黄矩形为一个 GraphicsLayer,假使 overlap 不能够提高合成层的话,那么灰黄矩形不会提高为合成层,也就能够和父成分公用一个GraphicsLayer。澳门葡京网上赌场 8那时候,渲染顺序就能发出错误,因而为有限支撑渲染顺序,overlap 也化为了合成层发生的原由,也正是之类的通常化境况。澳门葡京网上赌场 9自然 overlap 的由来也会细分为几类,接下去大家会详细看下。
    • 臃肿或许说部分重叠在二个合成层之上。那怎么样究竟重叠呢,最常见和轻巧掌握的就是因素的 border box(content padding border) 和合成层的有重合,比如:demo,当然 margin area 的交汇是对事情没有什么益处的(demo)。其余的还有部分不遍布的图景,也总算同合成层重叠的尺度,如下:
      • filter 效果同合成层重叠 demo
      • transform 转变后同合成层重叠 demo
      • overflow scroll 情形下同合成层重叠。即假若二个 overflow scroll(不管 overflow:auto 还是 overflow:scrill,只倘若能 scroll 就能够) 的成分同1个合成层重叠,则其可视子成分也同该合成层重叠 demo
    • 1旦重叠在三个合成层之上(assumedOverlap)。这么些原因听上去有点虚,什么叫即便重叠?其实也比较好通晓,比如多个要素的 CSS 动画成效,动画运转时期,成分是有望和别的因素有重叠的。针对于那种场地,于是就有了 assumedOverlap 的合成层发生原因,示例可知:demo。在本 demo 中,动画成分视觉上并从未和其兄弟成分重叠,但因为 assumedOverlap 的来头,其兄弟成分依然进步为了合成层。供给专注的是该原因下,有2个很相当的事态:如果合成层有内联的 transform 属性,会招致其兄弟渲染层 assume overlap,从而晋级为合成层。比方:demo。

▪ Style:计算样式,那么些进度是凭借 CSS 采用器,对各种 DOM 成分相称对应的 CSS 样式。这一步停止之后,就分明了种种 DOM 元素上该采用什么 CSS 样式规则。

* 解析HTML(HTML Parser)

层压缩

大约周围的某个合成层的升高原因如上所说,你会发觉,由于重叠的由来,大概轻易就能够时有爆发出大气合成层来,而种种合成层都要耗费CPU 和内存能源,岂不是严重影响页面质量。这点浏览器也设想到了,由此就有了层压缩(Layer Squashing)的管理。借使七个渲染层同一个合成层重叠时,那些渲染层会被减去到3个GraphicsLayer 中,防止御出于重叠原因促成大概出现的“层爆炸”。具体能够看如下 demo。一起先,铁锈棕方块由于
translateZ 提高为了合成层,其余的正方成分因为重叠的因由,被削减了一同,大小便是带有那三 个方块的矩形大小。

澳门葡京网上赌场 10

当我们 hover 油红方块时,会给其设置 translateZ 属性,导致浅灰方块也被提高为合成层,则剩下的四个被缩减到了协同,大小就收缩为涵盖这二 个方块的矩形大小。

澳门葡京网上赌场 11

理所当然,浏览器的自动的层压缩也不是文武兼备的,有不少一定情景下,浏览器是力不从心开始展览层压缩的,如下所示,而这几个情状也是大家相应尽量幸免的。(注:以下境况都以遵照重叠原由此言)

  • 不能够展开会打破渲染顺序的滑坡(squashingWouldBreakPaintOrder)示举个例子下:demo
CSS

#ancestor { -webkit-mask-image:
-webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); }
#composited { width: 100%; height: 100%; transform: translateZ(0);
} #container { position: relative; width: 400px; height: 60px;
border: 1px solid black; } #overlap-child { position: absolute;
left: 0; top: 0 ; bottom: 0px; width: 100%; height: 60px;
background-color: orange; }

<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-5b8f6d201886f149137440-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-23">
23
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-24">
24
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201886f149137440-25">
25
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201886f149137440-26">
26
</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-5b8f6d201886f149137440-1" class="crayon-line">
  #ancestor {
</div>
<div id="crayon-5b8f6d201886f149137440-2" class="crayon-line crayon-striped-line">
    -webkit-mask-image: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
</div>
<div id="crayon-5b8f6d201886f149137440-3" class="crayon-line">
  }
</div>
<div id="crayon-5b8f6d201886f149137440-4" class="crayon-line crayon-striped-line">
  
</div>
<div id="crayon-5b8f6d201886f149137440-5" class="crayon-line">
  #composited {
</div>
<div id="crayon-5b8f6d201886f149137440-6" class="crayon-line crayon-striped-line">
    width: 100%;
</div>
<div id="crayon-5b8f6d201886f149137440-7" class="crayon-line">
    height: 100%;
</div>
<div id="crayon-5b8f6d201886f149137440-8" class="crayon-line crayon-striped-line">
    transform: translateZ(0);
</div>
<div id="crayon-5b8f6d201886f149137440-9" class="crayon-line">
  }
</div>
<div id="crayon-5b8f6d201886f149137440-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d201886f149137440-11" class="crayon-line">
  #container {
</div>
<div id="crayon-5b8f6d201886f149137440-12" class="crayon-line crayon-striped-line">
    position: relative;
</div>
<div id="crayon-5b8f6d201886f149137440-13" class="crayon-line">
    width: 400px;
</div>
<div id="crayon-5b8f6d201886f149137440-14" class="crayon-line crayon-striped-line">
    height: 60px;
</div>
<div id="crayon-5b8f6d201886f149137440-15" class="crayon-line">
    border: 1px solid black;
</div>
<div id="crayon-5b8f6d201886f149137440-16" class="crayon-line crayon-striped-line">
  }
</div>
<div id="crayon-5b8f6d201886f149137440-17" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d201886f149137440-18" class="crayon-line crayon-striped-line">
  #overlap-child {
</div>
<div id="crayon-5b8f6d201886f149137440-19" class="crayon-line">
    position: absolute;
</div>
<div id="crayon-5b8f6d201886f149137440-20" class="crayon-line crayon-striped-line">
    left: 0;
</div>
<div id="crayon-5b8f6d201886f149137440-21" class="crayon-line">
    top: 0 ;
</div>
<div id="crayon-5b8f6d201886f149137440-22" class="crayon-line crayon-striped-line">
    bottom: 0px;
</div>
<div id="crayon-5b8f6d201886f149137440-23" class="crayon-line">
    width: 100%;
</div>
<div id="crayon-5b8f6d201886f149137440-24" class="crayon-line crayon-striped-line">
    height: 60px;
</div>
<div id="crayon-5b8f6d201886f149137440-25" class="crayon-line">
    background-color: orange;
</div>
<div id="crayon-5b8f6d201886f149137440-26" class="crayon-line crayon-striped-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>




XHTML

&lt;div id="container"&gt; &lt;div id="composited"&gt;Text behind
the orange box.&lt;/div&gt; &lt;div id="ancestor"&gt; &lt;div
id="overlap-child"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

<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-5b8f6d201887b075031864-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201887b075031864-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201887b075031864-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201887b075031864-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d201887b075031864-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d201887b075031864-6">
6
</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-5b8f6d201887b075031864-1" class="crayon-line">
&lt;div id=&quot;container&quot;&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-2" class="crayon-line crayon-striped-line">
  &lt;div id=&quot;composited&quot;&gt;Text behind the orange box.&lt;/div&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-3" class="crayon-line">
  &lt;div id=&quot;ancestor&quot;&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-4" class="crayon-line crayon-striped-line">
    &lt;div id=&quot;overlap-child&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-5" class="crayon-line">
  &lt;/div&gt;
</div>
<div id="crayon-5b8f6d201887b075031864-6" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • video 元素的渲染层不可能被压缩同时也无能为力将其他渲染层压缩到 video 所在的合成层上(squashingVideoIsDisallowed)demo
  • iframe、plugin 的渲染层无法被缩减同时也无能为力将其余渲染层压缩到其所在的合成层上(squashingLayoutPartIsDisallowed)demo
  • 没辙回落有 reflection 属性的渲染层(squashingReflectionDisallowed)demo
  • 没辙回落有 blend mode 属性的渲染层(squashingBlendingDisallowed)demo
  • 当渲染层同合成层有两样的剪裁容器(clipping container)时,该渲染层不可能回落(squashingClippingContainerMismatch)。示比如下:demo
CSS

.clipping-container { overflow: hidden; height: 10px;
background-color: blue; } .composited { transform: translateZ(0);
height: 10px; background-color: red; } .target { position:absolute;
top: 0px; height:100px; width:100px; background-color: green; color:
#fff; }

<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-5b8f6d2018880297868155-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018880297868155-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018880297868155-23">
23
</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-5b8f6d2018880297868155-1" class="crayon-line">
.clipping-container {
</div>
<div id="crayon-5b8f6d2018880297868155-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-3" class="crayon-line">
    overflow: hidden;
</div>
<div id="crayon-5b8f6d2018880297868155-4" class="crayon-line crayon-striped-line">
    height: 10px; 
</div>
<div id="crayon-5b8f6d2018880297868155-5" class="crayon-line">
    background-color: blue;
</div>
<div id="crayon-5b8f6d2018880297868155-6" class="crayon-line crayon-striped-line">
  }
</div>
<div id="crayon-5b8f6d2018880297868155-7" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-8" class="crayon-line crayon-striped-line">
  .composited {
</div>
<div id="crayon-5b8f6d2018880297868155-9" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-10" class="crayon-line crayon-striped-line">
    transform: translateZ(0); 
</div>
<div id="crayon-5b8f6d2018880297868155-11" class="crayon-line">
    height: 10px; 
</div>
<div id="crayon-5b8f6d2018880297868155-12" class="crayon-line crayon-striped-line">
    background-color: red;
</div>
<div id="crayon-5b8f6d2018880297868155-13" class="crayon-line">
  }
</div>
<div id="crayon-5b8f6d2018880297868155-14" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-15" class="crayon-line">
  .target {
</div>
<div id="crayon-5b8f6d2018880297868155-16" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d2018880297868155-17" class="crayon-line">
    position:absolute; 
</div>
<div id="crayon-5b8f6d2018880297868155-18" class="crayon-line crayon-striped-line">
    top: 0px; 
</div>
<div id="crayon-5b8f6d2018880297868155-19" class="crayon-line">
    height:100px; 
</div>
<div id="crayon-5b8f6d2018880297868155-20" class="crayon-line crayon-striped-line">
    width:100px; 
</div>
<div id="crayon-5b8f6d2018880297868155-21" class="crayon-line">
    background-color: green;
</div>
<div id="crayon-5b8f6d2018880297868155-22" class="crayon-line crayon-striped-line">
    color: #fff;
</div>
<div id="crayon-5b8f6d2018880297868155-23" class="crayon-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>




XHTML

&lt;div class="clipping-container"&gt; &lt;div
class="composited"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div
class="target"&gt;不会被压缩到 composited div 上&lt;/div&gt;

<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-5b8f6d2018884301689224-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018884301689224-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2018884301689224-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2018884301689224-4">
4
</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-5b8f6d2018884301689224-1" class="crayon-line">
&lt;div class=&quot;clipping-container&quot;&gt;
</div>
<div id="crayon-5b8f6d2018884301689224-2" class="crayon-line crayon-striped-line">
  &lt;div class=&quot;composited&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6d2018884301689224-3" class="crayon-line">
&lt;/div&gt;
</div>
<div id="crayon-5b8f6d2018884301689224-4" class="crayon-line crayon-striped-line">
&lt;div class=&quot;target&quot;&gt;不会被压缩到 composited div 上&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


本例中 .target 同 合成层 `.composited` 重叠,但是由于
.composited`在一个 overflow: hidden 的容器中,导致 .target 和合成层有不同的裁剪容器,从而 `.target` 无法被压缩。`
  • 相对于合成层滚动的渲染层不或许被削减(scrollsWithRespectToSquashingLayer)示举个例子下:demo

CSS

body { height: 1500px; overflow-x: hidden; } .composited { width: 50px; height: 50px; background-color: red; position: absolute; left: 50px; top: 400px; transform: translateZ(0); } .overlap { width: 200px; height: 200px; background-color: green; position: fixed; left: 0px; top: 0px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
    height: 1500px;
    overflow-x: hidden;
  }
 
  .composited {
 
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 50px;
    top: 400px;
    transform: translateZ(0);
  }
 
  .overlap {
    width: 200px;
    height: 200px;
    background-color: green;
    position: fixed;
    left: 0px;
    top: 0px;
  }

XHTML

<div class="composited"></div> <div class="overlap"></div>

1
2
<div class="composited"></div>
<div class="overlap"></div>

本例中,红色的 .composited提升为了合成层,绿色的.overlapfix 在页面顶部,一开始只有.composited合成层。

![]()

当滑动页面,.overlap重叠到.composited上时,.overlap` 会因重叠原因进步为合成层,同时,因为相对于合成层滚动,因而不可能被减弱。

![]()

  • 当渲染层同合成层有例外的全体 opacity 的祖先层(一个设置了 opacity 且小于 一,三个没有设置 opacity,也算是分化)时,该渲染层不能回落(squashingOpacityAncestorMismatch,同 squashingClippingContainerMismatch)demo
  • 当渲染层同合成层有差别的有着 transform 的先世层时,该渲染层不可能回落(squashingTransformAncestorMismatch,同上) demo
  • 当渲染层同合成层有两样的全体 filter 的先人层时,该渲染层不能够回落(squashingFilterAncestorMismatch,同上)demo
  • 当覆盖的合成层正在运作动画时,该渲染层不能够回落(squashingLayerIsAnimating),当动画未起始依旧运维达成之后,该渲染层才得以被压缩 demo澳门葡京网上赌场 12

▪ Layout:布局,上一步鲜明了种种 DOM 成分的样式规则,这一步便是具体测算每一个 DOM 元素最终在荧屏上浮现的轻重缓急和岗位。web 页面夷则素的布局是周旋的,由此三个要素的布局爆发变化,会联合浮动地吸引任何因素的布局发生变化。比如, 成分的肥瘦的浮动会影响其子成分的大幅,其子成分宽度的变通也会持续对其外甥成分发生震慑。由此对此浏览器来讲,布局进度是日常发生的。

* 构建DOM树(DOM Tree)

怎么着查看合成层

选拔 Chrome DevTools 工具来查看页面中合成层的事态。

相比较简单的方式是开荒 DevTools,勾选上 Show layer borders

澳门葡京网上赌场 13

其间,页面上的合成层会用浅石绿边框框出来。

澳门葡京网上赌场 14

理所当然,尤其详细的新闻能够通过 Timeline 来查看。

每1个独自的帧,看到种种帧的渲染细节:

澳门葡京网上赌场 15

点击之后,你就能够在视图中看看二个新的选项卡:Layers。

澳门葡京网上赌场 16

点击这几个 Layers 选项卡,你会面到1个新的视图。在那个视图中,你能够对那壹帧中的全数合成层进行扫描、缩放等操作,同时仍是能够观望种种渲染层被创制的来头。

澳门葡京网上赌场 17

有了这一个视图,你就会通晓页面中到底有微微个合成层。假如你在对页面滚动或渐变效果的性质分析中发觉 Composite 进度花费了太多日子,那么你能够从这些视图里见到页面中有微微个渲染层,它们为什么被创制,从而对合成层的数额进行优化。

▪ Paint:绘制,本质上正是填充像素的长河。包含绘制文字、颜色、图像、边框和影子等,也正是叁个DOM 成分全数的可视效果。一般的话,那些绘制进度是在三个层上形成的。

* 构建CSSOM树(Style)

天性优化

升迁为合成层简单说来有以下几点好处:

  • 合成层的位图,会交由 GPU 合成,比 CPU 管理要快
  • 当要求 repaint 时,只要求 repaint 本人,不会潜移默化到别的的层
  • 对于 transform 和 opacity 效果,不会触发 layout 和 paint

应用合成层对于进步页面质量方面有一点都不小的功效,因而大家也计算了一下几点优化提议。

▪ Composite:渲染层合并,由上一步可见,对页面中 DOM 成分的绘图是在七个层上实行的。在各类层上成功绘制进程之后,浏览器会将全数层依照客观的一1合并成1个图层,然后展现在显示器上。对于有岗位重叠的成分的页面,这么些历程越是关键,因为假若图层的合并顺序出错,将会招致成分呈现卓殊。

* 创设渲染树(Render Tree)

升级动画效果的要素

合成层的功利是不会影响到别的因素的绘图,因而,为了减小动画成分对其他因素的影响,从而收缩paint,大家供给把动画效果中的成分升高为合成层。

晋级合成层的最棒方法是使用 CSS 的 will-change 属性。从上壹节合成层发生原因中,可以知道 will-change 设置为 opacity、transform、top、left、bottom、right 能够将成分升高为合成层。

CSS

#target { will-change: transform; }

1
2
3
#target {
  will-change: transform;
}

其相配如下所示:
澳门葡京网上赌场 18

对于那多少个目前还不帮助 will-change 属性的浏览器,近来常用的是采纳三个 3D transform 属性来强制提高为合成层:

CSS

#target { transform: translateZ(0); }

1
2
3
#target {
  transform: translateZ(0);
}

但需求注意的是,不要创制太多的渲染层。因为每创设四个新的渲染层,就代表新的内部存储器分配和更千头万绪的层的管住。之后我们会详细琢磨。

一经你已经把三个要素放到1个新的合成层里,那么能够应用 Timeline 来确认这么做是或不是确实革新了渲染品质。别盲目升高合成层,一定要分析其实际质量表现。

理所当然,本文大家只来关爱 Composite 部分。

* 页面布局(Layout)

运用 transform 大概 opacity 来贯彻动画效果

文章最早先,大家讲到了页面展现出来所经历的渲染流水生产线,其实从性质方面思虑,最了不起的渲染流水生产线是从未布局和制图环节的,只须求做合成层的合并就可以:

澳门葡京网上赌场 19

为了促成上述作用,就要求只行使那多少个仅触发 Composite 的性质。目前,唯有五个性格是满意这么些条件的:transforms 和 opacity。更详尽的音讯能够查阅 CSS Triggers。

注意:元素进步为合成层后,transform 和 opacity 才不会触发 paint,假设不是合成层,则其仍然会触发 paint。具体见如下四个 demo。

  • demo 1:transform澳门葡京网上赌场 20
  • demo 2:opacity澳门葡京网上赌场 21

能够看到未晋级 target element 为合成层,transform 和 opacity 依然会触发 paint。

在座谈 Composite 以前,有不可缺少先不难精通下一些浏览器(本文只是针对性 Chrome 来讲)的渲染原理,方便对未来有的概念的精晓。越多详细的剧情能够参考 GPU Accelerated Compositing in Chrome

* 绘制渲染树(Painting)

缩减绘制区域

对于不供给重新绘制的区域应尽量防止绘制,以调整和减少绘制区域,比如三个 fix 在页面顶部的定点不变的导航 header,在页面内容有些区域 repaint 时,整个显示屏包蕴 fix 的 header 也会被重绘,见 demo,结果如下:

澳门葡京网上赌场 22

而对于固定不改变的区域,大家期待其并不会被重绘,因而能够透过在此以前的点子,将其晋级为单身的合成层。

减去绘制区域,需求密切分析页面,区分绘制区域,减弱重绘区域依旧制止重绘。

注:由于 Chrome 对 Blank 引擎有个别落成的修改,某个大家事先熟识的类名有了调换,比如 RenderObject 变成了 LayoutObject,RenderLayer 变成了 PaintLayer。感兴趣的看以参阅 Slimming Paint。

那一进度可在chrome开辟者工具的年月线中观看:

合理管理合成层

看完下面的稿子,你会意识升高合成层会达到更加好的性格。那看起来尤其迷人,不过难点是,创制一个新的合成层并不是无需付费的,它得消耗额外的内部存款和储蓄器和治本能源。实际上,在内部存款和储蓄器能源有限的装置上,合成层带来的习性改正,恐怕远远赶不上过多合成层费用给页面品质带来的负面影响。同时,由于各类渲染层的纹路都急需上传播 GPU 管理,由此大家还索要思考 CPU 和 GPU 之间的带宽难题、以及有多大内部存款和储蓄器供 GPU 管理那么些纹理的主题材料。

对于合成层占用内部存款和储蓄器的主题素材,我们大概做了多少个 demo 进行了印证。

demo 1 和 demo 2 中,会创立 两千 个同样的 div 成分,不一样的是 demo 2 中的成分通过 will-change 都进级为了合成层,而多少个 demo 页面包车型客车内部存款和储蓄器消耗却有很明显的差别。

澳门葡京网上赌场 23

在浏览器中,页面内容是储存为由 Node 对象组成的树状结构,相当于 DOM 树。每三个 HTML element 成分都有一个 Node 对象与之相应,DOM 树的根节点长久都以 Document Node。这点信任大家都很熟练了,但实质上,从 DOM 树到最后的渲染,须要开始展览局地转移映射。

 澳门葡京网上赌场 24

防护层爆炸

由此事先的介绍,大家领略同合成层重叠也会使成分升高为合成层,纵然有浏览器的层压压编写制定,不过也有过多不大概开始展览削减的景况。相当于说除了大家显式的宣示的合成层,还也许由于重叠原因不经意间发生局地不在预期的合成层,极端一点可能会发出大批量的额外合成层,现身层爆炸的境况。大家差不多写了二个但是点但其实在大家的页面中比较遍布的 demo。

CSS

@-webkit-keyframes slide { from { transform: none; } to { transform: translateX(100px); } } .animating { width: 300px; height: 30px; background-color: orange; color: #fff; -webkit-animation: slide 5s alternate linear infinite; } ul { padding: 5px; border: 1px solid #000; } .box { width: 600px; height: 30px; margin-bottom: 5px; background-color: blue; color: #fff; position: relative; /* 会导致力不从心回落:squashingClippingContainerMismatch */ overflow: hidden; } .inner { position: absolute; top: 2px; left: 2px; font-size: 16px; line-height: 16px; padding: 2px; margin: 0; background-color: green; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@-webkit-keyframes slide {
    from { transform: none; }
    to { transform: translateX(100px); }
    }
    .animating {
    
    width: 300px;
    height: 30px;
    background-color: orange;
    color: #fff;
      -webkit-animation: slide 5s alternate linear infinite;
    }
 
  ul {
 
    padding: 5px;
    border: 1px solid #000;
  }
 
    .box {
 
    width: 600px;
    height: 30px;
    margin-bottom: 5px;
    background-color: blue;
    color: #fff;
    position: relative;
    /* 会导致无法压缩:squashingClippingContainerMismatch */
    overflow: hidden;
    }
 
    .inner {
      position: absolute;
      top: 2px;
      left: 2px;
      font-size: 16px;
      line-height: 16px;
      padding: 2px;
      margin: 0;
      background-color: green;
    }

XHTML

<!-- 动画合成层 --> <div class="animating">composited animating</div> <ul> <!-- assume overlap --> <li class="box"> <!-- assume overlap --> <p class="inner">asume overlap, 因为 squashingClippingContainerMismatch 不能回落</p> </li> ... </ul>

1
2
3
4
5
6
7
8
9
10
11
<!-- 动画合成层 -->
<div class="animating">composited animating</div>
<ul>
  <!-- assume overlap -->
  <li class="box">
    <!-- assume overlap -->
    <p class="inner">asume overlap, 因为 squashingClippingContainerMismatch 无法压缩</p>
  </li>
  
  ...
</ul>

demo 中,.animating 的合成层在运行动画,会招致 .inner 成分因为上文介绍过的 assumedOverlap 的原故,而被提高为合成层,同时,.inner 的父成分 .box 设置了 overflow: hidden,导致 .inner 的合成层因为 squashingClippingContainerMismatch 的来由,不只怕回落,就出现了层爆炸的主题材料。

澳门葡京网上赌场 25

那种气象平时在大家的职业中依旧很遍布的,比方 slider list 的布局,1旦满足了不能实行层压缩的情况,就很轻易并发层爆炸的题目。

杀鸡取卵层爆炸的难点,最好方案是打破 overlap 的基准,相当于说让任何因素不要和合成层成分重叠。对于上述的示范,大家能够将 .animation 的 z-index 提高。修改后 demo

CSS

.animating { ... /* 让任何因素不和合成层重叠 */ position: relative; z-index: 1; }

1
2
3
4
5
6
7
.animating {
  
  ...
  /* 让其他元素不和合成层重叠 */
  position: relative;
  z-index: 1;
}

此时,就只有 .animating 进步为合成层,如下:

澳门葡京网上赌场 26

还要,内部存款和储蓄器占用相比较以前也降低了不少。

澳门葡京网上赌场 27

假诺受限于视觉须要等成分,其他因素必必要覆盖在合成层之上,这应该尽量防止不能够层压缩情形的产出。针对上述示范中,不能够层压缩的气象(squashingClippingContainerMismatch),大家能够将 .boxoverflow: hidden 去掉,那样就能够运用浏览器的层压缩了。修改后 demo

这时,由于第三个 .box 因为 squashingLayerIsAnimating 的原委无法回落,别的的都被减少到了同步。

澳门葡京网上赌场 28

再正是,内部存款和储蓄器占用比较后边也暴跌了无尽。

澳门葡京网上赌场 29

澳门葡京网上赌场 30

这边大家简要说一下之下两个概念:

最后

事先有线支付时,大诸多人都很喜欢使用 translateZ(0) 来拓展所谓的硬件加快,以进步质量,不过品质优化并不曾所谓的“银弹”,translateZ(0) 不是,本文列出的优化提出也不是。抛开了对页面包车型客车具体分析,任何的性情优化都以站不住脚的,盲目的应用一些优化措施,结果可能会差强人意。由此实际的去分析页面包车型客车莫过于质量表现,不断的革新测试,才是毋庸置疑的优化渠道。

DOM 树中得每一个 Node 节点都有二个应和的 LayoutObject 。LayoutObject 知道如何在显示屏上 paint Node 的内容。

* 布局(layout)

参考

  • PaintLayer.h
  • PaintLayer.cpp
  • CompositingReasons.cpp
  • CompositingReasons.h
  • CompositingRequirementsUpdater.cpp
  • chrome layout test
  • 澳门葡京网上赌场,Slimming Paint
  • The stacking contest
  • Blink Compositing Update: Recap and Squashing
  • GPU Accelerated Compositing in Chrome
  • CSS Triggers
  • google render performance

    1 赞 6 收藏 评论

澳门葡京网上赌场 31

貌似的话,具备同样的坐标空间的 LayoutObjects,属于同3个渲染层(PaintLayer)。PaintLayer 最初是用来兑现 stacking contest,以此来担保页面成分以精确的逐一合成(composite),那样才能科学的显得成分的交汇以及半晶莹剔透成分等等。因而满足形成层叠上下文条件的 LayoutObject 一定会为其创设新的渲染层,当然还有任何的部分出奇处境,为一些出奇的 LayoutObjects 创设多少个新的渲染层,比方 overflow != visible 的成分。依照创设 PaintLayer 的原故莫衷1是,可以将其分为常见的 三 类:

布局也号称重排或回流,布局流程输出的是1个“盒模型”,它会准确地捕获每种成分在视口内的可靠地方和尺寸,HTML就是应用基于流的布局模型,页面成分的改造频仍恐怕导致回流的爆发,而回流的频发爆发亦是影响页面质量的要紧因素,此外,处于流前置位平时不会潜移默化前置位的几何特征,故对后置位的修改往往比对前置位的改造对页面全部的熏陶要低。

▪ NormalPaintLayer

* 绘制(paint)

根元素

绘图便是对DOM所分割的层(layer)举办相应的绘图,页面包车型客车回流一般都会伴随珍视绘,但重绘行为的产出不自然伴随回流。

有门到户说的永世属性(relative、fixed、sticky、absolute)

* 渲染层

透明的(opacity 小于 1)

层(layer)的定义对于有布署性基础的人的话应该不生分,我们平面直观所观看的图像是依附空间图层的重合获得的,一般的话,拥有同样坐标空间的节点属于同2个渲染层。渲染层最初是用来贯彻层叠上下文,以此来担保页面成分以科学的逐条合成(composite),完结半透明重叠等功用。

有 CSS 滤镜

开创渲染层的规格:

有 CSS mask 属性

  * 根元素(HTML)

有 CSS mix-blend-mode 属性(不为 normal)

  * 有显明的position属性(relative,fixed,sticky,absolute)

有 CSS transform 属性

  * 透明的(opacity小于1)

backface-visibility 属性为 hidden

  * 有css滤镜(filter)

有 CSS reflection 属性

  * 有css mask 属性

有 CSS column-count 属性或许 有 CSS column-width 属性

  * 当前有对于 opacity,transform,fliter,backdrop-filter 应用动画

此时此刻有对于 opacity、transform、fliter、backdrop-filter 应用动画

  * overflow属性不为visible

▪ OverflowClipPaintLayer

  * 等等......

overflow 不为 visible

* 合成层

▪ NoPaintLayer

合成层是新鲜的渲染层,每种合成层有独立的绘图层,绘图层中的绘图上下文担任输出该层的位图,位图积累在共享内部存款和储蓄器中,作为纹理上传到GPU,最后由GPU将八个位图举行合成,最终绘制到显示器上,而绝对于合成层,一般的渲染层是和其首先个具备绘图层的父层共用叁个的绘图层的,升高为合成层后当需求repaint或reflow自身,不影响其余层,此外,合成层的位图会直接交由GPU合成管理,功效比CPU高。

无需 paint 的 PaintLayer,比方1个不曾视觉属性(背景、颜色、阴影等)的空 div。

渲染层提高为合成层的接触原因:

满足上述口径的 LayoutObject 会具有独立的渲染层,而别的的 LayoutObject 则和其首先个具有渲染层的父成分共用1个。

  * 直接原因

或多或少特殊的渲染层会被认为是合成层(Compositing Layers),合成层具备独立的 GraphicsLayer,而任何不是合成层的渲染层,则和其首先个具有 GraphicsLayer 父层公用贰个。

    * iframe video canvas flash 元素 有 3D transform

每个 GraphicsLayer 都有三个 GraphicsContext,GraphicsContext 会肩负输出该层的位图,位图是积存在共享内部存款和储蓄器中,作为纹理上传到 GPU 中,最终由 GPU 将多少个位图举行合成,然后 draw 到荧屏上,此时,大家的页面也就显现到了显示屏上。

    * backface-visibility 为 hidden

渲染层进步为合成层的来头有瞬间二种:

    * 对 opacity、transform、fliter、backdropfilter 应用了 animation 或 transition

注:渲染层升高为合成层有3个先决条件,该渲染层必须是 SelfPaintingLayer(基本可感觉是上文介绍的 NormalPaintLayer)。以下所商量的渲染层提高为合成层的状态都以在该渲染层为 SelfPaintingLayer 前提下的。

    * will-change(设置为 opacity、transform、top、left、bottom、right(个中 top、left 等须要安装明显的一定属性,如 relative 等))

▪ 直接原因(direct reason)

   * 后代原因

硬件加快的 iframe 成分(比方 iframe 嵌入的页面中有合成层)demo

    * 有合成层后代同时本身有 transform、opactiy(小于 壹)、mask、fliter、reflection 属性

video 元素

    * 有合成层后代同时本人 overflow 不为 visible

覆盖在 video 成分上的录像调节栏

    * 有合成层后代同时作者 fixed 定位

3D 或许 硬件加快的 二D Canvas 成分

    * 有 3D transform 的合成层后代同时自己有 preserves-三d 属性

demo:普通 贰D Canvas 不会提高为合成层

    * 有 3D transform 的合成层后代同时本人有 perspective 属性

demo:3D Canvas 提高为合成层

  * 重叠原因

硬件加快的插件,举个例子 flash 等等

    * 成分的 border box(content padding border) 和合成层的有重叠,margin 的重合无效

在 DPI 较高的荧屏上,fix 定位的成分会自动地被进步到合成层中。但在 DPI 比较低的装置上却并非如此,因为这些渲染层的晋升会使得字体渲染格局由子像素变为灰阶(详细内容请参见:Text Rendering)

    * 动画运行时期,成分可能和别的因素有臃肿

有 3D transform

 

backface-visibility 为 hidden

二.影响页面品质的操作及优化分析

对 opacity、transform、fliter、backdropfilter 应用了 animation 或然transition(需固然 active 的 animation 或许 transition,当 animation 可能 transition 效果未初叶或结束后,提高合成层也会失灵)

* 频仍操作DOM成分

demo:animation

选取js脚本频仍地操作DOM元素是震慑页面质量的一大因素,频仍地对DOM举办操作可能导致页面重绘和回流的屡屡产生,从而致使页面卡顿和性质消耗难点,从细节上可按如下方法开始展览优化:

demo:transition

一)使用文书档案片段

澳门葡京网上赌场 32

var fragment = document.createDocumentFragment();

//一些基于fragment的大量DOM操作
......

document.getElementById('myElement').appendChild(fragment);

will-change 设置为 opacity、transform、top、left、bottom、right(其中top、left 等急需设置醒目标定势属性,如 relative 等)demo

贰)设置DOM成分的display样式为none再操作该因素

▪ 后代成分原因

var myElement = document.getElementById('myElement');
myElement.style.display = 'none';

//一些基于myElement的大量DOM操作
......

myElement.style.display = 'block';

有合成层后代同时自个儿有 transform、opactiy、mask、fliter、reflection 属性 demo

三)复制DOM成分到内部存款和储蓄器中再对其张开操作

本文由新浦京81707con发布于注册购买,转载请注明出处:前端性能优化之,无线性能优化

关键词: 新浦京81707con 基础技术 性能 Composite

上一篇:新葡亰娱乐场我就是要用CSS实现,H5移动端知识点

下一篇:没有了