position: relative;导致页面卡顿

最新推荐文章于 2022-04-24 21:57:08 发布
最新推荐文章于 2022-04-24 21:57:08 发布
阅读量548 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/tongbiao/p/10027975.html
本文描述了一个Vue单页面应用在特定页面切换时出现卡顿的现象，通过深入排查发现，问题根源在于某模块外层div使用了position:relative属性，导致渲染性能下降。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.现象: vue单页面项目 只有在某个页面切换的时候出现页面卡顿现象

经过长时间排查 确定最终原因是 该模块外层div使用  position: relative

根本原因：待完善

转载于:https://www.cnblogs.com/tongbiao/p/10027975.html

微信小程序吸顶两种方式，一种js,一种css (position: sticky； top: 0；)
hangGe0111的博客
08-10 2063
1.比较常用的方式，通过js获取当前元素距离顶部的高度，同时通过onPageScroll监听页面滚动的高度，对比二者的大小，通过fixed定位来实现置顶悬浮。（此方式需注意，不要一直setdata，不然会出现卡顿现象）。 1. wxml <view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view> <view style="width: 1
【高频考点精讲】CSS动画性能优化：为什么你的动画卡顿？这些技巧让你的页面丝般顺滑
全栈老李的博客
06-26 752
优化CSS动画就像调教一辆跑车——你得知道引擎（浏览器渲染引擎）的工作原理，才能把性能压榨到极致。transform和opacity是你的好朋友避免布局颠簸合理使用will-change监控图层和重绘下次再看到动画卡顿，就掏出这些工具给它做个"性能SPA"。我是全栈老李，我们下期再见！
全是 position：relative 惹的祸
茶叶沫ě
02-07 929
今天在做一个人家二次开发过的项目在其他浏览器中没有任何问题，但是在ie6下面简直惨不忍睹，但是仔细调试下来其实主要问题只有两个： 1、浮动问题： 这个已经是老生常谈，经常出现这样那样的错位，其实都是因为浮动没有清除造成的。 解决办法：加clear:both; 2、position:relative 剩下的全是position:relative 惹的祸了。      i
CSS Position定位过多是否会影响浏览器渲染速度
weixin_34250709的博客
03-26 211
一直有个传说就是页面里的Position多了会影响浏览器渲染速度，今天做个测试看看结果如何。 检验的方法： 动态创建一定数量的div &gt; 开始计算时间 &gt; 导入css文件渲染 &gt; onload计算时间，看那种方法延迟最短。 为了统计的数据有意义没有设置上万个节点，以cnmo首页的节点数为例，chrome firefox统计为4315，ie统计为4372，所以设置4500进行...
"position:relative"在IE中的Bug
hyj1254
03-22 212
请看下图： [img]http://hyj1254.iteye.com/upload/picture/pic/57399/c9f3d2a0-0e31-3660-85fd-b872ca2c584d.jpg[/img] 即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。[color=blue]根源就是子元素的"position...
使用position：relative定位出现抖动
弯弯^.^的博客
09-01 606
问题描述： 直接在当前容器使用relative定位后点击按钮出现了抖动 <div class="err-msg"> 这是一行文字，这是一行文字</div> .err-msg { position: relative; bottom: 62px; left: 66px; font-size: 12px; } 解决方案： 在父元素中先使用absolute定位，再对子元素使用relative定位 <div class="err-msg">
relative相对定位移动以及background-position的坐标
03-15 668
每一个元素都会有属于自己定位系统 今天想总结relative（相对定位）的一些小知识 如果我们设置了一个元素的position属性值为relative那么这个元素就属于相对定位 而我们设置相对定位后，改变了元素的位置，但它并没有脱离文档流，他原来所占的位置还是实实在在存在的 所以并不会引起父元素的高度坍塌，也不会改变周边元素的布局，它仍然属于常规文档流 然而，当我们想要给他的l...
使用position-fixed 保持流畅。on WindowsPhone 8.1 IE
01-04 209
是手机端浏览器不支持position:fixed 吗？ **使用了position:fixed之后** 遇到的问题： 想要固定显示的内容并没有固定显示 触屏上滑动时，卡顿现象严重 可能的原因 html，body 标签是否有固定高度，如 html,body{height:100%} 解决方法：html,body{min-height:100%;} posit
在uniapp中，使用多个position: sticky
03-20
性能方面，过多的sticky元素可能导致滚动卡顿，需要提醒用户控制数量，或者使用替代方案如scroll-view的scroll-into-view。 可能用户没有说出来的需求是，他们可能在开发一个需要多个固定头部或侧边栏的应用，比如...
vue2 div position:fixed时 底部不全 如何调整
最新发布
07-18
1. **元素被裁剪或溢出**：当使用position: fixed时，元素可能被父容器裁剪，特别是如果父容器有overflow: hidden或position: relative等样式。 2. **z-index问题**：元素可能被其他元素覆盖，导致部分内容不可见。 ...
//cesium.vue <template> <div class="container"> <div id="cesiumContainer"></div> <canvas id="threeContainer"></canvas> <!-- UI覆盖层组件--> <Overlayui /> </div> </template> <script setup> import { onMounted } from "vue"; import { EffectComposer,initCesium, initThreejs, init3DObject, startRenderLoop } from "./three-cesium/three_cesium.js"; onMounted(() => { initCesium() initThreejs() init3DObject() startRenderLoop() EffectComposer() }) </script> <style scoped> .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } #cesiumContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #threeContainer { position: absolute; height: 100%; width: 100%; margin: 0; z-index: 10; pointer-events: none; } .cesium-popup { background-color: rgba(0, 0, 0, 0.75); color: white; padding: 8px 12px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); font-size: 14px; z-index: 999; pointer-events: auto; transition: opacity 0.2s ease; opacity: 1; } .popup-header { font-weight: bold; margin-bottom: 4px; } .popup-body { font-size: 12px; } </style>
03-12
或者，后处理效果可能没有正确应用到Three.js的场景中，导致轮廓不显示。另外，内存管理方面，卸载时是否清理了所有资源？ 在解释代码时，需要逐一分解各个部分的功能，并指出关键点，比如容器层级、初始化顺序、后...
vscode 配置
weixin_34274029的博客
07-14 2067
1.关闭悬浮提示 "editor.parameterHints": false 2.其他配置 // 下面四行关闭智能提示 "editor.quickSuggestions": false, "editor.parameterHints": false, "editor.wordBasedSuggestions": false, "editor.snippetSugge...
移动端web页面滚动不流畅，卡顿闪烁解决方案
盏茶作酒的博客
03-12 1593
1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果，设置如下实现惯性滚动和弹性效果： -webkit-overflow-scrolling: touch 2.position属性导致的页面滚动不流畅问题： <div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;"> <div style="position: relativ
关于移动端滑动卡顿现象的解决方案
热门推荐
GrowthHacker的博客
03-12 2万+
-webkit-overflow-scrolling: touch IOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow: scroll; //该属性随着手指离开立即停止 -webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动 -webkit-transform: ...
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿
sinat_33337475的博客
09-28 1万+
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿，所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位。如果不用这个属性的话，使用overflow-y
页面卡顿的原因及排查
weixin_小白鼠的博客
04-24 2万+
页面卡顿的原因、排查及解决方案 一、渲染不及时，页面掉帧 1》网络请求太多，请求返回的数据比较慢 接口返回慢的话，后端做些优化；前端适当做些缓存，减少不必要的重复的请求 可以从调试工具中的Network查看请求情况 2》回流和重绘多 减少dom的操作，适当使用keep-alive,v-show等 平时要养成良好的编码习惯 3》dom节点太多，渲染的比较慢 如果是数据确实太大的话，可能要从业务上调整一下，展示可能要改变下，比如说做分页什么的 从数据上和页面显示上可以查看 二、网页内存占用过高，运行卡顿 有可能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值