性能链接 V

1. Shadow DOM 能否提升样式性能？ — Nolan Lawson 介绍了如何利用 Shadow DOM 的固有 *封装性*，使样式应用速度比这些样式规则与整个页面相关时更快。 但正如往常一样，它取决于情况，事实证明，在 Shadow DOM 之外使用类和 ID 实际上更快（？！），因此，如果您只使用这些来进行样式设置，那么这就是最佳选择。
2. HTML 优先，JavaScript 最后：网页加速的秘诀！ — Miško Hevery 在谈论 Qwik，以及让它速度飞快的原因之一。 我对 Qwik 了解不多，但看起来它是一个 JavaScript 框架，非常适合 SSR，因为它将状态直接保存在 HTML/DOM 中（例如 div ::app-state="./AppState" app-state:1234="{count: 321}">），您可能会认为它很慢，但实际上并非如此。
3. 小包，快页面：如何处理过多的 JavaScript — Ben Schwarz 对如何处理那些有问题的巨大包的一些想法。 主要任务是让它们更小，然后不断监控它们。
4. 整理您的 head：一个新的 CSS 性能诊断片段 — 我们曾经 介绍过 Harry 的超级聪明的片段，但 Vitaly 已经 先于我们，并且值得重新分享，因为它非常酷。
5. 用于现代 Web 上缓存的新 HTTP 标准 — Tim Perry 谈到了两个全新的（提议的）缓存头：Cache-Status 和 Targetted Cache-Control。 “这些旨在更新 HTTP 标准以匹配当今 CDN 驱动的 Web 的现实，创建规范化现有 CDN 实践的规范。” 这感觉像是在网络标准可以介入并解决棘手问题的地方。
6. 使用优先级提示优化资源加载 — Leena Sohoni、Addy Osmani 和 Patrick Meenan 讨论了优先级提示…… 嗯…… 我会称之为 API，除了它实际上只是 HTML 中的 importance 属性，或者其他 API 中的 JavaScript 参数。 这是草案规范。 它就像使用 srcset/sizes 或 will-change 的响应式图像一样，您作为作者比浏览器更了解，并允许您向浏览器提供它需要更有效地执行操作的信息。
7. 核心 Web 指标是否让 Web 更快了？ — CWVs 于 2020 年 5 月宣布，然后我们被告知到 2021 年 5 月，它们将成为 SEO 的一个因素。 Barry Pollard 检查了这个大胡萝卜（或棍子？）是否诱使我们所有人集体加快网站速度。 答案很复杂，因为 CWVs 的衡量方式在那段时间里发生了变化。 有些指标表明情况有所好转。 但是，如果您使用稳固的替代指标进行之前/之后的比较，情况看起来更糟。 它完全取决于您查看的 Web 切片。
8. 使用 Island 架构和 PostCSS 提升性能 — Astro 针对组件有一个很酷的功能——比如 <Sidebar client:media={"(min-width: 768px)"} />——只有在匹配该媒体查询时才加载该元素。 我可能会争辩说，只有在组件很重或需要 JavaScript 的情况下，这才是个好主意。 我之所以这么说，是因为它似乎在像静态 HTML 这样的东西上使用它实际上会抵消任何潜在的节省，因为额外的 JavaScript 必须运行以测试媒体条件，然后有条件地获取资源。 但是无论如何，Oliver Turner 演示了如何在 JavaScript 和 CSS 之间共享媒体查询（通过 PostCSS）。
9. 图像优化器 — 这是一个基于 Electron（但仅限 macOS）的拖放式图像优化器。 就像 ImageOptim 一样。 它们都是免费的。