样式抖动为什么会发生？

在 Web 开发中，样式抖动（Layout Shift）指的是页面元素在初始渲染完成后发生位置突变的现象。主要原因和解决方案如下：

1. 未预分配的尺寸空间
   • 原因：未设置尺寸的异步加载内容（如图片、广告、动态组件）渲染后触发重排（reflow），导致后续元素位置突变。
   • 解决方案：
     • 为图片/视频显式定义宽高比例：

       <img src="photo.jpg" width="800" height="600" />
       <!-- 或使用 CSS 指定宽高 -->
       

     • 通过 CSS aspect-ratio 预定义容器比例：

       .banner { aspect-ratio: 16/9; }
       

2. 动态插入内容占位不足
   • 原因：AJAX 加载数据后新增内容占据空间，挤压相邻元素。
   • 解决方案：
     • 提前为异步区块预留最小高度：

       .dynamic-content { min-height: 200px; }
       

     • 使用骨架屏（Skeleton Screen）临时占位。
3. 字体渲染延迟
   • 原因：未加载的字体触发 FOIT/FOUT (Flash of Invisible/Unstyled Text)，改变文本行高度。
   • 解决方案：

     /* 通过预加载定义字体尺寸约束 */
     @font-face {
       font-family: 'CustomFont';
       src: url('font.woff2') format('woff2');
       size-adjust: 105%;
     }
     /* 或显式指定后备字体尺寸 */
     body { font-size: clamp(1rem, 1vw, 1.25rem); }
     

4. 外部资源影响
   • 原因：第三方脚本动态插入广告、嵌入内容等破坏现有布局。
   • 解决方案：
     • 使用 CSS contain: layout; 隔离组件容器避免外部重排传播：

       .widget-container { contain: layout; }
       

核心优化策略：

• 浏览器实验工具：Chrome DevTools > Performance > 勾选 Layout Shift Regions 高亮抖动区域
• LCP 优化：优先预加载关键媒体资源，使用 <link rel="preload">
• 现代 CSS API：利用 content-visibility: auto; 延迟非视口区域渲染