页面卡顿的原因及排查

最新推荐文章于 2025-03-23 05:15:00 发布
最新推荐文章于 2025-03-23 05:15:00 发布
阅读量1.9w 收藏 62
点赞数 14
分类专栏： 杂乱分类（html css为主） 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50576800/article/details/124392902
版权
本文探讨了导致页面卡顿的两大因素：渲染不及时和内存占用过高。针对渲染问题，建议减少网络请求，避免频繁DOM操作，合理使用缓存策略。对于内存问题，关注全局变量、闭包、定时器可能导致的内存泄露，并提供了解决方案，如及时清理引用，正确管理定时器，解除事件绑定等。通过浏览器的Performance面板，可以监控和定位内存泄漏，从而优化页面性能。

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

页面卡顿的原因、排查及解决方案

一、渲染不及时，页面掉帧

1》网络请求太多，请求返回的数据比较慢

接口返回慢的话，后端做些优化；前端适当做些缓存，减少不必要的重复的请求

可以从调试工具中的Network查看请求情况

2》回流和重绘多

减少dom的操作，适当使用keep-alive,v-show等

平时要养成良好的编码习惯

3》dom节点太多，渲染的比较慢

如果是数据确实太大的话，可能要从业务上调整一下，展示可能要改变下，比如说做分页什么的

从数据上和页面显示上可以查看

二、网页内存占用过高，运行卡顿

有可能内存泄露

1》全局变量引起的内存泄露

标记清理；离开作用域自动标记为可回收，在垃圾回收期间被删除

全局变量不会回收，局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁；只要被另外一个作用域所引用就不会被回收 （闭包）

所以我们要尽量减少全局变量的使用，使用完引用类型的数据后解除引用

2》闭包引起的内存泄露

因为引用了其他作用域的变量，所以变量不会被回收

即使解除引用

3》定时器引起内存泄露

window.setTimeout(),window. setInterval()

清理定时器，这时定时器需要给他取名了

4》dom删除时没有解绑事件
5》循环引用

是否存在内存泄露的判断方式

调试工具的Performance

在这里插入图片描述

折线图部分

js heap:js占用内存大小，有没有内存泄露主要看这个（箭头指向的蓝色的线）

如果这条蓝线一直增加那么肯定存在内存泄露，那么可以到Memory中查看堆快照数据

底部的时间总览图形，查看各部分花费的时间：

在这里插入图片描述
loading：网络请求和html解析时间

scripting:js执行时间

redering:重排时间，计算尺寸，位置信息

painting：绘制时间

system:系统占用时间

idle:空闲等待时间

memory面板

在这里插入图片描述
在这里插入图片描述

我们可以多次快照进行对比，也可以看单次快照的趋势

网页加载缓慢的原因及解决方法
2301_79326254的博客
09-19 4913
然而，有时我们可能会遇到网页加载缓慢的问题，这可能会导致用户流失和不良的用户体验。然而，有时候我们可能会遇到网页加载缓慢的问题，这可能会导致用户流失和不良的用户体验。综上所述，网页加载缓慢可能是由于网络问题、服务器问题或前端问题导致的。1.5 使用CDN（内容分发网络）：CDN可以将网站的静态资源分发到全球各地的服务器，使用户可以从离他们更近的服务器加载资源，从而减少网络延迟。2.1 服务器负载过高：如果服务器上运行的应用程序或服务负载过高，它可能无法及时处理所有的请求，导致网页加载缓慢。
Android 13 Settings蓝牙列表卡顿问题排查及优化过程
龚礼鹏的博客
12-07 1782
此时我们的卡顿优化基本完成了，我们应该要考虑内存是否会泄漏，如果大家不知道哪些需要回收可以用leakcanary和android profiler进行内存检测，看代码有没有内存泄漏。
前言：做前端开发的同学，都遇到过页面节点过多，从而导致页面加载很慢，
03-29
前言：做前端开发的同学，都遇到过页面节点过多，从而导致页面加载很慢，或者浏览器直接崩溃~   在小程序开发中，下拉刷新数据的用法应该比较多，那么小程序页面节点最大数量又是多大呢？ 刚才最近在修改一个投票的小程序，发现投票最多的一个，竟然有近1W人参与，然后在查看投票详情时，小程序页面就是个空页面（已经崩溃了） 然后就查看了API返回的数据： (此图片来源于网络，如有侵权，请联系删除! )   这么多数据直接扔到小程序模板里面去遍历(wx:for)，开发者工具的日志里面就直接报错了：invokeWebviewMethod 数据传输长度为 1233778 已经超过最大长度 1048576   (此
多维分析前端页面卡顿不流畅怎么办
rqgxy的博客
05-21 509
界面操作尽管属前端，但卡顿大部分并不是前端的问题，找前端开发商也是没有用的。后台负责计算任务，当出现压力过重的时候，前端表现响应时间长，实际就是后台响应速度变慢了。这个是造成界面操作卡顿的原因，解决方案则需要后台采用高性能数据库。 目前多维分析产品的后台数据源通常是常规数据库、专业数据仓库及 BI 产品自带的数据源，整个系统性能基本都是靠它们自身的计算能力。但实际都有各自的缺点，普通库一般是行存，数据量小还可以，一旦数据量大就很难提供给多维分析高性能；专业数仓多数采用列存，性能问题不大，但是价格太贵，建设
实时洞察 [特殊字符] 前端页面卡顿监测技术方案
最新发布
Andrew_Chenwq的博客
03-23 751
前端卡顿通常指的是页面在渲染、交互或动画过程中，由于性能瓶颈而导致的界面响应迟滞的现象。页面渲染延迟：用户操作后，页面未能及时响应。动画不流畅：过渡或动画效果出现停顿或卡顿现象。输入延迟：用户输入（如键盘输入、鼠标点击）后，界面反应滞后。滚动卡顿：页面滚动过程中出现画面拖影或不平滑。卡顿通常由浏览器主线程被阻塞引起，而主线程的任务主要包括 DOM 渲染、JavaScript 执行、布局计算和绘制等。每当主线程任务过多，尤其是 JavaScript 执行时间过长时，卡顿现象就容易出现。
很多客户反映前端页面很卡解决思路
huzhiqiangCSDN的博客
01-25 3247
很多客户反映前端页面很卡解决思路 问题可能分析： 1、数据库问题，压力过大，如慢查询过多导致，某个查询吃完了内存，数据库并发量大 都有可能 2、web服务器CPU高，很多线程被锁，很多线程在等待IO或者其他服务响应 3、网络宽带原因 具体查找步骤 1、检查Mysql数据库压力 （1）可以通过监控界面查看cpu情况，如果没有监控界面权限，执行下面语句 -- 查询所有事务的信息，当表被锁或查询缓慢时使用 SELECT * FROM information_schema.INNODB_TRX ORDER BY
软件测试面试题：网页崩溃的原因是什么？如何排查？
测试萌萌
09-19 1652
代码错误：网页的前端代码（如HTML、CSS和JavaScript）中可能存在错误，例如语法错误、逻辑错误或代码冲突。这些错误可能导致网页无法正确渲染或执行，进而导致崩溃。常见的错误包括变量未定义、函数调用错误、DOM操作问题等。
【测试面试题】页面很卡的原因分析及解决方案
软件自动化测试技术交流、资源分享
07-07 1136
最近市场行情，很多小伙伴有被动跳槽的打算，最近小编会主要更新一些相关的面试题，希望能帮到大家。
在前端开发中，有哪些因素会导致页面卡顿
热门推荐
前端361
06-06 1万+
前端开发不像后端那样，很少出现有大量算法的场景，但是前端性能也是需要优化的。好的代码是保证网页平稳高性能运行的基础，结合以往开发中遇到的场景，本文对前端网页卡顿的原因进行了梳理和分析，并给出了对应的解决方法。 前端页面卡顿的原因有很多，从渲染机制和运行上可以分为两大类，分别是： 渲染不及时，页面掉帧 网页内存占用过高，运行卡顿 两种类型又可细分如下： 渲染不及时，页面掉帧 长时间占用js线程 页面回流和重绘较多 资源加载阻塞 内存过大导致的页面卡顿 内存泄漏导致内存过大
前端性能优化-页面性能优化-页面加载缓慢的因素
weixin_42142447的博客
03-27 1349
页面加载缓慢地因素在抛开网速不谈的情况下，一般分为。，这里只说客户端因素。
前端页面卡顿？或是DOM操作惹的祸，需优化代码
weixin_34378969的博客
08-01 684
文档对象模型（DOM）是一个独立 于特定语言的应用程序接口。在浏览器中，DOM接口是以JavaScript语言实现的，通过JavaScript来操作浏览器页面中的元素，这使得 DOM成为了JavaScript中重要的组成部分。在富客户端网页应用中，界面上UI的更改都是通过DOM操作实现的，并不是通过传统的刷新页面实现 的。尽管DOM提供了丰富接口供...
一文带你了解如何排查内存泄漏导致的页面卡顿现象
m0_70275087的博客
05-03 695
function fn1 () { let a = { name: ‘零一’ } let b = 3 function fn2() { let c = [1, 2, 3] } fn2() return a } let res = fn1() 以上代码的调用栈如下图所示： 图中左侧为栈空间，用于存放一些执行上下文和基本类型数据；右侧为堆空间，用于存放一些复杂对象数据 当代码执行到fn2()时，栈空间内的执行上下文从上往下依次是 fn2函数执行上下文 => fn1函数执行上下文 => 全局执行上下
Android 卡顿排查工具
jasenwan88的专栏
06-17 1845
Android 卡顿排查工具 Traceview 和 systrace 都是我们比较熟悉的排查卡顿的工具，从实现上这些工具分为两个流派。 第一个流派是 instrument。获取一段时间内所有函数的调用过程，可以通过分析这段时间内的函数调用流程，再进一步分析待优化的点。 第二个流派是 sample。有选择性或者采用抽样的方式观察某些函数调用过程，可以通过这些有限的信息推测出流程中的可疑点，然后再继续细化分析。 1. Traceview 吐槽的比较多的工具。它利用 Android ...
iOS 卡顿原因及优化思路
wx99988的博客
01-25 3547
很多iOS 开发，都会面临到解决开发过程中的卡顿问题。卡顿就是在应用使用过程中出现界面不响应或者界面渲染粘滞的情况，用户在操作App时，会出现的页面掉帧现象，给用户直接观感受就是页面卡卡的，严重影响用户体验。这种情况下可以使用友盟+U-APM应用监控平台，对应用进行分析，找到卡顿原因，进行优化。 卡顿原因 卡顿产生的原因就是CPU和GPU没有及时处理好数据，针对卡顿的优化就有思路了：尽可能减少 CPU 和 GPU 资源的消耗。 卡顿优化 — CPU 1、尽量用轻量级的对象，比如用不到事件处理的地方使
android卡顿分析的原因
weixin_52700281的博客
02-11 4097
　　android开发中卡顿问题一直是个比较棘手又重要的问题，严重影响了用户的体验感。解决卡顿的问题就要对APP进行优化了，而优化是一个任重而道远的过程，必须在意每一个环节，否则当你想要优化的时候，发现到处都是坑，已经不知道填补哪里了，所以我们必须一点一滴的做起。刚好前段时间，负责APP的性能调优工作，通过使用友盟+u-apm 应用性能监控平台 ，总结了遇到的一些卡顿问题以及分析。最终使得卡顿问题，明显优化，在低端手机上，效果尤为明显。接下来就为大家介绍下android使用不流畅、卡顿分析的原因有哪些。
性能优化中使用Profiler进行页面卡顿的排查及解决方式
Mr_Tony的专栏
11-24 3355
Profiler对页面卡顿的排查及处理办法
网站打开很卡是为什么？
weixin_57519888的博客
06-15 3735
服务器
前端页面卡顿-代码优化
weixin_30856725的博客
03-02 684
原文地址--->http://developer.51cto.com/art/201504/473422.htm 最近做项目时遇到了页面加载卡顿问题，一时没有头绪，感到无从下手，看到这篇文章，所以整体梳理了一下，在此记录。 在富客户端网页应用中，界面上的UI的更改是通过DOM操作实现的。 尽管DOM提供了丰富接口供外部调用，但是dom操作的代价很高， 页面前端代码的性...
记一次页面替换时遮罩层卡死的问题排查过程
qq_34823218的博客
05-18 271
问题描述 列表页面进入下一页面的遮罩层卡死 偶发 android没这种情况， ios（所有机型）偶尔有 react-native-0.48 排查过程 1.去跳转过后的页面排查 里面有两个页面加载时的遮罩层loading样式 1.1 直接去掉两个遮罩层，可以，但是要更新，无法热更新至已有的App Store上的包 而且改了原有逻辑 不到万不得已，不采用这种方式 1.2 猜测是跳转后的页面内两个遮罩层的卡顿 ①去掉第二个遮罩层，问题依旧存在 而且必现了 ②第二...
EasyPlayer分屏卡顿
01-04
### 关于EasyPlayer分屏播放时出现的卡顿问题 当使用EasyPlayer实现多路视频分屏播放时，如果遇到卡顿现象，通常可以从以下几个方面来排查并解决问题： #### 优化网络连接质量 确保用于传输视频流的网络环境稳定可靠。对于实时性较高的应用场景，建议采用低延迟、高带宽的网络链路，并尽可能减少中间节点的数量以降低数据包丢失率和抖动情况的发生。 #### 调整浏览器端配置参数 适当调整HTML页面中的`<video>`标签属性以及JavaScript API调用方式可以帮助改善用户体验。例如设置合理的缓冲区大小、启用硬件加速等功能均有助于提高解码效率[^1]。 ```javascript const playerOptions = { autoplay: true, controls: true, fluid: false, // 不自动适应容器尺寸变化 preload: 'auto', }; // 初始化多个实例时注意区分不同的ID for (let i = 0; i < videoUrls.length; ++i) { const playerId = `player-${i}`; new EasyPlayer(playerId, { ...playerOptions }, () => { easyPlayers[i].setSrc(videoUrls[i]); }); } ``` #### 减少不必要的资源消耗 避免在同一页面内加载过多未使用的脚本库或样式表；关闭不必要开启的功能模块（如统计上报等），从而减轻前端渲染压力。另外，在创建多个播放组件实例前务必确认已经移除了重复引用项以防潜在冲突[^2]。 #### 实施服务器侧性能优化措施 针对长时间运行的服务程序定期执行垃圾回收操作可有效防止内存泄漏问题发生。同时合理规划存储策略，及时清理不再需要的历史记录也有利于维持整体系统的健康状态[^3]。 通过上述几个方面的综合考虑与实践应用应该能够显著缓解乃至彻底消除EasyPlayer在进行多窗口并发播放过程中所面临的卡顿困扰。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值