性能分析四板斧

最新推荐文章于 2024-10-14 00:00:00 发布
最新推荐文章于 2024-10-14 00:00:00 发布
阅读量571 收藏 20
点赞数 17
文章标签： java 前端 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_86761661/article/details/142069105
版权

第三板斧：合理管理状态变量

应该合理地使用状态变量，精准控制组件的更新范围(详细介绍可参考文章: 精准控制组件的更新范围)，控制状态变量关联组件数量上限，控制对象级状态变量的成员变量关联组件数，减少系统的组件渲染负载，提升应用流畅度。

精准控制组件的更新范围

在复杂页面开发的场景下，精准控制组件更新的范围对提高应用运行性能尤为重要。我们应该避免状态变量的滥用引起的容器组件的刷新，进而影响帧率。

使用Stack包裹条件渲染组件，减小更新范围

用条件渲染的方式控制组件的显示，在条件发生变化时会引起父组件的重新渲染。如果在同个父组件下存在复杂组件，在高频操作场景会产生性能问题。因此，对于该场景，我们应该用父容器组件包裹可能会频繁条件变化的组件

反例代码如下：

@State isVisible: boolean;
@State realData: Data[] = [];

aboutToAppear() {
  // 更新状态变量
  this.realData = [...]
}

build() {
  Column() {
    if(this.isVisible) {
      Text()
    }
    ForEach(this.realData,(item: Data) => {
      Text(`${item.label}`)
    })
  }
}

正例代码如下：

@State isVisible: boolean;
@State realData: Data[] = [];

aboutToAppear() {
  // 更新状态变量
  this.realData = [...]
}

build() {
  Column() {
    Stack() {
      if(this.isVisible) {
        Text()
      }
    }
    ForEach(this.realData,(item: Data) => {
      Text(`${item.label}`)
    })
  }
}

减少不必要的参数层次传递

@State+@Prop、@State+@Link、@State+@Observed+@ObjectLink三种方案的实现方式是逐级向下传递状态，当共享状态的组件间层级相差较大时，会出现状态层层传递的现象。对于没有使用该状态的中间组件而言，这是“额外的消耗”。因此，对于跨越多层的状态变量传递，使用@Provide+@Consume方案更为合理。

反例代码如下：

// 父组件
@Component
struct componentParent{
  @State data: Data = {}

  aboutToAppear() {
    // 获取子组件数据
    this.data = getData()
  }

  build() {
    Column() {
      componentSon({data: this.data})
    }
  }
}

// 子组件
@Component
struct componentSon{
  // 获取传递参数
  @Prop data: Data;

  build() {
    Column() {
      Text(data.text)
      componentGrandSon({data: this.data})
    }
  }
}

@Component
struct componentGrandSon{
  // 获取传递参数
  @Prop data: Data;

  build() {
    Column() {
      Text(data.text)
    }
  }
}

正例代码如下：

// 父组件
@Component
struct componentParent{
  @Provide('data') data: Data = {};

  aboutToAppear() {
    // 获取子组件数据
    this.data = getData()
  }

  build() {
    Column() {
      componentSon({data: this.data})
    }
  }
}

// 子组件
@Component
struct componentSon{
  // 获取传递参数
  @Consume("data") data: Data;

  build() {
    Column() {
      Text(data.text)
      componentGrandSon({data: this.data})
    }
  }
}

@Component
struct componentGrandSon{
  // 获取传递参数
  @Consume("data") data: Data;

  build() {
    Column() {
      Text(data.text)
    }
  }
}

避免滥用@Provide+@Consume

在父子组件关联的场景下，@Provide+@Consume开销要大于@State+@Prop/@Link，因此在该场景下推荐使用@State+@Prop/@Link的组合。

反例代码如下：

// 父组件
@Component
struct componentParent{
  @Provide("data") data: Data = {};

  aboutToAppear() {
    // 获取子组件数据
    this.data = getData();
  }

  build() {
    Column() {
      componentSon()
    }
  }
}

// 子组件
@Component
struct componentSon{
  // 获取传递参数
  @Consume("data") data: Data;

  build() {
    Column() {
      Text(data.text)
    }
  }
}

正例代码如下：

// 父组件
@Component
struct componentParent{
  @State data:Data = {};

  aboutToAppear() {
    // 获取子组件数据
    this.data = getData();
  }

  build() {
    Column() {
      componentSon({data: this.data})
    }
  }
}

// 子组件
@Component
struct componentSon{
  // 获取传递参数
  @Prop data:Data;

  build() {
    Column() {
      Text(data.text)
    }
  }
}

精准控制状态变量关联组件数量

应该控制状态变量关联的组件数量，如果一个状态关联过多的组件，当这个变量更新时会引起过多的组件重新绘制渲染，建议关联数量限制在20个以内(详细介绍可参考文章: 精准控制组件的更新范围)。

控制状态变量关联组件数量

反例代码如下：

@Observed
class Translate {
  translateX: number = 20;
}
@Component
struct Title {
  @ObjectLink translateObj: Translate;
  build() {
    Row() {
      Image($r('app.media.icon'))
        .translate({
          x:this.translateObj.translateX // this.translateObj.translateX used in two component both in Row
        })
      Text("Title")
        .translate({
          x: this.translateObj.translateX
        })
    }
  }
}
@Entry
@Component
struct Page {
  @State translateObj: Translate = new Translate();
  build() {
    Column() {
      Title({
        translateObj: this.translateObj
      })
      Stack() {
      }
      .translate({
        x:this.translateObj.translateX //this.translateObj.translateX used in two components both in Column
      })
      Button("move")
        .translate({
          x:this.translateObj.translateX
        })
        .onClick(() => {
          animateTo({
            duration: 50
          },()=>{
            this.translateObj.translateX = (this.translateObj.translateX + 50) % 150
          })
        })
    }
  }
}

正例代码如下：

@Observed
class Translate {
  translateX: number = 20;
}
@Component
struct Title {
  build() {
    Row() {
      Image($r('app.media.icon'))
      Text("Title")
    }
  }
}
@Entry
@Component
struct Page1 {
  @State translateObj: Translate = new Translate();
  build() {
    Column() {
      Title()
      Stack() {
      }
      Button("move")
        .onClick(() => {
          animateTo({
            duration: 50
          },()=>{
            this.translateObj.translateX = (this.translateObj.translateX + 50) % 150
          })
        })
    }
    .translate({ // the component in Column shares the same property translate
      x: this.translateObj.translateX
    })
  }
}

控制对象级状态变量成员数量

应该控制对象级状态变量的成员变量关联的组件数量。开发者封装一个数据结构类用于进行状态变量关联时，应该避免过多的成员变量关联大量ArkUI组件，这种情况下，当这个大对象的一个成员变量更新时，会导致所有关联这个大对象的组件都同时进行刷新，造成不必要的性能损耗，从而影响帧率。

反例代码如下：

@Observed
class AnimationParams {
  translateX: number = 0;
  translateY: number = 0;
  alpha: number = 1;
  rotationX: number = 0;
  rotationY: number = 0;
  centerX: number = 0;
  centerY: number = 0;
  angle: number = 0;
  scaleX: number = 1;
  scaleY: number = 1;
}

@Entry
@Component
struct Page {
  @State animationParam: AnimationParams = new AnimationParams();

  build() {
    Column() {
      Row() {
        Image($r('app.media.startIcon'))
          .translate({
            x: this.animationParam.translateX,
            y: this.animationParam.translateY
          })
          .rotate({
            x: this.animationParam.rotationX,
            y: this.animationParam.translateY,
            centerX: this.animationParam.centerX,
            centerY: this.animationParam.centerY,
            angle: this.animationParam.angle
          })
          .opacity(this.animationParam.alpha)
          .scale({
            x: this.animationParam.scaleX,
            y: this.animationParam.scaleY,
            centerX: this.animationParam.centerX,
            centerY: this.animationParam.centerY
          })
          .animation({
            duration: 3000
          })
      }

      Button('点击播放动画')
        .onClick(() => {
          this.animationParam.translateX = 300;
          this.animationParam.translateY = 200;
          this.animationParam.rotationX = 90;
          this.animationParam.rotationY = 90;
          this.animationParam.centerX = 20;
          this.animationParam.centerY = 20;
          this.animationParam.angle = 270;
          this.animationParam.alpha = 0.5;
          this.animationParam.scaleX = 3;
          this.animationParam.scaleY = 3;
        })
    }
  }
}

正例代码如下：

@Observed
class RotationAnimationParams {
  rotationX: number = 0;
  rotationY: number = 0;
  centerX: number = 0;
  centerY: number = 0;
  angle: number = 0;
}

@Observed
class TranslateAnimationParams {
  translateX: number = 0;
  translateY: number = 0;
}

@Observed
class AlphaAnimationParams {
  alpha: number = 1;
}

@Observed
class ScaleAnimationParams {
  scaleX: number = 1;
  scaleY: number = 1;
  centerX: number = 0;
  centerY: number = 0;
}

@Entry
@Component
struct Page {
  @State rotationAnimation: RotationAnimationParams = new RotationAnimationParams();
  @State translateAnimation: TranslateAnimationParams = new TranslateAnimationParams();
  @State alphaAnimation: AlphaAnimationParams = new AlphaAnimationParams();
  @State scaleAnimation: ScaleAnimationParams = new ScaleAnimationParams();

  build() {
    Column() {
      Row() {
        Image($r('app.media.startIcon'))
          .translate({
            x: this.translateAnimation.translateX,
            y: this.translateAnimation.translateY
          })
          .rotate({
            x: this.rotationAnimation.rotationX,
            y: this.rotationAnimation.rotationY,
            centerX: this.rotationAnimation.centerX,
            centerY: this.rotationAnimation.centerY,
            angle: this.rotationAnimation.angle
          })
          .opacity(this.alphaAnimation.alpha)
          .scale({
            x: this.scaleAnimation.scaleX,
            y: this.scaleAnimation.scaleY,
            centerX: this.scaleAnimation.centerX,
            centerY: this.scaleAnimation.centerY
          })
          .animation({
            duration: 3000
          })
      }

      Button('点击播放动画')
        .onClick(() => {
          this.rotationAnimation.rotationX = 90;
          this.rotationAnimation.rotationY = 90;
          this.rotationAnimation.centerX = 20;
          this.rotationAnimation.centerY = 20;
          this.rotationAnimation.angle = 270;

          this.translateAnimation.translateX = 300;
          this.translateAnimation.translateY = 200;

          this.alphaAnimation.alpha = 0.5;

          this.scaleAnimation.scaleX = 3;
          this.scaleAnimation.scaleY = 3;
          this.scaleAnimation.centerX = 20;
          this.scaleAnimation.centerY = 20;
        })
    }
  }
}

避免不必要的创建和读取状态变量

避免不必要的创建和读取状态变量，减少性能损耗。

删除冗余的状态变量标记

状态变量的管理有一定的开销，应在合理场景使用，普通的变量用状态变量标记可能会导致性能劣化

反例代码如下：

@Component
struct component {
  @State bgcolor: string | Color = '#ffffff';
  @State selectColor: string | Color = '#007DFF';

  build() {
  }
}

正例代码如下：

@Component
struct component {
  bgcolor: string | Color = '#ffffff';
  selectColor: string | Color = '#007DFF';

  build() {
  }
}

避免在For/while等循环函数中重复读取状态变量

状态变量的读取耗时远大于普通变量的读取耗时，因此要避免重复读取状态变量，而是应该放在循环外面读取，例如在打印For/while循环中打印状态变量的日志信息

反例代码如下：

@Component
struct Page {
  @State message: string = '';

  build() {
    Column() {
      Button('点击打印日志')
        .onClick(() => {
          for (let i = 0; i < 10; i++) {
            console.debug(this.message);
          }
        })
    }
  }
}

正例代码如下：

@Component
struct Page {
  @State message: string = '';

  build() {
    Column() {
      Button('点击打印日志')
        .onClick(() => {
          let logMessage: string = this.message;
          for (let i = 0; i < 10; i++) {
            console.debug(logMessage);
          }
        })
    }
  }
}

#原来是这样
关注
交直流与电路分析三板斧
sinat_15677011的博客
02-12 888
直流电和交流电之争 人类最早发现了交流电，但最开始推广的是直流电。 1831年，法拉第发现了电磁感应现象之后不久，他又利用电磁感应发明了世界上第一台发电机──法拉第圆盘发电机。 该发电机组成很简单，由一块磁铁、导体转盘和电流表组成。导体转盘在切割马蹄形磁铁产生的磁力线后，会产生电流。但是这种结构，产生的电流很微弱，只能看到电流表偏转一点，连小灯泡都无法点亮，还远不能实用。 1832年，法国工程师伊波利特• 皮克西利用永磁体发明了可以简单工作的手摇式发电机,而且还发明了像电动机换向器一样的发电机整流子，这样
HarmonyOS应用性能优化四板斧
EasyWinsom的博客
06-25 1572
在开发HarmonyOS NEXT应用时，优化应用性能是至关重要的。本文将介绍应用开发过程中常见的一些性能问题，并提供相应的解决方案，配合相关参考示例，帮助开发者解决大部分性能问题。我们把应用性能分析的方法划分为了性能分析四板斧，下面将介绍如何使用性能分析四板斧，解决应用开发过程中的性能问题。第一板斧：合理使用并行化、预加载和缓存，我们需要合理地使用并行化、预加载和缓存等方法，例如使用多线程并发、异步并发、Web预加载等能力，提升系统资源利用率，减少主线程负载，加快应用的启动速度和响应速度。
性能跟踪三板斧
懂哥的博客
08-30 1200
JVM调试工具 #jps 查看所有的jvm进程，包括进程ID，进程启动的路径等等。 我自己也用PS，即：ps -ef | grep java #jstack 观察jvm中当前所有线程的运行情况和线程当前状态。 系统崩溃了？如果java程序崩溃生成core文件，jstack工具可以用来获得core文件的java stack和native stack的信息，从而可以轻松地知道java程序是如何崩溃和在程序何处发生问题。 系统hung住了？jstack工具还可以附属到正在运行的java程序中，看到当
鸿蒙（HarmonyOS）应用性能优化实战-组件复用四板斧
CTrup的博客
09-20 1058
在滑动场景下，常常会对同一类自定义组件的实例进行频繁的创建与销毁。此时可以考虑通过组件复用减少频繁创建与销毁的能耗。组件复用时，可能存在许多影响组件复用效率的操作，本篇文章将重点介绍如何通过组件复用四板斧提升复用性能。第一板斧，减少组件复用的嵌套层级，如果在复用的自定义组件中再嵌套自定义组件，会存在节点构造的开销，且需要在每个嵌套的子组件中的aboutToReuse方法中实现数据的刷新，造成耗时。第二板斧，优化状态管理，精准控制组件刷新范围。
小程序性能优化三板斧
百度智能小程序技术团队
09-28 3981
为什么有这篇文章 想看干货的可以直接跳转到正文 … 小程序中心是百度 APP小程序流量分发的入口，从百度个人中心可以进入。 小程序中心说大不大，说小也不小，属于麻雀虽小五脏俱全的那种，从 18 年到现在经历了 2 年的迭代，经手了 20 多任开发，1000 次左右的 commit ，也发展成了一个比较成熟的产品。产品发展到一定阶段，就开始呈现出技术上的一些瓶颈，前期为了快速的上线功能埋下了不少的坑，尤其是性能上的坑，达到了不可忽视的程度。 但是坑嘛，嘛，
鲲鹏性能优化十板斧（二）——CPU与内存子系统性能调优
华为云官方博客
11-08 5115
1.1 CPU与内存子系统性能调优简介 调优思路 性能优化的思路如下： l如果CPU的利用率不高，说明资源没有充分利用，可以通过工具（如strace）查看应用程序阻塞在哪里，一般为磁盘，网络或应用程序的业务处理中存在休眠或信号等待，这些优化措施在后续其它章节描述。 l如果CPU利用率高，通过优化软件硬件的配置参数来更好适配业务场景，减少CPU占用率，让整...
性能问题“三板斧”
weixin_34029680的博客
11-01 187
1.单击Statistics(统计)--》Summary（简要的） 2.单击Statistics-->Service Response Time -->ONC-RPC（选择相应的协议） -->Program:NFS Version:3 -->Creat Stat 得到响应时间统计表，衡量服务器性能时经常需要此统计结果 3.A...
程序性能分析工具perf
程适场的博客
03-09 742
简介 https://zhuanlan.zhihu.com/p/141694060 使用方法 编写test_perf.c程序如下 #include<stdio.h> #include<stdlib.h> void test_perf(){ int row = 10, col = 100; double* arr = (double*)malloc(sizeof(double) * row * col); for(int i = 0; i < row;
三板斧，分析优化移动VR应用性能
weixin_43735236的博客
12-21
虚拟现实应用是否具备高性能对用户而言十分重要，不过，开发人员在如何实现高性能方面需要采取聪明的方法。 你是否会惊讶于有96％的移动用户认为VR性能很重要？如果性能对用户如此重要，那么我们就不可轻视它。即使性能不是我们最优先的处理事项，但是作为开发人员，我们有责任确保我们不运行烦人的后台服务，增加不必要的耗电。随着VR硬件更易于使用，我们的应用不应该使头盔过热。 Qualcomm®Snapdra...
鲲鹏开发套件 调优十板斧.pdf
11-07
【鲲鹏开发套件 调优十板斧】是华为技术有限公司提供的一份针对基于鲲鹏处理器的软件开发和性能优化的技术文档。该文档详细介绍了在鲲鹏平台上进行CPU和内存子系统的优化方法，旨在帮助开发者提升应用程序的运行效率...
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1405
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
Netty 相比原生IO模型的优势
lssffy的博客
10-09 630
Java提供了多种I/O模型，每种模型都有其适用的场景和特点，随着网络应用需求的变化，I/O模型也在不断发展。阻塞I/O（BIO，Blocking I/O）传统的I/O模型，使用简单，但每次I/O操作都会阻塞线程。每个请求需要独立的线程来处理，这在并发请求较少时问题不大，但在高并发情况下，线程资源将成为瓶颈。非阻塞I/O（NIO，Non-Blocking I/O）引入了多路复用技术，一个线程可以处理多个连接，避免了BIO中每个连接占用一个线程的问题。通过Selector。
Backend - Java 基础
是萝卜干呀的博客
10-11 559
知识量决定了未来能走多远
Hex编码
weixin_74305514的博客
10-13 100
emps;是一种将数据转换为十六进制表示的方法。Hex编码使用16个字符来表示数据。&emps;
Spring Boot 整合 Minio
cmh1008611的博客
10-09 931
5‌‌.Optional‌是Java 8引入的一个新的容器对象，它提供了非常丰富的API，主要是为了解决空指针异常的问题。Optional类允许你创建一个可能为null的值的容器，从而避免了直接使用null值可能导致的空指针异常。自动处理异常：在使用 @SneakyThrows 注解的方法中，如果抛出任何类型的检查性异常（即编译器要求显式捕获或声明的异常），Lombok 会自动将其包装成运行时异常（RuntimeException），从而避免了需要显式捕获或声明这些异常的麻烦。可以用于自动装配和依赖注入。
初始Python篇（2）——逻辑控制、序列
最新发布
我要学编程的博客
10-14 822
程序的组织结构：顺序、选择、循环 pass空语句 猜数字小游戏 序列、序列相关操作
springboot 用request.setAttribute 传值到控制层
qq56477643的博客
10-09 579
【代码】springboot 用request.setAttribute 传值到控制层。
破解需求分析难点：产品经理的三板斧
"这篇文档主要讨论了如何在需求分析中突破难点，提出了需求分析的‘三板斧’方法，即数据会说话、用户调研和决策制定。文档指出，产品经理需要根据不同的公司规模、产品阶段和资源情况来确定需求的优先级，区分A类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值