记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.mzph.cn/news/63459.shtml

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

相关文章

LINQ详解(查询表达式)

什么是LINQ? LINQ(语言集成查询)是将查询功能直接集成到C#中。数据查询表示简单的字符串,在编译时不会进行类型检查和IntelliSense(代码补全辅助工具)支持。 在开发中,通常需要对不同类型的数据源了解不同的查询语句,如SQL数据库…

Redis项目实战——商户查询缓存

目录 为什么要用Redis实现商户查询缓存?用Redis实现商户查询缓存的基本思路?使用Redis缓存的问题及解决方法?一、如何保持数据库数据和Redis缓存数据的一致性?1 内存淘汰机制2 超时剔除机制3 主动更新机制(胜&#xff…

sql:SQL优化知识点记录(七)

(1)索引优化5 (2)索引优化6 (3)索引优化7 查询*, 百分号加右边,否则索引会失效 没建立索引之前都是全表扫描 没建立索引 建立索引: 建立索引 id是主键,他也…

全新UI站长在线工具箱系统源码带后台开源版

该系统的全开源版本可供下载,并且支持暗黑模式。 系统内置高达72种站长工具、开发工具、娱乐工具等功能。此系统支持本地调用API,同时还自带免费API接口, 是一个多功能性工具程序,支持后台管理、上传插件、添加增减删功能。 环…

WPF实战项目十三(API篇):备忘录功能api接口、优化待办事项api接口

1、新建MenoDto.cs /// <summary>/// 备忘录传输实体/// </summary>public class MemoDto : BaseDto{private string title;/// <summary>/// 标题/// </summary>public string Title{get { return title; }set { title value; OnPropertyChanged();…

python爬虫-数据解析BeautifulSoup

1、基本简介 BeautifulSoup简称bs4,BeautifulSoup和lxml一样是一个html的解析器&#xff0c;主要功能也是解析和提取数据。 BeautifulSoup和lxml类似&#xff0c;既可以解析本地文件也可以响应服务器文件。 缺点&#xff1a;效率没有lxml的效率高 。 优点&#xff1a;接口设…

实现跨境电商测评和采退、LU卡、LU货最安全的系统方案

首先你要有一个稳定的测评环境系统&#xff0c;这个是做自养号退款、撸货、撸卡的基础。测评环境系统有很多&#xff0c;从早期的虚拟机&#xff0c;模拟机&#xff0c;云手机&#xff0c;VPS等等。这些系统方案先不说成本高&#xff0c;最重要的是成功率很低&#xff0c;所以一…

openGauss学习笔记-57 openGauss 高级特性-并行查询

文章目录 openGauss学习笔记-57 openGauss 高级特性-并行查询57.1 适用场景与限制57.2 资源对SMP性能的影响57.3 其他因素对SMP性能的影响57.4 配置步骤 openGauss学习笔记-57 openGauss 高级特性-并行查询 openGauss的SMP并行技术是一种利用计算机多核CPU架构来实现多线程并行…

Benchmarking Chinese Text Recognition: Datasets, Baselines| OCR 中文数据集【论文翻译】

基础信息如下 https://arxiv.org/pdf/2112.15093.pdfhttps://github.com/FudanVI/benchmarking-chinese-text-recognition Abstract 深度学习蓬勃发展的局面见证了近年来文本识别领域的迅速发展。然而&#xff0c;现有的文本识别方法主要针对英文文本。作为另一种广泛使用的语…

企业架构LNMP学习笔记3

服务器基本环境配置&#xff1a; 1、安装虚拟机&#xff0c;centos7.9 操作系统&#xff1b; 2、网络配置&#xff1b; 3、机器名FQDN设置&#xff1b; 4、DNS解析设置&#xff0c;本地hosts设置&#xff1b; 5、配置yum源环境&#xff1b; 6、vim安装配置&#xff1b; …

RealVNC配置自定义分辨率(AlmaLinux 8)

RealVNC 配置自定义分辨率&#xff08;AlmaLinux8&#xff09; 参考RealVNC官网 how to set up resolution https://help.realvnc.com/hc/en-us/articles/360016058212-How-do-I-adjust-the-screen-resolution-of-a-virtual-desktop-under-Linux-#standard-dummy-driver-0-2 …

Docker环境搭建Prometheus实验环境

环境&#xff1a; OS&#xff1a;Centos7 Docker: 20.10.9 - Community Centos部署Docker 【Kubernetes】Centos中安装Docker和Minikube_云服务器安装docker和minikube_DivingKitten的博客-CSDN博客 一、拉取Prometheus镜像 ## 拉取镜像 docker pull prom/prometheus ## 启动p…

今天使用python进行开发

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…

OpenCV(十一):图像仿射变换

目录 1.图像仿射变换介绍 仿射变换&#xff1a; 仿射变换矩阵&#xff1a; 仿射变换公式&#xff1a; 2.仿射变换函数 仿射变换函数&#xff1a;warpAffine() 图像旋转&#xff1a;getRotationMatrix2D() 计算仿射变换矩阵&#xff1a;getAffineTransform() 3.demo 1.…

Java 枚举是什么?什么是枚举类?枚举类的用途?

目录 1. 什么是枚举&#xff1f; 2. 枚举类 3. 枚举类的用途 1. 什么是枚举&#xff1f; 我们可以从字面意思来理解&#xff0c;枚&#xff1a;一枚一枚的&#xff0c;举&#xff1a;举例&#xff0c;举出&#xff0c;将二者意思结合起来可以理解为一个一个的举出。 这样听…

浅谈城市轨道交通视频监控与AI视频智能分析解决方案

一、背景分析 地铁作为重要的公共场所交通枢纽&#xff0c;流动性非常高、人员大量聚集&#xff0c;轨道交通需要利用视频监控系统来实现全程、全方位的安全防范&#xff0c;这也是保证地铁行车组织和安全的重要手段。调度员和车站值班员通过系统监管列车运行、客流情况、变电…

ESLint 中的“ space-before-function-paren ”相关报错及其解决方案

ESLint 中的“ space-before-function-paren ”相关报错及其解决方案 出现的问题及其报错&#xff1a; 在 VScode 中&#xff0c;在使用带有 ESLint 工具的项目中&#xff0c;保存会发现报错&#xff0c;并且修改好代码格式后&#xff0c;保存会发现代码格式依然出现问题&…

MySQL数据库学习【进阶篇】

MySQL数据库学习进阶篇 MySQL进阶篇已经更新完毕&#xff0c;点击网址查看&#x1f449;&#xff1a;MySQL数据库进阶篇

十五、pikachu之CSRF

文章目录 一、CSRF概述二、CSRF实战2.1 CSRF(get)2.2 CSRF之token 一、CSRF概述 Cross-site request forgery 简称为“CSRF”&#xff0c;在CSRF的攻击场景中攻击者会伪造一个请求&#xff08;这个请求一般是一个链接&#xff09;&#xff0c;然后欺骗目标用户进行点击&#xf…

基于白鲸算法优化的BP神经网络(预测应用) - 附代码

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