网页渲染性能优化 —— 性能优化下，2024年最新2024春招面试技巧

最新推荐文章于 2024-05-03 19:50:15 发布

JavaScript高级

最新推荐文章于 2024-05-03 19:50:15 发布

阅读量737

点赞数 19

分类专栏： 2024年程序员学习文章标签：性能优化面试职场和发展

本文链接：https://blog.csdn.net/m0_60388419/article/details/137622010

版权

2024年程序员学习专栏收录该内容

272 篇文章 0 订阅

订阅专栏

本文介绍了如何通过3D变形和will-change属性提升页面元素的性能，以及如何避免过度提升导致的内存消耗和层爆炸问题。作者还分享了关于CompositedLayer管理和性能优化的最佳实践，包括合理使用will-change和层压缩技巧。

摘要由CSDN通过智能技术生成

}

对于不支持的浏览器，最简单的 hack 方法，莫过于使用 3D 变形来提升为 Composited Layer 了。

.element {

transform: translateZ(0);

}

根据上文所讲的例子，我们尝试使用 will-change 属性来让固定区域避免重绘。

性能优化

变动区域

首先，我们来看下没有经过优化的情况；顺带说明查看浏览器一帧绘制详情的过程。

打开控制台的 Performance 界面。
点击设置（标记 1），开启绘制分析仪（标记 2）。
启动 Record（标记 3），获取到想要的信息后，点击 Stop（标记 4），停止 Record。
点击这一帧的 Paint（标记 5）查看绘制详情。
切换到 Paint Profiler 选项卡（标记 6），查看绘制的步骤。

通过上面的图片（标记 7 和标记 8）可以看到，固定区域的确被波及到，并且触发重绘了。我们再对比使用 will-change 属性优化过的情况，发现固定区域没有触发重绘。

并且，我们也可以通过一帧（标记 1）的布局详情（标记 2），查看固定区域（标记 3）是不是提升成 Composited Layer（标记 4），才避免的不必要绘制。

合理管理 Composited Layer

提升成 Composited Layer 的确会优化性能；但是，要知道创建一个新的 Composited Layer 必须要额外的内存和管理，这是非常昂贵的代价。所以，在内存资源有限的设备上，Composited Layer 带来的性能提升，很可能远远抵不上创建多个 Composited Layer 的代价。同时，由于每一个 Composited Layer 的位图都需要上传到 GPU；所以，不免需要考虑 CPU 和 GPU 之间的带宽以及用多大内存处理 GPU 纹理的问题。

我们通过 1000 个 div 节点，来对比普通图层与提升成 Composited Layer 之后的内存使用情况。可以发现差距还是比较明显的。

最小化提升

通过上文的说明，我们知道 Composited Layer 并不是越多越好。尤其是，千万不要通过下面的代码提升页面的所有元素，这样的资源消耗将是异常恐怖的。

{

/* or transform: translateZ(0) */

will-change: transform;

}

最小化提升，就是要尽量降低页面 Composited Layer 的数量。为了做到这一点，我们可以不把像 will-change 这样能够提升节点为 Composited Layer 的属性写在默认状态中。至于这样做的原因，我会在下面讲解。

看这个例子，我们先把 will-change 属性写在默认状态里；然后，再对比去掉这个属性后渲染的情况。

.box {

width: 100ox;

height: 100px;

background-color: #f00;

will-change: transform;

transition: transform 0.3s;

}

.box:hover {

transform: scale(1.5);

}

使用 will-change 属性提升的 Composited Layer：

普通图层：

我们发现区别仅在于，动画的开始和结束，会触发重绘；而动画运行的时候，删除或使用 will-change 是没有任何分别的。

我们在构建 Graphics Layer Tree 的时候讲到过这样一条理由：

对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition（需要是 active 的 animation 或者 transition，当 animation 或者 transition 效果未开始或结束后，提升的 Composited Layer 会恢复成普通图层）。

这条理由赐予了我们动态提升 Composited Layer 的权利；因此我们应该多利用这一点，来减少不必要的 Composited Layer 的数量。

防止层爆炸

我们在 Graphics Layer Tree 中介绍过层爆炸，它指的是由于重叠而导致的大量额外 Composited Layer 的问题。浏览器的层压缩可以在很大程度上解决这个问题，但是，有很多特殊的情况，会导致 Composited Layer 无法被压缩；这就很可能产生一些不在我们预期中的 Composited Layer，也就是说还是会出现大量额外的 Composited Layer。

在层压缩这一节，我们已经给出了使用层压缩优化的例子，这里就不再重复了。下面再通过解决一个无法被层压缩的例子，来更为深入的了解如何防止层爆炸。

性能优化

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。