前端面试题目---页面抖动的原因、如何避免、如何解决
前端页面抖动是一个常见且影响用户体验的问题,下面将从抖动发生的场景、解决办法以及预防措施三个方面进行详细阐述。
页面抖动发生的场景
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 面板,分析页面的性能瓶颈和重排重绘情况,提前发现并优化可能导致页面抖动的问题。
相关文章:
前端面试题目---页面抖动的原因、如何避免、如何解决
前端页面抖动是一个常见且影响用户体验的问题,下面将从抖动发生的场景、解决办法以及预防措施三个方面进行详细阐述。 页面抖动发生的场景 1. 元素尺寸动态变化 图片加载:当页面中图片的宽高没有预先设定,在图片加载完成后,其实…...
DeepSeek 突然来袭,AI 大模型变革的危机与转机藏在哪?
随着人工智能技术的飞速发展,大模型领域不断涌现出具有创新性的成果。DeepSeek 的横空出世,为 AI 大模型领域带来了新的变革浪潮。本文将深入探讨 DeepSeek 出现后 AI 大模型面临的危机与转机。 冲冲冲!!! 目录 一、…...
将Sqlite3数据库挂在内存上处理
创作灵感:最近把小学生的口算题从2位数改到3位数,100以内四则运算练习(千纬数学)再次更新,选取难题-CSDN博客要不断刷题目,以前100以内的加减乘除也是这样刷出来的,代码如下: impor…...
#用于跟踪和反映数据源对象的变化--useMagical
import { cloneDeep } from lodash-es import { reactive, ref, watchEffect } from vue /*** 神奇函数* param source 数据源,* param initKey 固定需要返回的属性* description 收集数据源中修改的属性,并返回* version 1.0 仅支持对象* author sufei* return { source, resu…...
基于微信小程序的场地预约设计与实现
第3章 系统设计 3.1系统设计目标 本系统的实现可以帮助体育馆场地信息的管理。帮助管理员对注册用户管理以及用户预约管理。同时可以帮助用户进行场地预约。本系统可以实现用户足不出户预约到需要的场地,为用户提供场地信息了解的平台。 3.2系统功能结构图 本系统的…...
1446. 连续字符 简单
1446. 连续字符https://leetcode.cn/problems/consecutive-characters/ 给你一个字符串 s ,字符串的「能量」定义为:只包含一种字符的最长非空子字符串的长度。 请你返回字符串 s 的 能量。 示例 1: 输入:s "leetcode"…...
多张图片合成PDF
昨天接了一个家教,在网上搜集了一些图片格式的素材,但想要发给学生家长打印,都是图片格式可能不太方便,就想着合成pdf文件之后再发给家长。 试用了“samll*”一次,就需要充值vip了,所以就用python自己写了…...
【办公】钉钉修改默认存储位置,释放C盘空间
Step1: 右击钉钉图标选择设置 Step2: 通用里面找到文件保存位置,修改文件目录: 最新版本钉钉界面: 设置完成后按提示重启即可!...
VLLM历次会议(2024.7)
支持LLama3.1: 量化: vllm git下的子项目:llm-compressor CPU offloading 允许跑更大的模型;会变慢些;在CPU-GPU之间有NVLink的机器上,变慢的幅度小。 新增对Medusa(用1个Head并行推出好几个…...
进程等待与进程替换
目录 一、进程等待 1.1 为什么要等待子进程? 1.2 等待的两种方式 1.2.1 wait函数 1.2.2 waitpid函数 1.3 获取子进程的退出状态 1.4 示例代码 阻塞式等待(同步) 非阻塞等待(异步) 二、进程替换 2.1 什么是进…...
C# CultureInfo 地区影响字符串
问题 线上遇到有玩家资源加载异常,发现资源路径出现异常字符: 发现是土耳其语下字符串转小写不符合预期: "I".ToLower() -> ı 解决方案 String.ToLower 改成 String.ToLowerInvariant 全局修改禁用文化差异:ht…...
走进 Tcl 语言:历史、特性与应用
亲爱的小伙伴们😘,在求知的漫漫旅途中,若你对深度学习的奥秘、Java 与 Python 的奇妙世界,亦或是读研论文的撰写攻略有所探寻🧐,那不妨给我一个小小的关注吧🥰。我会精心筹备,在未来…...
CNN-LSSVM卷积神经网络最小二乘支持向量机多变量多步预测,光伏功率预测
代码地址:CNN-LSSVM卷积神经网络最小二乘支持向量机多变量多步预测,光伏功率预测 CNN-LSSVM卷积神经网络最小二乘支持向量机多变量多步预测,光伏功率预测 一、引言 1、研究背景和意义 光伏发电作为可再生能源的重要组成部分,近…...
使用MaxKB及deepseek搭建本地AI知识库
序 本文主要研究一下如何MaxKB及deepseek搭建本地AI知识库 步骤 拉取MaxKB镜像 docker pull cr2.fit2cloud.com/1panel/maxkb如果拉取不下来就用docker.1ms.run/1panel/maxkb 启动MaxKB docker run -d --namemaxkb --restartalways -p 8080:8080 \ -v ~/.maxkb:/var/lib/p…...
一文通俗理解为什么需要泛型以及泛型的使用
为什么需要泛型? public static void main(String[] args) {ArrayList list new ArrayList();// 由于集合没有做任何限定,任何类型都可以给其中存放list.add("abc");list.add("def");list.add(5);Iterator it list.iterator();wh…...
凸包算法—— cad c#二次开发
效果如下: 代码如下: using IfoxDemo; //[assembly: CommandClass(typeof(IFoxDemo.凸包class))]//只允许此类快捷键命令 namespace IFoxDemo {public class 凸包class{public static class 凸包助手{/// <summary>/// 计算点集的凸包并返回多段线…...
Eclipse JSP/Servlet 深入解析
Eclipse JSP/Servlet 深入解析 引言 随着互联网的快速发展,Java Web开发技术逐渐成为企业级应用开发的主流。在Java Web开发中,JSP(JavaServer Pages)和Servlet是两个核心组件,它们共同构成了Java Web应用程序的基础。本文将深入解析Eclipse平台下的JSP/Servlet技术,帮…...
grep如何排除多个目录?
在使用 grep 进行文本搜索时,有时候需要排除多个目录,避免在这些目录下进行搜索。下面介绍几种不同的实现方式。 目录 1.使用 -r 和 --exclude-dir 选项(GNU grep) 2.使用扩展正则表达式和 -P 选项(GNU grep&#x…...
linux ollama deepseek等大语言模型的model文件的存储目录
linux ollama deepseek等大语言模型的model文件的存储目录 一、用ollama serve启动的,模型数据存放在: /usr/share/ollama/.ollama/models二、如果在自启动文件中指定了工作目录,则在工作目录下的.ollama/models 1.自启动服务 /etc/system…...
React进阶之React核心源码解析(二)
React核心源码解析 diff单一节点比较diff多节点比较diff两轮遍历比较第一轮比较第二轮比较 Update 状态更新Concurrent Mode diff 一共两个阶段 render:内存中的更新,主要是通过递归的过程,来将react变化的部分,在内存中找到哪些…...
八、OSG学习笔记-
前一章节: 七、OSG学习笔记-碰撞检测-CSDN博客https://blog.csdn.net/weixin_36323170/article/details/145558132?spm1001.2014.3001.5501 一、了解OSG图元加载显示流程 本章节代码: OsgStudy/wids CuiQingCheng/OsgStudy - 码云 - 开源中国https:…...
Python实现随机森林(Random Forest)算法
随机森林(Random Forest)是一种集成学习方法,通过构建多个决策树并结合它们的预测结果来提高模型的准确性和稳定性。下面是一个使用Python实现随机森林算法的示例。我们将使用scikit-learn库,它提供了方便的接口来实现随机森林。 …...
平方数列与立方数列求和的数学推导
先上结论: 平方数列求和公式为: S 2 ( n ) n ( n 1 ) ( 2 n 1 ) 6 S_2(n) \frac{n(n1)(2n1)}{6} S2(n)6n(n1)(2n1) 立方数列求和公式为: S 3 ( n ) ( n ( n 1 ) 2 ) 2 S_3(n) \left( \frac{n(n1)}{2} \right)^2 S3(n)(2n(n1)…...
new和malloc的区别
new malloc流程 new new流程 调用operator new 分配内存:在free store 生成对象 free store 可能在 堆 / 自定义的地方 可以认为虚拟内存到物理内存的映射关系早已完成 若分配内存失败(内存空间不够),抛出std::bad_alloc 异常…...
JVM——垃圾回收算法
目录 垃圾回收算法 评价标准: 标记-清除算法: 复制算法: 标记-整理算法: 分代GC: arthas查看分代之后的内存情况: 垃圾回收算法 java是如何实现垃圾回收的呢?简单来说,垃圾回…...
算法日记16:SC68 联通块问题(并查集)
一、题目: 二、题解: 1、看到求联通块问题,我们可以考虑使用DFS/并查集(在这里我们仅介绍并查集) 2、什么是并查集? 2.1:初始化:对于每一个点,我们都对其进行初始化操作pre[i]i pre[i]表示i的…...
Unity-Mirror网络框架-从入门到精通之Pong示例
文章目录 前言示例介绍NetworkManagerPongBallPlayer总结前言 在现代游戏开发中,网络功能日益成为提升游戏体验的关键组成部分。本系列文章将为读者提供对Mirror网络框架的深入了解,涵盖从基础到高级的多个主题。Mirror是一个用于Unity的开源网络框架,专为多人游戏开发设计…...
c++ 多线程知识汇总
一、std::thread std::thread 是 C11 引入的标准库中的线程类,用于创建和管理线程 1. 带参数的构造函数 template <class F, class... Args> std::thread::thread(F&& f, Args&&... args);F&& f:线程要执行的函数&…...
探索 Text-to-SQL 技术:从自然语言到数据库查询的桥梁
亲爱的小伙伴们😘,在求知的漫漫旅途中,若你对深度学习的奥秘、Java 与 Python 的奇妙世界,亦或是读研论文的撰写攻略有所探寻🧐,那不妨给我一个小小的关注吧🥰。我会精心筹备,在未来…...
Java NIO ByteBuffer 详解
什么是 ByteBuffer ByteBuffer 是 Buffer 的一个具体实现,专门用于存储和操作字节数据。它提供了高效的、基于内存的 I/O 数据处理方式。 Buffer 类是构建 Java NIO 的基础,其中 ByteBuffer 类是 Buffer 子类中最受欢迎的。这是因为字节类型是最通用的…...
【机器学习】简单线性回归算法及代码实现
线性回归算法 一、摘要二、线性回归算法概述三、损失函数的定义和衡量标准四、简单线性回归的求解和应用五、机器学习算法一般求解思路 一、摘要 本文讲解了线性回归算法的基础知识和应用,强调线性回归主要用于解决回归问题。通过分析房产价格与房屋面积的关系&…...
【前端开发】query参数和params参数的区别
在Web开发中,query参数(URL查询参数)和params参数(路由参数)是两种不同的URL传参方式,它们的核心区别如下: 一、 位置不同 query参数params参数位置URL中?之后,用&连接多个参数…...
人工智能数学基础学习PPT
学习视频:人工智能 -数学基础 文章目录 1.简介1.函数2.极限3.无穷小与无穷大4.连续性与导数5.偏导数6.方向导数7.梯度 2.微积分1.微积分基本想法2.微积分的解释3.定积分4.定积分性质5.牛顿-莱布尼茨公式 3.泰勒公式与拉格朗日1.泰勒公式2.一点一世界3.阶数的作用4.…...
企业文件防泄密软件哪个好?
在企业文件防泄密软件领域,天锐绿盾和中科数安都是备受认可的品牌,它们各自具有独特的特点和优势。 以下是对这两款软件的详细比较: 天锐绿盾 功能特点 集成性强:集成了文件加密、数据泄露防护DLP、终端安全管理、行为审计等数据安…...
美丽 百褶裙提示词 + MD
MD 参考教程:Marvelous Designer零基础教学,MD布料制作-百褶裙建模制作,次世代教学_哔哩哔哩_bilibili 【MD新手教程】30分钟教会你制作百褶裙,Marvelous Designer超简单入门案例教程_哔哩哔哩_bilibili 【c4d技术解析】MD百褶裙…...
解释和对比“application/octet-stream“与“application/x-protobuf“
介绍 在现代 Web 和分布式系统的开发中,数据的传输和交换格式扮演着关键角色。为了确保数据在不同系统之间的传输过程中保持一致性,MIME 类型(Multipurpose Internet Mail Extensions)被广泛应用于描述数据的格式和内容类型。在 …...
基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真
目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 系统建模 4.2 YALMIP工具箱 4.3 CPLEX工具箱 5.完整工程文件 1.课题概述 基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真。通过YALMIP和cplex这两个工具箱,完成微电网的最优调…...
AI前端开发技能提升与ScriptEcho:拥抱AI时代的前端开发新范式
随着人工智能技术的飞速发展,AI前端开发岗位对技能的要求也水涨船高。越来越多的企业需要具备AI相关知识和高级前端开发能力的工程师,这使得传统的前端开发模式面临着巨大的挑战。如何提升开发效率,降低人力成本,成为了摆在所有前…...
LeetCode题解:2690. 无穷方法对象,Proxy
Problem: 2690. 无穷方法对象 思路 这个问题的核心在于创建一个对象,该对象能够响应对其任何方法的调用,并返回调用的方法名称。为了实现这一点,我们可以利用 JavaScript 中的 Proxy 对象。Proxy 对象允许我们自定义对象的基本操作ÿ…...
Python中的HTTP客户端库:httpx与request | python小知识
Python中的HTTP客户端库:httpx与request | python小知识 在Python中,发送HTTP请求和处理响应是网络编程的基础。requests和httpx是两个常用的HTTP库,它们都提供了简洁易用的API来发送HTTP请求。然而,httpx作为新一代的HTTP客户端…...
RabbitMQ使用guest登录提示:User can only log in via localhost
guest用户默认是无法使用远程访问的,生产环境建议直接在对应服务器登录使用。 1、通过创建新增用户并赋予权限实现远程登录 添加新用户 rabbitmqctl add_user zjp zjp 设置管理员 rabbitmqctl set_user_tags zjp administrator 设置新用户的权限 rabbitmqctl…...
#渗透测试#批量漏洞挖掘#Crocus系统—Download 文件读取
免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…...
基于Matlab实现六自由度机械臂正逆运动仿真(源码)
在机器人技术领域,六自由度机械臂是一种广泛应用的设备,它可以实现空间中的位置和姿态控制。本项目聚焦于六自由度机械臂的正逆运动学仿真,利用MATLAB2016b作为开发工具,旨在深入理解并掌握机械臂的工作原理和运动控制。 正运动学…...
亚信安全正式接入DeepSeek
亚信安全致力于“数据驱动、AI原生”战略,早在2024年5月,推出了“信立方”安全大模型、安全MaaS平台和一系列安全智能体,为网络安全运营、网络安全检测提供AI技术能力。自2024年12月DeepSeek-V3发布以来,亚信安全人工智能实验室利…...
Django 创建第一个项目
Django 创建第一个项目 引言 Django 是一个高级的 Python Web 框架,它鼓励快速开发和干净、实用的设计。本指南将带您从头开始创建一个简单的 Django 项目,以便您能够熟悉 Django 的基本结构和概念。 准备工作 在开始之前,请确保您已经安装了 Python 和 Django。以下是安…...
RL基础概念
RL意味着模型从真实世界中获取反馈,根据策略调整参数,以达到最大化反馈的优化算法; 强化学习的核心在于:1.试错(因为仅凭reward无法得到明确的优化方向,所以需要不断多尝试);2.延迟奖…...
像取快递一样取文件?
看到一个很有意思的项目,像我们做软件分享的感觉会有用,就是现在服务器费用太贵了,如果自建的话感觉不是很值得。 FileCodeBox FileCodeBox 是一个轻量级的文件分享系统,它基于匿名口令分享文本和文件,无需注册登录&…...
Jenkins 新建配置Pipeline任务 三
Jenkins 新建配置Pipeline任务 三 一. 登录 Jenkins 网页输入 http://localhost:8080 输入账号、密码登录 一个没有创建任务的空 Jenkins 二. 创建 任务 图 NewItem 界面左上角 New Item 图NewItemSelect 1.Enter an item name:输入任务名 2.Select an ite…...
React 前端框架搭建与解析
React 前端框架搭建与解析 一、 概述 React 是 Facebook 开源的用于构建用户界面的 JavaScript 库,以其组件化、声明式编程范式以及高效的虚拟 DOM 渲染机制,成为当今最流行的前端框架之一。本文将带领你从零开始搭建一个 React 开发环境,并深入解析其核心概念。 二、 环…...
像指针操作、像函数操作的类
像指针一样的类。把一个类设计成像一个指针。什么操作符运用到指针上? 使用标准库的时候,里面有个很重要的东西叫容器。容器本身一定带着迭代器。迭代器作为另外一种智能指针。迭代器指向容器里的一个元素。迭代器用来遍历容器。 _list_iterator是链表迭…...