修复累积布局偏移
改进评论互动时的累积布局偏移 + 优化 #12309
累积布局偏移是指初始加载后内容发生跳跃的现象。
CLS不仅令用户感到沮丧，而且今年对SEO的影响也将越来越大。当然，这两者是相互关联的。由于这是一个严重的用户体验问题，谷歌搜索排名将会严厉打击这种行为。
Forem 中存在一些 CLS 问题。Google 通过 Search Console 的“核心网站指标”标签页向我们展示了这些问题：
图中黄色部分代表需要修改的页面。
“需要改进”意味着这只是个小问题。它当然不是那种在你眼前弹出的巨型广告，但仍然令人沮丧，甚至可能让人感到不适。
他们谈论的是这件事：
这是因为我们异步加载评论点赞数，以便缓存底层 HTML。
这就是解决办法……
改进评论互动时的累积布局偏移 + 优化 #12309
这是哪种类型的公关稿？（可多选）
- [x] 重构
- [ ] 特征
- [x] 错误修复
- [x] 优化
- [ ] 文档更新
描述
累积布局偏移是指初始渲染后，当页面发生任何更改时，页面上的元素突然跳跃的现象。
详情请见：https://web.dev/cls/
这不仅会给用户带来糟糕的体验，谷歌也警告说，这将成为影响排名的重要因素：
详情请见：https://www.searchenginejournal.com/cumulative-layout-shift/371946/ https://www.popwebdesign.net/popart_blog/en/2020/09/cumulative-layout-shift-how-to-rank-on-google-in-2021/
我不确定那篇文章是否涵盖了这一点，但我相信谷歌在 2021 年 5 月宣布，他们将更加重视这件事。
总的来说，这对 Forem 来说是件好事，因为我们已经优先考虑用户体验，并且 CLS 问题很少，但是，我们确实存在一些问题。
这个 PR 解决了这个问题：
https://user-images.githubusercontent.com/3102842/104824544-a24bb380-5820-11eb-8362-8e48dd8ed405.mov
页面加载时，我们会异步获取评论树中的点赞数。这样做的好处是，每次有人点赞时，我们不必刷新整个页面，但目前的实现方式会导致页面加载失败。
在探讨解决这个问题的方法时，我认为我选择的方法是最好的：
- 我们内联显示了当前的公开点赞数，因为我们知道它可能已被缓存，并使用异步获取的方式来调整点赞数。这将改善用户体验，因为大多数情况下点赞数不会出现任何变化，即使最近点赞数发生了变化，也只会进行小幅调整，例如从 7 个点赞调整到 8 个点赞。
随着论坛（例如 DEV 论坛）的发展壮大，它们极有可能成为知识库。这意味着一些旧帖子可以长期存在并发挥作用。然而，随着时间的推移，帖子不太可能每隔几分钟就获得新的反馈。
这个 PR 利用了这一点，减少了一周内没有新评论时发出的异步查询。也就是说：我们不再获取无人评论的帖子的异步点赞数。这将减少对多个帖子的请求次数。
相关票务和文件
https://github.com/forem/forem/issues/12310
质量保证说明、屏幕截图、录像
请将此行替换为测试更改的说明，以及任何与 UI 更改相关的图片。
用户界面可访问性方面的问题？
这应该只会改善可能出现的问题。
添加了测试？
- [x] 是
- [ ] 不，原因如下：请将此行替换为未包含测试的详细说明。
- [ ] 我需要编写测试方面的帮助
已添加到文档中？
通常处理内容缓存问题的方法是，在内容加载完成之前，先为可能异步加载的内容预留空间。处理方法有很多种。在这种情况下，我认为先包含缓存的数字而不是什么都不包含是合理的，然后在加载完成后几毫秒，如果该数字更新，则再添加缓存。
如果无法修改代码以包含数字，那么添加一个空白的 HTML 元素来占据大多数类似数字的大致空间可能就足够了。
文章来源：https://dev.to/ben/fixing-cumulative-layout-shift-41ja