全面解析:HTML页面的加载全过程(六)--浏览器渲染之分层 - Layer

分层原因

在生成布局树之后,渲染进程会将一些复杂的3D动画、滚动条、高z-index的元素生成图层,并生成图层树交给GPU加速渲染。

页面设计复杂,并且交互效果多。如不分层,用户的一个简单交互将导致整个页面的重新渲染,效率低下。

分层好处

‌通过分层,浏览器可以将复杂的页面元素分离成不同的图层,每个图层可以独立地进行渲染和更新,从而减少重排和重绘的次数。例如,当用户滚动页面时,只有可视区域的内容会被重新绘制,而背景和其他固定位置的元素则不会重新绘制,这样可以显著提高页面的响应速度和流畅度‌

分层的好处在于,将来某一个层改变后,仅会对该层进行后续处理,从而提升效率。

现代浏览器都有分层功能,可通过控制台查看

1、chrome浏览器:moretools/Layers

全面解析:HTML页面的加载全过程(六)--浏览器渲染之分层 - Layer_第1张图片

2、Edge浏览器:–3D视图

全面解析:HTML页面的加载全过程(六)--浏览器渲染之分层 - Layer_第2张图片

全面解析:HTML页面的加载全过程(六)--浏览器渲染之分层 - Layer_第3张图片

有一些特定的属性和元素可以实例化一个层,包括videocanvas
任何 CSS 属性为opacity、3D transformwill-change的元素,
还有一些其他元素。这些节点将与子节点一起绘制到它们自己的层上

will-change‌属性详解

will-change‌是一个CSS属性,用于告知浏览器某个元素在未来可能会发生变化,从而让浏览器提前进行优化准备,以提高页面的渲染性能。

通常大多数元素例如

不会单独分为一层,但是如果它的内容经常需要更新、需要重新渲染,可以添加一个属性:will-change

语法说明

will-change: auto
will-change: scroll-position
will-change: contents
will-change: transform
will-change: opacity
will-change: left, top

will-change: unset
will-change: initial
will-change: inherit

具体解释:

auto:浏览器会根据情况,自行进行优化。

scroll-position:表示开发者将要改变元素的滚动位置。

content:表示开发者将要改变元素的内容。

解释:浏览器常将大部分不经常改变的元素缓存下来。但如果一个元素的内容不断发生改变,那么产生和维护这个缓存就是在浪费时间。此属性值可以减少浏览器对元素的缓存,或者完全避免缓存。变为从始至终都重新渲染元素。

注意:这个值会被应用到它所声明元素的子节点。在文档树较高的节点上使用,可能会对页面性能造成很大的影响。尽量在文档树最末端使用。

:表示开发者希望在不久后改变指定的属性名或者使之产生动画,比如transformopacity

注意事项

1、不要将will-change应用到太多元素上,过度使用可能会导致页面响应缓慢或消耗大量资源。

如: “* { will-change: transform, opacity /, …/; }”

2、当元素恢复到初始状态时,浏览器通常会丢弃之前的优化工作。但如果直接在样式表中显式声明了will-change属性,浏览器会保存优化工作更久。因此,在元素属性变化完成后最好移除 will-change 属性

var el = document.getElementById('element');
el.addEventListener('mouseenter', addwill);// 当鼠标移动到该元素上时,设置 will-change 属性
el.addEventListener('animationEnd', removewill);// 当 CSS 动画结束后清除 will-change 属性
function addwill() {
     this.style.willChange = 'transform, opacity';//可自定义属性值
}
function removewill() {
     this.style.willChange = 'auto';
}

3、给 will-change 属性足够的时间做准备

如果在动画开始的那一刻才添加 will-change 属性,是没有优化效果的。

一些优化是需要充分的准备时间的.

如当一个元素被点击时发生变化。那么就可以在 hover 事件上设置 will-change 属性。这能给浏览器提供大概200毫秒准备时间。因为相较之下,人类的响应速度较慢。

.element { transition: opacity .2s; opacity: 1; }
.element:hover { will-change: opacity; }
.element:active { opacity: .3; }

如果变化是发生在触发 hover 事件时,上边的做法就无法起到优化作用了。

但如在祖先元素上设置 will-change 属性,就可以给浏览器预留足够的准备时间。

.element { transition: opacity .2s; opacity: 1; }
.container:hover > .element { will-change: opacity; }
.element:hover { opacity: .3; }
示例:
分层

全面解析:HTML页面的加载全过程(六)--浏览器渲染之分层 - Layer_第4张图片

你可能感兴趣的:(html,前端)