前端面试题目---页面抖动的原因、如何避免、如何解决

前端页面抖动是一个常见且影响用户体验的问题，下面将从抖动发生的场景、解决办法以及预防措施三个方面进行详细阐述。

页面抖动发生的场景

1. 元素尺寸动态变化

• 图片加载：当页面中图片的宽高没有预先设定，在图片加载完成后，其实际尺寸会撑开所在容器，导致周围元素位置发生变动，从而产生页面抖动。例如，在一个新闻列表中，图片占位区域初始高度为 0，图片加载完成后撑开高度，列表会整体向下移动。
• 内容动态更新：像一些实时更新数据的页面，如股票行情页面，当数据更新时，显示数据的元素内容长度改变，会使元素宽度或高度变化，引发页面抖动。

2. 滚动条出现或消失

• 内容溢出：当页面内容超过可视区域高度或宽度时，滚动条会出现；而当内容减少到不溢出时，滚动条又会消失。滚动条的出现和消失会占据一定的宽度（垂直滚动条）或高度（水平滚动条），导致页面布局发生微小变化，产生抖动。
• 模态框弹出：当模态框弹出时，页面的滚动会被禁止，滚动条消失；模态框关闭后，滚动条又会重新出现，这一过程会造成页面抖动。

3. CSS 动画和过渡

• 动画计算误差：在使用 CSS 动画或过渡效果时，由于浏览器的渲染计算存在一定误差，可能会导致元素在动画过程中出现轻微的位置偏移或抖动。例如，在一个元素的旋转动画中，可能会出现旋转不流畅的抖动现象。
• 动画触发条件：当动画的触发条件频繁变化时，如鼠标悬停在元素上触发动画，鼠标快速进出元素，会使动画不断开始和停止，导致页面抖动。

4. 浏览器重排和重绘

• 频繁操作 DOM：在 JavaScript 中频繁修改 DOM 元素的样式、添加或删除元素等操作，会触发浏览器的重排和重绘。重排是指浏览器重新计算元素的布局信息，重绘是指重新绘制元素的外观。频繁的重排和重绘会导致页面抖动。例如，在一个循环中不断修改元素的宽度和高度。
• 响应式布局切换：当浏览器窗口大小改变时，响应式布局会根据不同的媒体查询规则重新调整元素的布局，这一过程可能会触发多次重排和重绘，引起页面抖动。

解决页面抖动问题的方法

1. 针对元素尺寸动态变化

• 预设图片尺寸：在 HTML 或 CSS 中为图片设置固定的宽度和高度，这样在图片加载过程中，占位区域的大小不会改变，避免页面抖动。例如：

html

<img src="example.jpg" width="300" height="200" alt="Example Image">

• 使用占位符：在内容动态更新前，先显示占位符元素，占位符的尺寸与实际内容的尺寸一致，等内容加载完成后再替换占位符，保证页面布局稳定。

2. 针对滚动条出现或消失

• 固定滚动条：可以通过 CSS 强制页面始终显示滚动条，避免滚动条出现和消失带来的布局变化。例如：

css

html {overflow-y: scroll;
}

• 模态框处理：在模态框弹出时，给页面添加一个类名，通过 CSS 让页面的内容区域可以在模态框内滚动，而不影响页面整体的滚动条状态。

3. 针对 CSS 动画和过渡

• 优化动画代码：检查 CSS 动画和过渡的代码，确保动画的关键帧和过渡属性设置合理，避免出现不必要的计算误差。例如，使用 transform 属性进行动画操作，因为 transform 不会触发重排，性能更好。

css

.element {transition: transform 0.3s ease;
}
.element:hover {transform: scale(1.1);
}

• 防抖和节流：对于频繁触发的动画事件，如鼠标悬停事件，可以使用防抖和节流技术来限制事件的触发频率，避免动画的频繁开始和停止。

4. 针对浏览器重排和重绘

• 批量修改 DOM：将多次 DOM 操作合并为一次，减少重排和重绘的次数。例如，先创建一个文档片段，在文档片段中进行所有的 DOM 操作，最后将文档片段添加到页面中。

javascript

const fragment = document.createDocumentFragment();
const newElement = document.createElement('div');
newElement.textContent = 'New Content';
fragment.appendChild(newElement);
document.body.appendChild(fragment);

• 缓存布局信息：在 JavaScript 中，如果需要多次读取元素的布局信息（如宽度、高度、位置等），可以先将这些信息缓存起来，避免多次读取触发重排。

避免页面抖动问题的预防措施

1. 前端开发规范

• 合理规划布局：在设计页面布局时，充分考虑元素的尺寸和位置变化，避免因内容动态更新或图片加载等因素导致布局不稳定。
• 使用响应式设计：采用响应式设计原则，确保页面在不同设备和屏幕尺寸下都能保持稳定的布局。同时，合理设置媒体查询断点，避免频繁的布局切换。

2. 性能优化

• 图片优化：对图片进行压缩和裁剪，减少图片的加载时间和文件大小。同时，根据不同的设备和屏幕分辨率，提供不同尺寸的图片，避免图片过大或过小导致的布局问题。
• 代码压缩和合并：压缩和合并 CSS 和 JavaScript 文件，减少文件的请求数量和大小，提高页面的加载速度，降低因资源加载导致的页面抖动风险。

3. 测试和调试

• 多浏览器和设备测试：在不同的浏览器和设备上进行页面测试，检查是否存在页面抖动问题。不同浏览器的渲染引擎和性能表现可能会有所差异，及时发现并解决兼容性问题。
• 性能监测工具：使用浏览器的开发者工具和性能监测工具，如 Chrome DevTools 中的 Performance 面板，分析页面的性能瓶颈和重排重绘情况，提前发现并优化可能导致页面抖动的问题。