一、什么是样式抖动？
样式抖动是指网页加载或交互过程中，页面元素的位置、大小或其他视觉属性发生突然的变化，导致页面内容出现跳动或闪烁的现象。这种抖动会给用户带来不良的视觉体验，影响网站的整体质量。
二、样式抖动的常见原因
- 资源加载顺序问题
当页面中的图片、字体或其他资源未能及时加载时，可能会导致页面布局发生变化，从而引起抖动。例如，图片加载后突然占据了原本空白的区域，导致其他元素被挤压或移动。 - JavaScript动态修改DOM
在面加载完成后，通过JavaScript动态添加、删除或修改DOM元素，可能会导致页面布局重新计算，引起抖动。 - CSS样式延迟加载
当CSS文件加载较慢或被阻塞时，页面可能会先以无样式状态呈现，然后突然应用样式，造成视觉上的跳动。 - 响应式布局适应
在响应式设计中，当浏览器窗口大小改变时，元素的布局可能会发生变化，如果处理不当，可能会出现抖动。 - 字体加载
自定义字体文件加载完成前，浏览器可能会先使用默认字体渲染文本，待自定义字体加载完成后再切换，导致文本布局发生变化。 - 广告或第三方内容
嵌入的广告或第三方内容可能会在加载完成后改变大小或位置，影响周围元素的布局。 - 动画效果
不当的动画实现可能会导致页面元素在动画过程中出现抖动或闪烁。
三、如何避免样式抖动
- 预设资源尺寸
对于图片、视频等媒体资源，在HTML中指定宽度和高度属性，或在CSS中设置固定尺寸。这样可以在资源加载完成前保留适当的空间，避免加载后的布局变化。
示例：
<img src="example.jpg" width="300" height="200" alt="Example Image">
- 使用占位符
为尚未加载的内容创建占位符，可以是简单的背景色块或加载动画。这样可以在实际内容加载完成前保持布局稳定。 - 优化资源加载顺序
将关键CSS内联到HTML中，确保页面样式在最短时间内应用。同时，使用异步加载非关键JavaScript和CSS文件，避免阻塞渲染。
示例：
<style>
/* 关键CSS */
body { font-family: Arial, sans-serif; }
.container { max-width: 1200px; margin: 0 auto; }
</style>
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
- 使用CSS container queries
CSS container queries允许基于父容器的大小而不是视口大小来应用样式，这可以减少响应式布局中的抖动问题。
示例：
@container (min-width: 700px) {
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
- 字体加载优化
使用font-display属性控制字体加载行为，或使用Font Loading API预加载关键字体。
示例：
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: swap;
}
-
使用骨架屏
为页面主要内容区域创建骨架屏，在实际内容加载完成前显示大致的页面结构，提高用户体验。 -
延迟加载非关键内容
使用懒加载技术延迟加载图片、视频等非关键内容，减少初始页面加载时的布局变化。 -
使用CSS transitions
在需要改变元素样式时，使用CSS transitions可以创造平滑的过渡效果，减少突然的变化带来的视觉冲击。
示例：
.element {
transition: all 0.3s ease-in-out;
}
- 优化JavaScript执行
避免在页面加载过程中执行大量JavaScript操作。使用requestAnimationFrame()来处理可能影响布局的操作，确保它们在浏览器的渲染周期中正确执行。
示例：
function updateLayout() {
// 执行可能影响布局的操作
requestAnimationFrame(updateLayout);
}
requestAnimationFrame(updateLayout);
- 使用Content Visibility
对于大型页面，可以使用content-visibility: auto CSS属性来延迟渲染屏幕外的内容，减少初始加载时的计算量和可能的布局抖动。
示例：
.off-screen-content {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* 预估高度 */
}
- 控制广告和第三方内容
为广告和第三方内容预留固定大小的容器，并设置overflow: hidden，防止它们影响周围元素的布局。 - 使用CSS Grid或Flexbox
这些现代布局技术可以创建更稳定的页面结构，减少因内容变化导致的布局抖动。
示例（使用CSS Grid）：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
- 使用CSS contain属性
contain属性可以将元素的布局影响限制在其本身的范围内，防止其内部变化影响外部布局。
示例：
.isolated-component {
contain: layout;
}
