页面加载时出现Content Layout Shift（CLS）布局偏移问题如何解决？

顺着你观察到的现象就能摸到核心原因：现在页面上的菜单最终宽度，根本不是首帧渲染前由CSS静态定义好的，完全靠main.js运行时计算完才动态赋值——你禁用main.js的时候菜单一直保持全宽，正好说明CSS层面没给菜单写正确的固定宽度规则，浏览器第一次渲染时只能按照块级元素默认撑满父容器的逻辑，把菜单渲成全宽。等1秒后main.js跑完宽度计算逻辑，才把菜单缩到正确尺寸，连带推得主体内容往上挪补空位，这就是触发CLS的根源。之前你改CSS没效果，基本是因为只覆盖了JS加载完成后的菜单最终样式，没覆盖到首帧渲染时的默认全宽状态，自然挡不住跳动。

从根上消掉布局偏移 #

• 先去main.js里找控制菜单宽度的代码：定位到给菜单元素写style.width、动态加侧边栏布局类的段落，把JS算出来的最终菜单宽度、对应的布局规则，直接写到页面初始CSS里，让浏览器第一次渲染之前就拿到正确的菜单尺寸，从源头避免先渲全宽再收缩的过程。
• 如果你用的是Bootstrap自带的侧边栏布局，查一下响应式类的挂载时机：是不是本来应该在服务端出HTML的时候，就给侧边栏加上对应屏幕断点的宽度类，结果现在改成等前端JS判断完视口宽度才动态挂类，那必然会出现先全宽、后收缩的跳动。

临时兜底的方案 #

如果短期腾不出时间重构JS的宽度逻辑，可以用渲染锁把布局偏移的过程完全藏起来：

• 给页面最外层容器加初始样式opacity: 0，等main.js里调整菜单尺寸的代码全部执行完，立刻给外层容器切个类把透明度改成1。这种方式比直接display: none的可访问性好，不会影响屏幕阅读器识别内容。
• 一定要加超时兜底：设个3秒的定时任务，不管菜单调整逻辑跑没跑完，到时间就强制把外层容器的透明度打开，别因为JS加载失败搞成全白屏。
• 按Core Web Vitals的测量规则，所有内容在完全不可见状态下发生的布局偏移，是不会被算进CLS得分的——这么处理用户看不到跳动过程，也能顺利过CLS测试。

内容的提问来源于stack exchange，提问作者Josh Crow