Lighthouse判定typewriter-effect打字机动画引发布局偏移如何优化

问题根因 #

你遇到的CLS升高问题本质是typewriter-effect默认的运行逻辑导致的：动画执行过程中会动态逐字符插入文本内容，容器宽高会随着内容增加持续变化，如果没有预先预留固定空间，就会挤压周围元素产生布局偏移，被Lighthouse计入CLS得分。

可选解决方法 #

• 给外层容器设置固定尺寸
  给包裹typewriter-effect的外层DOM元素提前设置固定的宽、高属性，同时添加overflow: hidden，尺寸按你动画要展示的最长内容的实际大小设置。这样动画执行过程中容器尺寸不会发生任何变化，不会对周围布局产生影响。
• 让动画元素脱离正常文档流
  如果打字机效果是在头部、侧边栏等独立的装饰区域展示，可以给外层容器添加position: relative，给typewriter-effect的根元素设置position: absolute，脱离正常文档流之后，动画元素的尺寸变化完全不会影响其他元素的布局，自然不会产生CLS。
• 使用预先占位的自定义打字机动画
  如果第三方包的逻辑不可调整，可以自己实现简单的打字机效果：先把完整的文本内容渲染到页面上作为占位，再通过CSS的clip-path或者动态控制width+overflow: hidden的方式逐步展示文本内容。这种方式从页面加载完成时就已经占好了文本需要的全部空间，整个动画过程不会产生任何布局偏移。
• 开启库的占位配置
  查阅typewriter-effect的官方配置，大部分打字机类库都支持预先渲染透明的完整文本作为底层占位，上层动画仅控制对应字符的显隐状态，这种实现方式也不会在动画过程中改变容器尺寸，可以避免CLS升高。

内容的提问来源于stack exchange，提问作者Matthew Kwong