客户端性能优化实践

背景

双十一大促时,客户客服那边反馈商品信息加载卡顿,在不断有订单咨询时,甚至出现了商品信息一直处于加载状态的情况,显然,在这种高峰期接待客户时,是没法进行正常的接待工作的。
起初,页面一直处于加载状态,初步认为是后端接口返回太慢导致,后经过后端日志排查,发现接口返回很快,根本不会造成页面一直处于加载状态,甚至出现卡死的状态。后经过不断排查,发现是客户端性能问题导致。

优化前

咨询订单时,只咨询一条订单,用时需要3秒左右,当连续咨询5、6条订单时,用时甚至达到了一分多钟,仅仅5、6条订单竟然用时这么久,那么在持续不断有订单咨询时,页面就会出现一直加载,甚至卡死的状态,明显存在很大的性能问题。
在这里插入图片描述

在这里插入图片描述

利用performance工具可以分析主线程的Event Loop,图中标出的Main就是主线程。
主线程是不断执行 Event Loop 的,可以看到有很多个 Task(宏任务),当主线程中的任务过多时,会导致主线程长时间被占用,无法及时响应用户的交互操作,从而影响用户体验。这种情况下,页面可能会出现卡顿、延迟响应等问题。

优化后

当只咨询一条订单时,用时需要1秒时间,连续咨询5、6条订单,用时优化到只需要3秒时间,并且页面流畅,对于用户体验上得到了明显的提升。
在这里插入图片描述
在这里插入图片描述

可以看出long task 减少了很多。
那么,如何来优化呢?请看下面的内容。

优化点

在合适的时机进行组件渲染

在排查代码的过程中发现,很多本不该当前状态渲染的组件,都渲染出来了,显然这是不合理的。过多的组件渲染会占用大量的内存,并且也会增加页面的渲染时间,自然,响应性能就会变得很差,用户与页面的交互就会变得迟缓。
而商品信息加载部分最常见的不必要的组件渲染表现在使用Modal弹窗时,我们都知道当visible为true时,会弹出弹窗相应的页面内容,但是当visible为false时,其实是不希望渲染Modal弹窗中的内容的,这会带来额外的性能开销。

下面是一些示例:

-  ...
-  <Modal
-   ...
-   visible={editVisible}
-   ...>
-  ...
-  </Modal>
-  ...
+  {editVisible && (
+     <GoodsAttributeModal
+      editVisible
+      ...
+     />
+  )}
// 把Modal弹窗作为一个单独组件提取出去,并且只有当editVisible为true时才渲染组件

第一段代码中,使用了visible={editVisible}来控制Modal组件的显示与隐藏。当editVisible为true时,Modal组件会被渲染出来,否则不会被渲染。

第二段代码中,使用了条件渲染的方式,即通过{editVisible && …}来判断是否渲染Modal组件。当editVisible为true时,Modal组件会被渲染出来,否则不会被渲染。

这两种方式的主要区别在于组件的渲染时机。在第一种方式中,Modal组件在每次渲染时都会被创建和销毁,而在第二种方式中,只有在editVisible为true时才会创建和渲染Modal组件。

使用条件渲染的方式可以提高性能,特别是在组件层级较深或渲染频繁的情况下。因为只有在需要显示Modal组件时才会进行渲染,避免了不必要的组件创建和销毁,减少了内存消耗和渲染时间。

总结起来,使用条件渲染的方式可以根据需要动态地控制组件的显示与隐藏,提高性能和用户体验。

使用useCallback、useMemo、React.memo提升性能

下面是一些示例:
useCallback

-  renderContent = (content, searchKey) => {
-   if(content) {
-     const contentWithBr = content.replace(/\↵/g, '<br>').replace(/\n/g, '<br>')
-      const regex = new RegExp(`(${searchKey})`, 'gi'); // 创建正则表达式,忽略大小写匹配
-      const matches = content.match(regex) || []; // 匹配结果数组
-      return (
-        <React.Fragment>
-          {contentWithBr.split('<br>').map((text, index) => (
-            <React.Fragment key={index}>
-              {index > 0 && <br />}
-              {text.split(regex).map((subText, subIndex) => {
-                // console.log('subText',subText,matches)
-                return (
-                  <React.Fragment key={subIndex}>
-                    {matches.includes(subText) ? (
-                      <span style={{ color: '#FF8800' }}>{subText}</span>
-                    ) : (
-                      subText
-                    )}
-                  </React.Fragment>
-                )
-              })}
-            </React.Fragment>
-          ))}
-        </React.Fragment>
-      )
-    } else {
-      return '-'
-    }
-  }+  const renderContent = useCallback((content, searchKey) => {
+    if (content) {
+      const contentWithBr = content.replace(/\↵/g, '<br>').replace(/\n/g, '<br>')
+      const regex = new RegExp(`(${searchKey})`, 'gi') // 创建正则表达式,忽略大小写匹配
+      const matches = content.match(regex) || [] // 匹配结果数组
+      return (
+        <React.Fragment>
+          {contentWithBr.split('<br>').map((text, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && <br />}
+              {text.split(regex).map((subText, subIndex) => {
+                //console.log('subText',subText,matches)
+                return (
+                  <React.Fragment key={subIndex}>
+                    {matches.includes(subText) ? (
+                      <span style={{ color: '#FF8800' }}>{subText}</span>
+                    ) : (
+                      subText
+                    )}
+                  </React.Fragment>
+                )
+              })}
+            </React.Fragment>
+          ))}
+        </React.Fragment>
+      )
+    } else {
+      return '-'
+    }
+  }, [])

上面的代码使用了React的useCallback钩子函数来定义了一个名为renderContent的函数。useCallback的作用是用来缓存函数,以便在依赖项不变的情况下避免函数的重新创建。

使用useCallback的好处是可以优化性能,特别是在父组件重新渲染时,避免不必要的函数重新创建。当依赖项数组为空时,useCallback会在组件的初始渲染时创建函数,并在后续的渲染中重复使用同一个函数。

而没有使用useCallback的情况下,每次组件重新渲染时都会创建一个新的renderContent函数,即使函数的实现逻辑完全相同。这可能会导致性能问题,特别是在组件层级较深或渲染频繁的情况下。

因此,使用useCallback可以提高组件的性能,避免不必要的函数创建和内存消耗。但需要注意的是,只有在确实需要缓存函数并且依赖项不变的情况下才使用useCallback,否则可能会导致不必要的优化和错误。

useMemo

-  const tooltip = (
-    <div>
-      <h2>
-        <span className={styles.title}>{title}</span>
-        {
-          !window.isVisibleGoods && (
-            <span>
-              {renderKnowledgeModal({
-                label: '编辑',
-                record: item,
-               platGoodsId: plat_goods_id,
-                classification_id: classificationId,
-              })}
-              <a
-                className={styles.delete}
-                onClick={() => handleDeleteKnowledage(item, classificationId)}
-              >
-                删除
-              </a>
-            </span>
-          )
-        }        
-      </h2>
-      <div className={styles.img_block}>{images}</div>
-      <div
-        className={classnames(styles.context, styles.tooltipsContext)}
-        dangerouslySetInnerHTML={{ __html: ParseBrow.parse(context) }}
-      />
-    </div>
-  )
+ const tooltip = useMemo(
+    () => (
+      <div>
+        <h2>
+          <span className={styles.title}>{title}</span>
+          {!isVisibleGoods && (
+            <span>
+              {renderKnowledgeModal({
+                label: '编辑',
+                record: item,
+                platGoodsId: plat_goods_id,
+                classification_id: classificationId,
+              })}
+              <a
+                className={styles.delete}
+                onClick={() => handleDeleteKnowledage(item, classificationId)}
+              >
+                删除
+             </a>
+            </span>
+          )}
+        </h2>
+        <div className={styles.img_block}>{images}</div>
+        <div
+          className={classnames(styles.context, styles.tooltipsContext)}
+          dangerouslySetInnerHTML={{ __html: ParseBrow.parse(context) }}
+        />
+      </div>
+    ),
+    [
+      title,
+      renderKnowledgeModal,
+      item,
+      plat_goods_id,
+      classificationId,
+      images,
+      context,
+      handleDeleteKnowledage,
+      isVisibleGoods,
+    ]
+  )

在上面的代码中,使用了useMemo来缓存了一个变量tooltip的计算结果。这个计算结果是一个React元素,包含了一些子元素和事件处理函数等。通过将tooltip作为依赖数组的一部分,当依赖数组中的值发生变化时,useMemo会重新计算tooltip的值;如果依赖数组中的值没有发生变化,则直接返回上一次缓存的tooltip的值。

这样做的好处是,当依赖数组中的值没有发生变化时,可以避免重复计算tooltip的值,提高组件的性能。而如果依赖数组中的值发生变化,useMemo会重新计算tooltip的值,确保tooltip的值是最新的。

相比之下,如果不使用useMemo,每次组件重新渲染时都会重新计算tooltip的值,即使依赖数组中的值没有发生变化,这样会造成不必要的性能损耗。

总结起来,使用useMemo可以优化组件的性能,避免不必要的计算。但是需要注意的是,只有在计算的成本比较高时才需要使用useMemo,否则可能会带来额外的开销

React.memo

-  export default Item
+  import { isEqual } from 'lodash'
+  export default React.memo(Item, isEqual)

export default Item 直接导出组件,每次父组件重新渲染都会重新渲染 Item 组件;
而 export default React.memo(Item, isEqual) 使用 React.memo 进行包裹,并传入自定义的比较函数 isEqual,只有在 props 发生变化且通过 isEqual 函数比较不相等时才会重新渲染 Item 组件。
注意:自定义的比较函数 isEqual 用于比较两个 props 是否相等。如果不传入比较函数,则默认使用浅比较(即 Object.is)来比较 props。如果传入了比较函数,则会使用该函数来比较 props。

props解构变量时的默认值

在这里插入图片描述

在这段代码中,KnowledgeTab是一个使用了React.memo进行优化的组件。React.memo是一个高阶组件,用于对组件进行浅层比较,以确定是否需要重新渲染组件。当组件的props没有发生变化时,React.memo会返回之前渲染的结果,从而避免不必要的重新渲染。

在KnowledgeTab组件中,knowledge_list是一个从props中解构出来的属性。而const knowledge_list_default = useMemo(() => [], [])是使用useMemo钩子函数创建的一个空数组。这样做的目的是为了在组件的初始渲染时,给knowledge_list一个默认值,以避免在解构时出现undefined的情况。

如果直接使用knowledge_list=[]来给knowledge_list赋值,会破坏React.memo的优化。因为每次父组件重新渲染时,knowledge_list都会被重新创建,即使它的值没有发生变化。这样会导致KnowledgeTab组件的props发生变化,从而触发不必要的重新渲染。

而使用useMemo创建一个空数组作为默认值,可以保证在父组件重新渲染时,knowledge_list_default的引用不会发生变化,从而避免不必要的重新渲染。这样就能够保持React.memo的优化效果,只有在knowledge_list的值真正发生变化时才会重新渲染KnowledgeTab组件。

所以,总结起来就是默认值如果传给子组件,父组件每一次更新都会导致子组件更新,导致子组件的React.memo失效

拆分为状态自治的独立组件

当一个组件的代码变得复杂或包含大量的子组件时,可以考虑将其中的一部分代码抽取为一个独立的子组件。这样做的好处是可以将复杂的逻辑拆分为多个小组件,提高代码的可读性和可维护性。
同时,抽取组件也可以配合使用React.memo进行优化。
下面是一个抽取独立组件的例子
在这里插入图片描述

import React, { memo } from 'react'
import { Tooltip } from 'antd'
import classNames from 'classnames'
import Item from './item'
import styles from '../../index.less'interface Item {name: stringid: string
}
interface CategoryProps {item: ItemactiveKey: stringonClickItem: () => void
}
const Category: React.FC<CategoryProps> = props => {const { item, activeKey, onClickItem } = propsconst { name, id } = itemreturn (<Tooltiptitle={name}placement="topRight"align={{offset: [0, 5],}}><spankey={id}className={classNames(styles.tab_item, {[styles.active_item]: activeKey === id,})}onClick={onClickItem}>{name}</span></Tooltip>)
}export default memo(Category)

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

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

相关文章

程序员请放下你的技术情节,与你的同伴一起进步关心业务

如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话&#xff0c; 那么我觉得技术人员要真正学会的第二课&#xff0c;不是技术&#xff0c;而是业务、交流与协作&#xff0c;学会关心其他工作伙伴的工作情况和进展。 为什么这么说呢&#xff1f; 因为技术人员太容易陷…

计算机视觉与机器学习D1

计算机视觉简介 技术背景 了解人工智能方向、热点 目前人工智能的技术方向有&#xff1a; 1、计算机视觉——计算机视觉(CV)是指机器感知环境的能力&#xff1b;这一技术类别中的经典任务有图像形成、图像处理、图像提取和图像的三维推理。物体检测和人脸识别是其比较成功…

apache 基线安全加固操作

本文档适用于Apache服务器。本规范明确了Apache服务器安全配置方面的基本要求。 账号管理、认证授权 ELK-Apache-01-01-01 编号 ELK-Apache-01-01-01 名称 以特定用户运行服务 实施目的 以特定用户运行服务,不要使用系统管理员账号启动APACHE 问题影响 越权使用造成非…

Kotlin--1.基础语法

目录 一.概念 二.基本语法 1.入门案例 2.变量声明 3.数据类型 4.字符串 (1)访问字符串 (2)字符串长度 (3)字符串函数 (4)比较字符串 (5)在字符串中查找字符串 (6)字符串模板 5.if-else 6.when 7.数组 8.范围 三.函数 1.实例 2.多个参数 3.返回值 一.概念 Kot…

客服中心的客户关系管理核心功能

根据国外的调查&#xff0c;拥有客服中心的运营机构&#xff0c;可以保持85%左右的客户忠诚度&#xff0c;而接受过专业培训的客户中心可以将客户忠诚度提高到99%。客服中心作为客户关系管理的前沿&#xff0c;通过提供服务、实时沟通、搜集与分析客户信息、预测客户需求来提升…

数据结构与算法-生成树与最小生成树

生成树与最小生成树 &#x1f388;1.生成树与最小生成树&#x1f52d;1.1生成树与最小生成树的概念&#x1f52d;1.2最小生成树的生成准则&#x1f52d;1.3两种最小生成树算法&#x1f3c6;1.3.1Kruskal算法&#x1f3c6;1.3.2Prim算法 &#x1f388;2.有向无环图及其应用&…

【如何学习Python自动化测试】—— 时间等待

3 、 时间等待 在做自动化测试时&#xff0c;难免会碰到一些问题&#xff0c;比如你在脚本中操作某个对象时&#xff0c; 页面还没有加载出来&#xff0c;你的操作语句已经被执行&#xff0c;从而导致脚本执行失败&#xff0c;针对这样的问题 webdriver 提供了等待操作&#xf…

virtuoso 后仿 ADE L error

ADE后仿时出现error ERROR (SFE-23): "input.scs" 299: The instance _57_D32_noxref is referencing an undefined model or subcircuit, parasitic_nwd. Either include the file containing the definition of parasitic_nwd, or define parasitic_nwd before run…

Java MVC亚马逊网站的仿制JSP+JavaBean+Servlet+DB

系统总体要求 1. 网站中必须包含用户登录&#xff0c;查看产品列表&#xff0c;增加产品信息&#xff0c;修改产品信息&#xff0c;和查看产品详细信息的功能&#xff1b;对于列表页面&#xff0c;要求要实现分页功能&#xff0c;产品数目不少于20条&#xff0c;每页8条记录 2…

Redis学习笔记15:基于spring data redis及lua脚本发送到redis服务器多久过期

在Redis服务器中&#xff0c;通过SCRIPT LOAD命令加载的脚本会被缓存&#xff0c;并且会一直保存在缓存中&#xff0c;直到服务器重启或者使用SCRIPT FLUSH名利手动清空缓存。 一个对springboot redis框架进行重写&#xff0c;支持lettuce、jedis、连接池、同时连接多个集群、多…

Frida 安装使用

Frida 使用 1&#xff1a;安装 查看安装版本 frida --version 16.0.2&#xff08;这是我自己安装的版本&#xff0c;目前最新是16.1.17&#xff09; 安装 pip install frida pip install frida-tools2&#xff1a;frida-server https://github.com/frida/frida/releases 下…

iTerm2+oh-my-zsh搭个Mac电脑上好用好看终端

根据苹果网站上介绍&#xff0c;bash是 macOS Mojave 及更早版本中的默认Shell&#xff0c;从 macOS Catalina 开始&#xff0c;zsh(Z shell) 是所有新建用户帐户的默认Shell。 1. 安装Oh my zsh sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzs…

Java学习笔记43——函数式接口

函数式接口 函数式接口函数式接口概述函数式接口作为方法的参数函数式接口作为方法的返回值 常用的函数式接口Supplier接口Comsumer接口Predicate接口Function接口 函数式接口 函数式接口概述 有且仅有一个抽象方法的接口 是lambda表达式的前提 需要注意的是 默认方法不是抽…

选择java商城开发商需要注意哪些方面?

Java商城开发是一项庞大而复杂的任务&#xff0c;选择一家合适的开发商至关重要。那么&#xff0c;我们在选择Java商城开发商时&#xff0c;需要注意哪些方面呢&#xff1f; 1、专业经验 选择具有丰富经验的开发商是至关重要的。开发商应该拥有多年的Java开发经验&#xff0c;…

代码随想录算法训练营第13天|● 239. 滑动窗口最大值 ● 347.前 K 个高频元素 ● 总结

239. 滑动窗口最大值 困难 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a;nums [1,…

【MATLAB源码-第82期】基于matlab的OFDM系统载波频移偏差(CFO)估计,对比三种不同的方法。

操作环境&#xff1a; MATLAB 2013b 1、算法描述 正交频分复用&#xff08;OFDM&#xff09;系统中的载波频率偏移&#xff08;CFO&#xff09;估计是一项关键技术&#xff0c;用于确保数据传输的准确性和效率。CFO通常由于振荡器频率不匹配和多普勒频移引起。不同的CFO估计…

DP1332E/DP1363F国产多协议NFC读写器芯片支持ISO15693/ISO18092

目录 ISO/IEC 15693与ISO/IEC 18092协议标准差异DP1363F与DP1332E对比共同点主要差异点 ISO/IEC 15693与ISO/IEC 18092协议标准差异 ISO/IEC 15693是用于近距离无线通信中的射频识别&#xff08;RFID&#xff09;技术的标准协议&#xff0c;它定义了与读写器之间的通信协议。这…

LeetCode热题100——图论

图论 1. 岛屿的数量2. 腐烂的橘子 1. 岛屿的数量 给你一个由 ‘1’&#xff08;陆地&#xff09;和 ‘0’&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆…

鸿蒙为什么使用typescript 作为开发语言 而不是 flutter 或者 kotlin

猜想如下 dev studio 是基于 idea 二次开发的 &#xff0c;使用kotlin 应该是更合理 变成 jetbrain 全家桶&#xff0c; 但是 现在android 开发也是kotlin 是不是为了做分割 &#xff0c;所以不使用kotlin flutter 是谷歌的 安卓也是谷歌的 所以不采用 typescript 是微软的…

力扣:168. Excel表列名称(Python3)

题目&#xff1a; 给你一个整数 columnNumber &#xff0c;返回它在 Excel 表中相对应的列名称。 例如&#xff1a; A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ... 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣&…