当前位置: 首页 > news >正文

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

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

页面抖动发生的场景

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 面板,分析页面的性能瓶颈和重排重绘情况,提前发现并优化可能导致页面抖动的问题。

相关文章:

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

前端页面抖动是一个常见且影响用户体验的问题&#xff0c;下面将从抖动发生的场景、解决办法以及预防措施三个方面进行详细阐述。 页面抖动发生的场景 1. 元素尺寸动态变化 图片加载&#xff1a;当页面中图片的宽高没有预先设定&#xff0c;在图片加载完成后&#xff0c;其实…...

Spring Boot整合DeepSeek实现AI对话(API调用和本地部署)

本篇文章会分基于DeepSeek开放平台上的API&#xff0c;以及本地私有化部署DeepSeek R1模型两种方式来整合使用。 本地化私有部署可以参考这篇博文 全面认识了解DeepSeek利用ollama在本地部署、使用和体验deepseek-r1大模型 Spring版本选择 根据Spring官网的描述 Spring AI是一…...

DeepSeek 的 API 服务引入 WPS Office

以下是将 DeepSeek 的 API 服务引入 WPS Office 的通用集成教程。以调用 DeepSeek 的 AI 功能&#xff08;如文本生成、数据分析&#xff09;为例&#xff0c;假设你需要通过 WPS 的宏或插件调用外部 API&#xff1a; 准备工作 注册 DeepSeek 账号并获取 API Key 访问 DeepSe…...

在Vue中,JavaScript数组常用方法,添加,插入,查找,删除等整理

在Vue中&#xff0c;JavaScript数组常用&#xff0c;添加&#xff0c;插入&#xff0c;查找&#xff0c;删除等整理 1.splice()方法可以直接修改原数组&#xff0c;通过指定要删除元素的索引来删除它。 例&#xff1a; let index // 要删除的元素的索引; this.array.splice(i…...

树莓派上 基于Opencv 实现人脸检测与人脸识别

一&#xff0c;需求 基于树莓派4b&#xff0c;usb1080p摄像头&#xff0c;实现人脸检测与人脸识别。尝试了海陵科的模组和百度的sdk。海陵科的模组无法录入人脸&#xff0c;浪费了100多块钱。百度的sdk 在树莓派上也无法录入人脸&#xff0c;官方解决不了。最后只能用opencv自…...

Unity 接入Tripo 文生模型,图生模型

官方网站&#xff1a;https://www.tripo3d.ai/app/home自行注册账号并且登陆下载Unity插件&#xff1a;https://cdn-web.tripo3d.ai/plugin/tripo-unity.zip申请apikey&#xff1a; https://platform.tripo3d.ai/api-keys使用&#xff08;后续过程就按照第二步下载的插件里面的…...

Redis常见数据结构

目录 基本介绍 特点&#xff1a; 全局命令 数据类型&#xff1a; String Hash List Set Zset 基本介绍 Redis是一个在内存中存储数据的中间件,可作为数据库&#xff0c;缓存&#xff0c;消息队列等。 特点&#xff1a; 持久化&#xff1a;Redis会把数据存储在内存中…...

fps动作系统9:动画音频

文章目录 音频单播放音频文件也是可以的&#xff0c;只不过是2d声音。创建音频蓝图cue(音效)音量乘数 衰减(空间效果)音量自然声音内部半径衰减距离 空间化双声道 绑定到动画动画序列轨道 音频 单播放音频文件也是可以的&#xff0c;只不过是2d声音。 创建音频蓝图 cue(音效…...

十四、GitLab 流水线自动化部署之 Windows Server

一、软件下载 本文章采用 Windows 版本的 Gitlab Runner 客户端&#xff0c;下载地址参考如下&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1nktWQGR4toRpgzEn9Qj3kQ?pwd0p1d 提取码&#xff1a;0p1d --来自百度网盘超级会员V7的分享 二、环境安装 1、Java 环境…...

数据库数据恢复—MongoDB丢失_mdb_catalog.wt文件导致报错的数据恢复案例

MongoDB数据库存储模式为文档数据存储库&#xff0c;存储方式是将文档存储在集合之中。 MongoDB数据库是开源数据库&#xff0c;同时提供具有附加功能的商业版本。 MongoDB中的数据是以键值对(key-value pairs)的形式显示的。在模式设计上&#xff0c;数据库受到的约束更少。这…...

mysql8.0使用MGR实现高可用与利用MySQL Router构建读写分离MGR集群

MGR是MySQL Group Replication的缩写&#xff0c;即MySQL组复制。 在以往&#xff0c;我们一般是利用MySQL的主从复制或半同步复制来提供高可用解决方案&#xff0c;但这存在以下几个比较严重的问题&#xff1a; 主从复制间容易发生复制延迟&#xff0c;尤其是在5.6以前的版本…...

基于Ubuntu2404搭建k8s-1.31集群

k8s 1.31 环境初始化安装Container安装runc安装CNI插件部署k8s集群安装crictl使用kubeadm部署集群节点加入集群部署Calico网络配置dashboard 本实验基于VMware创建的Ubuntu2404虚拟机搭建k8s 1.31版本集群&#xff0c;架构为一主一从&#xff0c;容器运行时使用Container&#…...

Golang的图形编程应用案例

Golang的图形编程应用案例 一、Golang的图形编程概述 是一种高效、可靠且易于使用的编程语言&#xff0c;具有并发性和简洁性&#xff0c;因此在图形编程领域也有着广泛的应用。Golang的图形编程主要通过各种图形库来实现&#xff0c;其中最知名的是Go图形库&#xff08;Ebiten…...

PostgreSQL 错误代码 23505 : ERROR: duplicate key value violates unique constraint

目录 1. 确认错误信息2. 检查数据3. 处理重复数据4. 检查唯一约束5. 添加唯一约束6. 使用事务处理并发操作7. 使用触发器8. 使用 ON CONFLICT 子句9. 重置序列10. 捕获异常并重试 错误代码 23505 是 PostgreSQL 中表示违反唯一约束&#xff08;unique violation&#xff09;的标…...

基于SpringBoot和PostGIS的省域“地理难抵点(最纵深处)”检索及可视化实践

目录 前言 1、研究背景 2、研究意义 一、研究目标 1、“地理难抵点”的概念 二、“难抵点”空间检索实现 1、数据获取与处理 2、计算流程 3、难抵点计算 4、WebGIS可视化 三、成果展示 1、华东地区 2、华南地区 3、华中地区 4、华北地区 5、西北地区 6、西南地…...

MySQL InnoDB引擎 MVCC

MVCC&#xff08;Multi-Version Concurrency Control&#xff09;即多版本并发控制&#xff0c;是 MySQL 的 InnoDB 存储引擎实现并发控制的一种重要技术。它在很多情况下避免了加锁操作&#xff0c;从而提高了数据库的并发性能。 一、原理 MVCC 的核心思想是通过保存数据在某…...

服务器使用centos7.9操作系统前需要做的准备工作

文章目录 前言1.操作记录 总结 前言 记录一下centos7.9操作系统的服务器在部署业务服务之前需要做的准备工作。 大家可以复制到自己的编辑器里面&#xff0c;有需求的注释一些步骤。 备注&#xff1a;有条件的项目推荐使用有长期支持的操作系统版本。 1.操作记录 # 更换阿里云…...

【Prometheus】prometheus结合cAdvisor监控docker容器运行状态,并且实现实时告警通知

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…...

【Stable Diffusion模型测试】测试ControlNet,没有线稿图?

相信很多小伙伴跟我一样&#xff0c;在测试Stable Diffusion的Lora模型时&#xff0c;ControlNet没有可输入的线稿图&#xff0c;大家的第一反应就是百度搜&#xff0c;但是能从互联网上搜到的高质量线稿图&#xff0c;要么收费&#xff0c;要么质量很差。 现在都什么年代了&a…...

算法刷题-数组系列-卡码网.区间和

题目描述 给定一个整数数组 Array&#xff0c;请计算该数组在每个指定区间内元素的总和。 示例&#xff1a; 输入&#xff1a; 5 1 2 3 4 5 0 1 1 3 输出: 3 9 要点 本题目以ACM的形式输入输出&#xff0c;与力扣的形式不一样&#xff0c;考察头文件的书写、数据结构的书写、…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...