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

记1次前端性能优化之CPU使用率

碰到这样的一个问题,用户反馈页面的图表一直加载不出来,页面还卡死

打开链接页面,打开控制台 Network

看到有个请求一直pending,结合用户描述,页面一直loading,似乎验证了我的怀疑:后端迟迟没有相应。

但是,还有个现象,页面卡死了,后端没响应怎么能导致页面卡死呢?

既然是页面卡死,那无非是CPU满了,或者内存满了

打开浏览器性能监控面板看看

可以看到内存没有问题,但是CPU使用率一直100%,还有DOM节点2万多,显然,异常出在了这两个地方,但是有没有什么关联呢?

首先思考,什么会导致CPU使用率长期100%呢?

 1. js代码一直在运行  2. 页面节点太多,渲染卡住  3.两者皆有

这个时候我们就需要使用 Perfomance 分析

我们发现,主要运行时间都是js运行,有一个长任务一直没有释放,接下来我们可以通过下钻上图标红的Long Task就可以定位出问题的代码了。
 

回到最开始的Network,也不难发现,是在处理这个pending中的请求的结果时,js一直在运行,我们也可以通过找出本次调用来排查相关代码

不过这一块是比较让人疑惑的,控制台不应该运行在独立的进程吗,为什么会受js运行影响?这个是我们讨论的话题外了。

 

http://www.lryc.cn/news/150688.html

相关文章:

  • 记一次postgres导致cpu100%
  • 详谈SpringBoot启动项目后执行自定义方法的方式
  • KubeAdmin方式搭建K8S(1.26.0)
  • 代码随想录打卡—day57—【编辑距离】— 9.2+9.3 编辑距离系列
  • Blender界面学习03 原点、鼠标所在位置的缩放与旋转
  • 指针结构体题
  • 【力扣每日一题02】数组篇--删除有序数组中的重复项
  • Vue在表格中拿到该行信息的方式(作用域插槽-#default-scope-解决按钮与行点击的顺序问题)
  • OJ练习第158题——单词拆分 II
  • ArcGIS地块面积分割调整工具插件
  • 基于Matlab实现多个图像增强案例(附上源码+数据集)
  • 计算机网络 概述部分
  • 使用DOSBOX运行TurboC2,TC2使用graphics库绘图
  • OpenCV(二):认识Mat容器
  • springboot整合Excel填充数据
  • c语言技术面试记录 ---- 纲要、题目、分析及给分标准
  • 前端进阶之——模块化
  • Python爬虫抓取表情包制作个性化聊天机器人
  • 使用pip命令安装库,装到其他环境中的问题。
  • 如何使用CSS实现一个带有动画效果的进度条?
  • uni-app 报错 navigateTo:fail page “/pages/.../...“ is not found
  • 【unity插件】使用BehaviorDesigner插件制作BOSS的AI行为树
  • 概念解析 | 量子机器学习:将量子力学与人工智能的奇妙融合
  • 【Cortex-M3权威指南】学习笔记4 - 异常
  • RISC-V(2)——特权级及特权指令集
  • Linux——常用命令大汇总(带你快速入门Linux)
  • 记录 使用 git 克隆仓库报错:Warning: Permanently added‘github.com’ to the .....(ssh )
  • kafka---- zookeeper集群搭建
  • linux安装firefox
  • 【MySQL】基础语法总结