首页 > 试题广场 >

下列说法错误的是：

[单选题]

下列说法错误的是：

在 Blink 和 WebKit 的浏览器中，某个元素具有 3D 或透视变换（perspective transform）的 CSS 属性，会让浏览器创建单独的图层。

我们平常会使用 left 和 top 属性来修改元素的位置，但 left 和 top 会触发重布局，取而代之的更好方法是使用 translate，这个不会触发重布局。

移动端要想动画性能流畅，应该使用 3D 硬件加速，因此最好给页面中的元素尽量添加 translate3d 或者 translateZ(0) 来触发 3D 硬件加速。

解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排。

查看正确选项

饮冰_

滥用硬件加速会导致严重性能问题，因为它增加了内存使用，并且它会导致移动端电池寿命减少。

发表于 2017-07-21 11:02:19 回复(0)

嘤嘤嘤护体！

非常详细的解释： https://segmentfault.com/a/1190000000490328#articleHeader4

发表于 2017-07-22 21:56:30 回复(3)

肖宇晨

1.浏览器在渲染一个页面时，会将页面分为很多个图层，每个图层上有多个节点，在渲染dom时，经历以下过程:

DOM分割图层 ------ 图层节点样式重计算(Recalculate style) ----- 为每个节点生成图形和位置 (Layout，回流/重排/重布局) ----- 将节点绘制并填充到图层中(Paint Setup和Paint, 重绘) ------ 图层作为纹理上传到CPU处理 ------ 结合多个图层到页面上生成最终屏幕图像(图层重组)

2.触发创建单独图层

①3D或透视变换(perspective transform) CSS属性

②opacity做css动画或使用一个动画webkit变换的元素

③z-index在复合层上面渲染的元素

④拥有3D上下文或加速2D上下文的<canvas>节点

⑤使用加速视频解码的<video>节点

故transform和opacity改变的仅是图层的结合不会触发回流和重绘：

opactity是GPU在绘画时简单的降低了之前已经画好的纹理的alpha值来达到效果，故不会触发回流和重绘

transform可以修改节点位置、旋转、大小等，使用left和top会触发重布局，修改时代价很大，故取而代之使用translate会提高性能

translate可以让浏览器创建图层，可以消除在动画开始之前的图层创建时间，使得动画尽快开始，不会随着抗锯齿而导出突变，但是创建过多的图层会导致崩溃所以要结合实际情况考虑，节制！

3.触发回流属性(修改节点大小和位置):

盒子模型相关属性、定位属性及浮动、节点内部文本结构(大小、排列方式)属性

4.触发重绘属性(节点内部渲染效果):

color、border-style、border-radius、visibility、text-decoration、background相关、outline相关、box-shadow

5.关于动画:

JS动画:

缺点：JS在浏览器的主线程中运行，其中还有很多需要运行的JS、样式计算、布局、绘制对其进行干扰，会导致线程堵塞(掉帧)

优点: 动画可控制

CSS动画:

缺点：缺乏对动画的控制

优点: 优化性能好，在主线程之外运行(丝滑)

发表于 2020-12-08 16:10:51 回复(7)

苏一恒(Mako)b站内推找我

A:浏览器渲染页面时会根据DOM通过不同的图层来叠加呈现出页面,对于某些属性如3D属性、硬件加速的<video>等都会创建新图层

B:盒子属性、内部结构属性、定位属性、浮动等.这些可能修改节点的大小和位置,都会触发重布局.

C:translate3d会添加新图层,过多的图层会使浏览器崩溃

D:层的重绘和重排是浏览器性能问题的很大影响因素

解读来源: https://segmentfault.com/a/1190000000490328#articleHeader4

发表于 2020-02-19 15:27:20 回复(0)

易_刺猬

过多触发3d加速，反而会影响性能。

http://blog.csdn.net/xiebaochun/article/details/50274963

编辑于 2018-06-10 18:08:32 回复(0)

Hayleyll

Translate不会引发重排因为 GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的(这里好像是只会触发自身的重排和重绘，但不会使其他元素发生重排)。如果你要使用硬件加速方式降低重排的影响，请不要过度使用，创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。 https://www.zhihu.com/question/400613871

编辑于 2020-08-13 00:25:57 回复(0)