记1次前端性能优化之CPU使用率
碰到这样的一个问题,用户反馈页面的图表一直加载不出来,页面还卡死

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

看到有个请求一直pending,结合用户描述,页面一直loading,似乎验证了我的怀疑:后端迟迟没有相应。
但是,还有个现象,页面卡死了,后端没响应怎么能导致页面卡死呢?
既然是页面卡死,那无非是CPU满了,或者内存满了
打开浏览器性能监控面板看看
可以看到内存没有问题,但是CPU使用率一直100%,还有DOM节点2万多,显然,异常出在了这两个地方,但是有没有什么关联呢?
首先思考,什么会导致CPU使用率长期100%呢?
1. js代码一直在运行 2. 页面节点太多,渲染卡住 3.两者皆有
这个时候我们就需要使用 Perfomance 分析了

我们发现,主要运行时间都是js运行,有一个长任务一直没有释放,接下来我们可以通过下钻上图标红的Long Task就可以定位出问题的代码了。
回到最开始的Network,也不难发现,是在处理这个pending中的请求的结果时,js一直在运行,我们也可以通过找出本次调用来排查相关代码

不过这一块是比较让人疑惑的,控制台不应该运行在独立的进程吗,为什么会受js运行影响?这个是我们讨论的话题外了。
相关文章:
记1次前端性能优化之CPU使用率
碰到这样的一个问题,用户反馈页面的图表一直加载不出来,页面还卡死 打开链接页面,打开控制台 Network 看到有个请求一直pending,结合用户描述,页面一直loading,似乎验证了我的怀疑:后端迟迟没有相应。 但是…...
记一次postgres导致cpu100%
周末想打两把训练赛,没想到朋友发来一个截图 我:嗯??wtf 于是我上服务器看了一下日志,诶我超,还真的 查看进程详情 [rootiZ7xv7q4im4c48qen2do2bZ project]# pstree -tp postgres memory(904475)─┬─…...
详谈SpringBoot启动项目后执行自定义方法的方式
在 main 启动函数中调用 这个是在所有启动后执行,也是常用之一。 SpringBootApplication public class ListenerApplication {public static void main(String[] args) {SpringApplication.run(ListenerApplication.class, args);System.out.println("启动成…...
KubeAdmin方式搭建K8S(1.26.0)
本次安装K8S版本为1.26.0 服务器环境配置 ip描述配置192.168.233.221master节点CPU(2C) 内存(2G) 硬盘(50G)192.168.233.222node1节点CPU(2C) 内存(2G) 硬盘…...
代码随想录打卡—day57—【编辑距离】— 9.2+9.3 编辑距离系列
1 647. 回文子串 647. 回文子串 纯暴力解法,应该是O(n^3),居然AC了: class Solution { public:int countSubstrings(string s) {// 暴力int cnt 0;cout << s.substr(1,1);for(int i 0; i < s.size();i){…...
Blender界面学习03 原点、鼠标所在位置的缩放与旋转
物体的坐标原点可以移动 放大缩小时默认是屏幕中央,修改为鼠标在哪儿就缩放哪儿 默认旋转时围绕屏幕的中心 可以修改为指定对象旋转...
指针结构体题
目录 初阶指针_指针的概念 1.使用指针打印数组内容 2.字符串逆序 3.整形数组和字符串数组 4.打印菱形 5.打印水仙花数 6.计算求和 结构体 7.喝汽水问题 8.程序死循环解释 9.选择题总结tips 今天是重点是指针&结构体题题目。🆗🆗&#x…...
【力扣每日一题02】数组篇--删除有序数组中的重复项
一、题目 给你一个 升序排列 的数组 nums , 请你原地删除重复出现的元素,使每个元素 只出现一次 返回删除后数组的新长度。 元素的 相对顺序 应该保持 一致 。 然后返回 nums 中唯一元素的个数。 二、思路解析 这道题要用到 “双指针” 的概念&…...
Vue在表格中拿到该行信息的方式(作用域插槽-#default-scope-解决按钮与行点击的顺序问题)
遇到的问题 在做表格的时候,表格是封装好了的,用于展示数据。如果想给单行增加按钮,可以单独写一列存放按钮,最基本的需求是,点击按钮后要拿到数据然后发起请求。 且Vue的element-plus,当我们点击按钮之后…...
OJ练习第158题——单词拆分 II
单词拆分 II 力扣链接:140. 单词拆分 II 题目描述 给定一个字符串 s 和一个字符串字典 wordDict ,在字符串 s 中增加空格来构建一个句子,使得句子中所有的单词都在词典中。以任意顺序 返回所有这些可能的句子。 注意:词典中的…...
ArcGIS地块面积分割调整工具插件
地块分割调整工具可以实现将选定的图斑按照面积比例或者指定的面积,分割成多个图斑。 各个图斑的面积用逗号分隔,比例分割设置时,用整数表示。 面积分割时,最后一个图斑的面积可以不写,插件可以自动计算图斑的面积&a…...
基于Matlab实现多个图像增强案例(附上源码+数据集)
图像增强是数字图像处理中的一个重要步骤,它通过一系列的算法和技术,使图像在视觉上更加清晰、明亮、对比度更强等,以便更好地满足人们的需求。在本文中,我们将介绍如何使用Matlab实现图像增强。 文章目录 部分源码源码数据集下载…...
计算机网络 概述部分
目录 计算机网络在信息时代的作用 计算机网络的重要特征 网络,internet,Internet的区别 局域网 广域网的区别 网络协议的分层 计算机网络在信息时代的作用 计算机网络的重要特征 连通性:彼此联通,交换信息 共享性:信息共享…...
使用DOSBOX运行TurboC2,TC2使用graphics库绘图
Turbo C是由美国Borland公司开发的一套C语言程序开发工具,Borland公司是一家专门从事软件开发、研制的大公司。该公司相继推出了一套Turbo系列软件,如Turbo BASIC、Turbo Pascal、Turbo Prolog,这些软件很受用户欢迎 [1] 。 Turbo C集成了程序…...
OpenCV(二):认识Mat容器
目录 1.什么是Mat类 2.Mat类能存储的数据 整数类型(有符号和无符号): 浮点数类型: 布尔类型: 3.Mat类的创建 1.利用矩阵宽、高和类型参数创建Mat类 2.利用矩陈Size(结构和数据类型参数创建Mat类 3.利用已有Mat…...
springboot整合Excel填充数据
填充一组数据 准备模板 封装数据 import java.util.ArrayList; import java.util.List;/*** 使用实体类封装填充数据** 实体中成员变量名称需要和Excel表各种{}包裹的变量名匹配*/ Data public class FillData {private String name;private int age;// 生成多组数据代码pub…...
c语言技术面试记录 ---- 纲要、题目、分析及给分标准
纲要 作为一个面试官,除了编程类的问题,你还可以考虑问一些关于技术知识、项目经验、解决问题能力和团队合作等方面的问题,以全面评估应聘者的能力和适应性。以下是一个可能的提问逻辑和大纲,供你参考: 技术知识和基…...
前端进阶之——模块化
在做项目的时候越来越发现模块化的重要性,做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率,接下来整理一下模块化相关知识吧。 模块化开发的优点 封装方法、提高代码的复用性、可维护性和可读性隔离作用域,避免污染全…...
Python爬虫抓取表情包制作个性化聊天机器人
在现代社交媒体和即时通讯应用中,使用表情包已经成为一种流行的沟通方。本文将介绍如何利用Python编写一个简单而有趣的聊天机器人,并通过爬虫技术来抓取各类表情包,使其具备个性化特点。 1.确定需求与功能 -定义聊天机器人需要实现哪…...
使用pip命令安装库,装到其他环境中的问题。
问题描述:我们在pycharm中创建了新的虚拟环境,但是在其终端使用Pip命令安装库时,发现库却安装到了其他conda创建的环境中。图示安装gym库,刚开始安装到了其他地方,第二次正确安装。 原因分析:安装库时&…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
