性能链接 III

• 使 GitHub 的新主页快速且高效 — Tobias Ahlin 描述了如何通过 IntersectionObserver 更高效地完成滚动效果，以及它如何避免使用诸如 getBoundingClientRect 之类导致重排的方法。 此外，还有 WebP + SVG 蒙版！
  
• 我们对核心 Web 指标和 SEO 的所有了解 — Simon Hearne 阐述了为什么每个人现在都如此痴迷于 CWV：SEO。 Simon 说了一些我听到过几次的话：页面体验更新更像是一种“胡萝卜”方法而不是“大棒”方法——对于未能达到 Google 的目标，没有直接的处罚。 也就是说，您不会因为糟糕的 CWV 而受到惩罚，但如果指标良好则会获得奖励。 但是，如果周围所有人都获得了奖励而您没有，这与惩罚有什么区别呢？
  
• 为 Web 性能优化和测试设置 Cloudflare Workers — Matt Hobbs 从关于设置 Cloudflare Worker 的 101 入门介绍开始，使用它来拦截 CSS 文件并用 Comic Sans 替换所有字体族声明。 也许这会让您意识到可能性：如果您能够像 HTML、CSS 和 JavaScript 那样操作所有资产，则可以强制它们执行更高效的操作。
  
• 这才是我说的 Service Worker！ — Jeremy Wagner 设置了一个“流式”Service Worker，它缓存网站上的常见部分（例如页眉和页脚），这样威斯康星州沃沙拉县的网速慢的用户可以加载该网站的速度大约快两倍。 这是建立在 Philip Walton 的“使用 Service Worker 减小 HTML 负载”文章的基础上的。
  
• 2021 年谁拥有最快的 F1 网站？ — Jake Archibald 的史诗般的 10 部分系列分析了 F1 赛车网站的性能（哦，讽刺）。 看起来红牛目前领先，法拉利紧随其后。 所有这些都有很多东西可以学习，并且看到一些有趣的部分，例如他们的网站很慢，因为有一个 1.8MB 的阻塞脚本，但其中 1.7MB 是内联的 2300×2300 PNG 马的图片，而它只显示了 20×20 的大小。 此外，我不知道 Jake 是 Sprite Cow 的原始构建者！（不要使用它，因为它结果表明精灵图现在是不好的。）
  
• 真实世界 CSS 与 CSS-in-JS 性能比较 — Tomas Pustelnik 观察了 CSS-in-JS 的性能影响。 或者，就像我指出的那样：CSS-in-React，因为这始终是它的用途，因为所有其他大型 JavaScript 框架都有自己的 blessed 样式解决方案。 Tomas 没有将 styled-components 与手写的原生 CSS 进行比较，而是与Linaria 进行了比较，我认为大多数人仍然将其视为 CSS-in-JS，只不过它不是将样式捆绑在 JavaScript 中，而是输出 CSS。 我同意，无论样式库在 DX 方面做了什么，生成 CSS 似乎都是生产的正确方法。 我喜欢 css-modules 还有另一个原因。更新更高级的库 也是这么做的。
  
• 50 毫秒请求案例 — Julia Evans 构建了这个交互式谜题，用于尝试找出为什么服务器请求花费的时间比预期长。 这更像是一个后端问题而不是前端问题，但故障排除步骤很熟悉。 在您的机器上尝试一下，在我的机器上尝试一下，查看服务器正在做什么等等