【第3393期】使用 CSS content-visibility 提高渲染性能

主要观点总结

文章介绍了如何使用CSS的content-visibility属性提高网页在渲染大量元素时的性能，特别是在处理包含大量自定义表情符号的Fediverse实例时。文章讨论了作者遇到性能问题后的解决方案，以及content-visibility属性的工作原理和优势。

关键观点总结

关键观点1: 文章主题

介绍如何使用CSS的content-visibility属性提高网页性能，特别是在处理大量自定义表情符号的情况下。

关键观点2: 性能问题

在一个包含近20k个自定义表情符号的Fediverse实例中，打开表情符号选择器时页面存在卡顿问题。

关键观点3: content-visibility属性的作用

允许开发者从布局和绘制的角度“隐藏”DOM的某些部分，提高页面性能。

关键观点4: 解决方案

使用content-visibility属性对emoji分类进行调整，通过计算预期大小并设置CSS自定义属性来优化性能。

关键观点5: 性能提升

使用content-visibility属性后，初始加载在Chrome中提升了约15%，在Firefox中提升了5%。与虚拟列表相比，这个优化的效果并不理想，但在某些情况下可能是一个简单的解决方案。

文章预览

前言 介绍了如何使用 CSS 的 content-visibility 属性来提高网页在渲染大量元素时的性能。今日前端早读课文章由 @ikoofe 翻译，公号：KooFE 前端团队授权分享。 正文从这开始～～ 最近，我在 emoji-picker-element 上遇到了一个性能问题：在一个接近 20k 个自定义表情符号的 Fediverse 实例上，打开表情符号选择器时，页面至少冻结了一秒钟，之后会卡顿一段时间。 【第2073期】content-visibility: 一个可以提高渲染性能的css属性 与 Slack、Discord 等类似，在 Mastodon 或 Fediverse 的不同服务器上也可以有自己的自定义表情符号。对于 20k 大小的自定义表情符号虽然不常见，但也并非不会出现。 在启动了他们的 Repro 之后，它确实很慢： 这里存在的问题是： 20k 自定义表情符号意味着 40k 元素，因为每个元素都使用了   和  由于没有使用虚拟化，这些元素全部都被塞进了 DOM ………………………………