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

文章预览

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