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

news2024/10/7 18:31:43

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

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

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

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

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

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

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

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

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

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

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

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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/947022.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【工作笔记-0038】mongodb mongorestore 命令行导入 bson.gz数据

1. 导出的集合文件格式如下(也就是导出的表文件): 例如: D:\Files\xxxx集合名称.bson.gz 怎样导出,这里不做介绍,用 mongodb compass 或者 studio 3t 都可以 2. 下载命令行导入工具: 官方…

webpack(一)模块化

模块化演变过程 阶段一:基于文件的划分模块方式 概念:将每个功能和相关数据状态分别放在单独的文件里 约定每一个文件就是一个单独的模块,使用每个模块,直接调用这个模块的成员 缺点:所有的成员都可以在模块外被访问和…

Redis发布订阅

Redis发布订阅 Redis 发布订阅(pub/sub)是一种 消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息。 Redis 客户端可以订阅任意数量的频道。 订阅/发布消息图: 下图展示了频道 channel1 , 以及订阅这个频道的三个客户端 —…

时间范围选择时选中日期所使用的当日内具体时刻 如00:00:00= 23:59:59

<el-form-item label"审核时间&#xff1a;"><el-date-pickerv-model"auditTime"type"datetimerange"range-separator"至"value-format"yyyy-MM-dd HH:mm:ss"start-placeholder"开始日期"end-placeholde…

智慧园区方案:AI与视频融合技术如何助力园区监管智能化升级?

一、行业背景 随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;技术正在各个领域迅速应用和推广。其中&#xff0c;智慧园区是一个重要的应用场景&#xff0c;它通过AI技术的支持&#xff0c;实现了园区的智能化管理和高效运营。 1、园区管理智慧化升级需求…

Centos7 安装Docker管理工具Portainer

0、前提条件 已安装Docker并且开启Docker&#xff0c;安装Docker可参见&#xff1a;Centos7 安装 Docker_瘦身小蚂蚁的博客-CSDN博客 1、 拉取portainer-ce镜像 docker pull portainer/portainer-ce:latest [rootlocalhost ~]# docker pull portainer/portainer-ce:latest la…

git视频教程Jenkins持续集成视频教程Git Gitlab Sonar教程

[TOC这里写自定义目录标题) https://edu.51cto.com/lesson/290903.html 欢迎使用Markdown编辑器 你好&#xff01; 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff0c;了解一下Markdown的基本语法知识。…

科技资讯|苹果Vision Pro头显申请游戏手柄专利和商标

苹果集虚拟现实和增强现实于一体的头戴式设备 Vision Pro 推出一个月后&#xff0c;美国专利局公布了两项苹果公司申请的游戏手柄专利&#xff0c;其中一项的专利图如下图所示。据 PatentlyApple 报道&#xff0c;虽然专利本身并不能保证苹果公司会推出游戏手柄&#xff0c;但是…

JVM 是怎么设计来保证new对象的线程安全

1、采用 CAS 分配重试的方式来保证更新操作的原子性 2、每个线程在 Java 堆中预先分配一小块内存&#xff0c;也就是本地线程分配缓冲&#xff08;Thread Local AllocationBuffer&#xff0c;TLAB&#xff09;&#xff0c;要分配内存的线程&#xff0c;先在本地缓冲区中分配&a…

15-mongodb

一、 MongoDB 简介 1 什么是 MongoDB MongoDB 是一个基于分布式文件存储的数据库。由 C语言编写。在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系…

自动化实时在线静电监控系统的构成

自动化实时在线静电监控系统是一种帮助企业监测和管理静电问题的技术解决方案。静电在许多工业和商业环境中都是一个潜在的风险和生产问题。通过使用这样的监控系统&#xff0c;企业可以及时发现并采取对策来预防或减轻可能的静电问题。 该系统通常由以下组成部分构成&#xf…

HTML及CSS入门及精通

前言 HTML&#xff08;超文本标记语言&#xff09;和CSS&#xff08;层叠样式表&#xff09;是构建网页的两个基本技术。HTML用于定义网页的结构和内容&#xff0c;而CSS用于控制网页的样式和布局。本教程将介绍HTML和CSS的入门知识&#xff0c;并逐步引导您掌握更高级的技巧和…

智安网络|探索物联网架构:构建连接物体与数字世界的桥梁

物联网是指通过互联网将各种物理设备与传感器连接在一起&#xff0c;实现相互通信和数据交换的网络系统。物联网架构是实现这一连接的基础和框架&#xff0c;它允许物体与数字世界之间的互动和协作。 一、物联网架构的概述 物联网架构是一种分层结构&#xff0c;它将物联网系…

ceph中PGLog处理流程

ceph的PGLog是由PG来维护&#xff0c;记录了该PG的所有操作&#xff0c;其作用类似于数据库里的undo log。PGLog通常只保存近千条的操作记录(默认是3000条&#xff0c; 由osd_min_pg_log_entries指定)&#xff0c;但是当PG处于降级状态时&#xff0c;就会保存更多的日志&#x…

AUTOSAR从入门到精通-【应用篇】参照AUTOSAR架构的柴油车后处理集成电控系统软件设计与研究

前言 在各种燃料类型的车辆中,由于柴油机具有动力性强、热效率高、经济性好等众多优 势,因此在重型货车、大中型客车以及非移动道路机械中得到了广泛的应用,其中非道路 移动机械源对排气污染物的贡献也不容忽视。根据相关调查,柴油机的在商用车装机量占 商用车总量的80%以…

基于非洲秃鹫算法优化的BP神经网络(预测应用) - 附代码

基于非洲秃鹫算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于非洲秃鹫算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.非洲秃鹫优化BP神经网络2.1 BP神经网络参数设置2.2 非洲秃鹫算法应用 4.测试结果&#xff1a;5…

SQLServer2008数据库还原失败 恢复失败

源地址&#xff1a;http://www.taodudu.cc/news/show-1609349.html?actiononClick 还原数据库问题解决方案 在还原数据库“Dsideal_school_db”时&#xff0c;有时会遇见上图中的问题“因为数据库正在使用&#xff0c;所以无法获得对数据库的独占访问权”&#xff0c;此时我们…

七、Kafka-Kraft 模式

目录 7.1 Kafka-Kraft 架构7.2 Kafka-Kraft 集群部署 7.1 Kafka-Kraft 架构 左图为 Kafka 现有架构&#xff0c;元数据在 zookeeper 中&#xff0c;运行时动态选举 controller&#xff0c;由controller 进行 Kafka 集群管理 右图为 kraft 模式架构&#xff08;实验性&#xff…

Xshell7和Xftp7的下载、安装及连接服务器的教程

1.下载 1.官网地址&#xff1a; XSHELL - NetSarang Website 选择学校免费版下载 2.将XSHELL和XFTP全都下载下来 2.安装 安装过程就是选择默认选项&#xff0c;然后无脑下一步 3.连接服务器 1.打开Xshell7&#xff0c;然后新建会话 2.填写相关信息 出现Connection establ…

如何通过四个步骤清理网络防火墙规则

组织必须确保适当的安全策略到位&#xff0c;以保护其投资并优化其安全有效性。然而&#xff0c;随着网络的扩展和复杂性的增加&#xff0c;网络运营团队面临着管理来自多个供应商的大量防火墙和网络设备的挑战。他们必须解决分散的基础设施、职能孤岛、人员配置问题、分散的管…