在 Css 图层分析这方面,Chrome Devtools 属实不太行

发布日期:2022-06-18 17:04    点击次数:178


在 Css 图层分析这方面,Chrome Devtools 属实不太行

本文转载自微信公众号「神光的编程心事」,作家神说要有光zxg。转载本文请算计神光的编程心事公众号。

咱们通过 html、css 描摹页面,浏览器会瓦解然后一帧帧渲染,通过 js 变嫌 dom 后,浏览器会从头计较布局信息然后渲染。

dom 变嫌有高频低频之分,比如动画就要高频变嫌形貌,况兼当代浏览器都复古通过 GPU 做计较来加快渲染(硬件加快),若何轮廓高频计较和低频计较、CPU 渲染和 GPU 渲染呢?

谜底是图层(Layer),浏览器知道过不同的图层来渲染,临了兼并图层(Composite)成为一帧图像。

那什么形貌会新建图层呢?

人人可能听过用 3D transform 会新建图层,用 will-change 会新建图层等等,然则是否确凿新建了图层心里并没底。

其实什么形貌会创建图层压根不必记,共享给人人一个图层分析的利器:Safari Devtools 的 Layers 用具。

没听错,如实是 safari 的,不是 chrome devtools,图层分析上 chrome devtools 不太行,具体情况背面说。

Safari Devtools 的图层分析用具

领先,Safari 的 Devtools 要手动开启下:

掀开 Devtools,这个层即是今天的主角:

以掘金为例:

中间区域展示的即是页面中的图层。

右边的三个按钮鉴识是知道边框、绘图时知道红色配景,知道页面中通盘的层,都勾选上。

知道边框即是会给每个图层加上绿色边框, 人人妻人人澡人人爽人人精品不错直觉地看到有哪些区域是在单独的图层渲染的。

知道页面中通盘的层会在右边列出页面中通盘图层的根元素,不错看到页面上有 7 个图层,这些图层占据了 47M 的内存。

绘图时知道红色配景即是在每帧渲染都会闪一下,让人能嗅觉出来做了新一帧的渲染。比如底下这个 gif:

然后,重心来了,这些图层都是为什么创建的呢?什么形貌导致的呢?

点击每一个图层,都不错看到导致图层创建的原因!

比如 html,是因为是根元素创建的图层,这个没啥好说的。

侧边栏是因为有 z-index 为负值的子元素是以创建的图层。

导航栏是因为 3 个原因创建的图层:元素有 3D 交流,有 position:fixed 的形貌,元素可能有其他元素叠加。

3D 交流会创建图层是因为会用 GPU 做计较和渲染;position:fixed 会创建图层是因为脱离了文档流,www.色而与其他元素叠加会创建图层也很好贯穿,叠加了嘛,一个图层渲染不了,是以在单独的图层渲染。

随机 will-change 导致的图层新建并莫得?

那么咱们试一下,咱们找个元素加上 will-change 的形貌:

看,绿框了,这讲明新建了图层,咱们去 Layers 看下原因。

图层数从 7 个酿成 8 个了。原因即是 will-change:

will-change 只须 opacity、transform、transform-style、perspective、filter、backdrop-filter 这 6 个属性值的时刻才会新建图层。这点可能人人都不清澈吧,layers 用具获胜教导了。

咱们梳理下会导致图层创建的原因:

根元素 有 z-index 是负值的子元素 有 3D 交流 position:fixed 与其他元素可能叠加 will-change 形貌的值为 opacity、transform、transform-style、perspective、filter、backdrop-filter 这 6 个之一

诚然,这些压根不必记,用 Safari Devtools 不错获胜把图层分析出来并给出原因。

况兼图层之间的高下关系也不错直觉的看出来:

是不是超便捷!

回偏执来,咱们再来聊下 Chrome Devtools,为什么不必它的呢?

 

因为它如实不咋好用。

Chrome Devtools 的图层分析用具

不是我挑升黑 Chrome Devtools 的 Layers 用具,如实是不咋滴:

领先,界面丑,杰出是知道通盘图层何处,莫得知道图层总和、占据的内存,也不可获胜跳到元素,这点不如 Safari Devtools:

对比下 safari 的:

最进军的是图层创建的原因知道的不行:

知道的信息不够友好:

有的致使都没知道原因:

轮廓看下来,在图层调试用具上,Safari Devtools 完胜!

诚然,Chrome Devtools 在其他的调试用具上如故很优秀的。

Safari Devtoos 在图层调试用具上如实很有亮点,这就像咱们的时间发展相同,不错不必每个方面都强,但一定要有一个方面是比拟凸起的亮点,这么才会比拟有竞争力。

扯远了,收。

转头

浏览器通过图层来组织不同元素的渲染。

3D 交流会导致创建图层、元素叠加会导致创建图层、will-change 为某些值时会导致创建图层,等等。

具体页面有哪些图层、导致图层创建的原因是什么,不错用 Safari Devtoos 恬逸的分析出来。

 

Chrome Devtools 也有 Layers 用具,但就像标题所说,在 css 图层分析这方面,Chrome Devtools 属实不太行。

 






Powered by 免费看小12萝裸体视频国产 @2013-2022 RSS地图 HTML地图

栏目分类

热点资讯

相关资讯