Angular 由一个bug说起之一:List / Grid的性能问题

在angular中,MatTable构建简单,使用范围广。但某些时候会出现卡顿

卡顿情景:

1一次性请求太多的数据

2一次性渲染太多数据,这会花费CPU很多时间

3行内嵌套复杂的元素

4使用过多的ngStyle或者ngClass。或者一些额外的class

        import { MatTableDataSource } from '@angular/material/table';    
...const data: IDemoRow[] = [];for (let i = 0; i < 8000; i++) {data.push({studentId: `studentId-${i + 1}`,name: `name-${i}`,className: `className-${i}`,age: i,address: `address-${i}`,studySubjects: ['studySubjects-1','studySubjects-2','studySubjects-3','studySubjects-4','studySubjects-5','studySubjects-6',],grade: 4});}this.dataSource = new MatTableDataSource(data);

第一次渲染会卡顿,拖动滚动条时会出现空白现象。

提升办法:

1分页

使用MatPaginator对数据进行分页

    import { MatPaginator } from '@angular/material/paginator';
...@ViewChild(MatPaginator) paginator: MatPaginator;
...ngAfterViewInit() {this.dataSource.paginator = this.paginator;}
<table mat-table [dataSource]="dataSource">...
</table>
<mat-paginator[pageSizeOptions]="[13, 50, 200]"showFirstLastButtons>
</mat-paginator>

效果如下:

2:尽可能少用或不用ngStyle和 ngClass。无效的css及时清理。ngStyle不仅导致性能问题。还会使样式无法被覆盖。因此要慎用

// less
.grade-background {background: #a1bcd6;
}
.grade-color {color: #37474f;
}// html
<table mat-table [dataSource]="dataSource">...<ng-container matColumnDef="grade"><th mat-header-cell *matHeaderCellDef class="class-unnecessary"> Grade </th><td mat-cell *matCellDef="let element"class="table-cell grade-color class-unnecessary-test"[ngClass]="{'grade-background' : element.grade === 3}"[ngStyle]="{'color': '#DB5C5C'}">{{element.grade}}</td></ng-container>...
</table>

第一次渲染会卡顿,且ngStyle的值未被覆盖

3:使用trackBy,trackBy是angular提供的函数,来告诉angular怎么跟踪数组里的项目。这会减少不必要的DOM的删除和重建

trackByFunction(index: number, row: IDemoRow): string {return row.studentId;
}<table mat-table [dataSource]="dataSource"[trackBy]="trackByFunction">...
</table>
<mat-paginator[pageSizeOptions]="[13, 50, 200]"showFirstLastButtons>
</mat-paginator>

4:但是对于更复杂的表的使用,比如分组管理数据。打开或者关闭某个组的时候,还要操作DOM,那么在以上几种方法的基础上可能还会卡顿

这时候需要利用interval分批操作DOM,能减少卡顿问题

intervalH = window.setInterval(() => {...if (...) {window.clearInterval(intervalH);intervalH = undefined;}...
}, interval);

以上就是几种常用的优化方法。

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

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

相关文章

11月份 四川汽车托运报价已经上线

中国人不骗中国人!! 国庆小长假的高峰期过后 放假综合症的你还没痊愈吧 今天给大家整理了9条最新线路 广州到四川的托运单价便宜到&#x1f4a5; 核算下来不过几毛钱&#x1f4b0; 相比起自驾的漫长和疲惫&#x1f697; 托运不得不说真的很省事 - 赠送保险 很多客户第一次运车 …

LeetCode 17. 电话号码的字母组合 中等

题目 - 点击直达 1. 17. 电话号码的字母组合 中等1. 题目详情1. 原题链接2. 题目要求3. 基础框架 2. 解题思路1. 思路分析2. 时间复杂度3. 代码实现 3. 知识与收获 1. 17. 电话号码的字母组合 中等 1. 题目详情 1. 原题链接 LeetCode 17. 电话号码的字母组合 中等 2. 题目要…

unity line renderer绘制的颜色不是想要的红色

线条不是暗红色的&#xff0c;用的是默认的红色 将材质选则为如下即可

C# OpenCvSharp DNN HybridNets 同时处理车辆检测、可驾驶区域分割、车道线分割

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Numerics; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_D…

Python使用腾讯云SDK实现对象存储(上传文件、创建桶)

文章目录 1. 开通服务2. 创建存储桶3. 手动上传文件并查看4. python上传文件4.1 找到sdk文档4.2 初始化代码4.3 region获取4.4 secret_id和secret_key获取4.5 上传对象代码4.6 python实现上传文件 5 python创建桶 首先来到腾讯云官网 https://cloud.tencent.com/1. 开通服务 来…

vue项目pdf文件的预览

1.下载 您可以在以下网址下载pdfjsLib&#xff1a;https://github.com/mozilla/pdf.js pdfjsLib是一个开源项目&#xff0c;您可以在GitHub上找到其源代码和相关资源。 2.放置文件位置 3.进入 在index.html引入 <script src"<% BASE_URL %>static/pdfjs-dist/b…

C/C++输出硬币翻转 2021年6月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C硬币翻转 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C硬币翻转 2021年6月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 假设有N个硬币(N为不大于5000的正整数)&#xff0c;从1…

ChatGPT 宕机?OpenAI 将中断归咎于 DDoS 攻击

您的 ChatGPT 已关闭吗&#xff1f;您是否遇到 ChatGPT 问题&#xff0c;例如连接问题或遇到“长响应时出现网络错误”&#xff1f;– ChatGPT 遭受了一系列 DDoS 攻击&#xff0c;显然是由匿名苏丹组织策划的。 OpenAI 的 ChatGPT 是一款流行的人工智能聊天机器人&#xff0c;…

工商银行卡安全码怎么看

工商银行的安全码&#xff0c;作为一项至关重要的安全措施&#xff0c;旨在保护用户的银行账户和交易安全。为了查看工商银行的安全码用户需要按照以下步骤操作&#xff1a; 首先&#xff0c;用户需要使用电脑或手机访问工商银行的网上银行平台。在平台首页&#xff0c;用户需要…

2023年A股借壳上市研究报告

第一章 借壳上市概况 1.1 定义 借壳上市作为一种独特的资本市场操作手法&#xff0c;历来是企业拓展融资渠道和实现市场战略目标的重要途径。具体来说&#xff0c;借壳上市可分为狭义与广义两种模式。在狭义的定义下&#xff0c;借壳上市是指一家已上市的公司的控股母公司&am…

JVM虚拟机-虚拟机性能监控、故障处理工具

1基础故障处理工具 jps&#xff08;JVM Process Status Tool&#xff09;是&#xff1a;虚拟机进程状况工具 作用&#xff1a;可以列出正在运行的虚拟机进程&#xff0c;并显示虚拟机执行主类&#xff08;Main Class&#xff0c;main()函数所在的类&#xff09;名称以及这些进…

基于遗传算法优化的直流电机PID控制器设计

PID控制器是工业控制中常用的一种控制算法&#xff0c;通过不断调节比例、积分和微分部分来实现对系统的稳定控制。然而&#xff0c;在一些复杂系统中&#xff0c;传统的PID参数调节方法可能存在局限性。本文将介绍一种基于遗传算法优化的直流电机PID控制器设计方法&#xff0c…

CSS3 多媒体查询、网格布局

一、CSS3多媒体查询&#xff1a; CSS3 多媒体查询继承了CSS2多媒体类型的所有思想&#xff0c;取代了查找设备的类型。CSS3根据设置自适应显示。 多媒体查询语法&#xff1a; media not|only mediatype and (expressions) { CSS 代码...; } not: not是用来排除掉某些特定…

系列二十二、idea Live Templates

一、idea Live Templates 1.1、Java Group 1.1.1、fast fast 快速在类上添加注解Data AllArgsConstructor NoArgsConstructor Accessors(chain true) ToString(callSuper true) 1.1.2、getThreadName getThreadName快速获取当前线程的名字Thread.currentThread().getName…

【Git】gui图形化界面的使用、ssh协议以及idea集成Git

目录 gui图形化界面的使用 介绍 特点 gui图形的使用 ssh协议 介绍 步骤及概念 ssh协议的使用 配置公钥 idea集成Git idea配置git IDEA安装gitee IDEA中登入Git ​编辑 项目分享 克隆分享的项目 ​编辑 ​编辑 idea上传远程 gui图形化界面的使用 介绍 GUI&#xff08…

Docker进阶——再次认识docker的概念 Docker的结构 Docker镜像结构 镜像的构建方式

前言 在微服务大量应用的互联网时代&#xff0c;经常能看到docker的身影。作为docker的爱好者&#xff08;在服务器安装MySQL&#xff0c;Redis。。。我用的都是docker&#xff09;&#xff0c;我也会持续深入学习和认识docker。 本篇博客再次介绍docker的基本概念&#xff0…

广州华锐互动:VR互动实训内容编辑器助力教育创新升级

随着科技的飞速发展&#xff0c;教育领域也正在经历一场深刻的变革。其中&#xff0c;虚拟现实(VR)技术为教学活动提供了前所未有的便利和可能性。在诸多的VR应用中&#xff0c;VR互动实训内容编辑器无疑是最具潜力和创新性的一种。广州华锐互动开发的这款编辑器以其独特的功能…

【星海出品】flask 与docker

import os from flask import Flask, request from flask import Response, make_response, jsonify import cv2 import base64 import io import uuid from main import eye ​ app Flask(__name__)​ app.route(/, methods[GET, POST]) # 添加路由blend def upload_file():…

ZYNQ_project:key_breath

[Synth 8-327] inferring latch for variable led_breath_reg ["C:/Users/warrior/Desktop/ZYNQ/pl/key_breath/rtl/led_breath.v":66] 因为在组合逻辑中&#xff0c;用了非阻塞赋值的方式赋值信号。 组合逻辑自己给自己赋值会产生组合回环&#xff0c;输出不稳定。 …

git and svn 行尾风格配置强制为lf

git CLI配置&#xff1a; // 提交时转换为LF&#xff0c;检出时转换为CRLF git config --global core.autocrlf true // 提交时转换为LF&#xff0c;检出时不转换 git config --global core.autocrlf input // 提交检出均不转换 git config --global core.autocrlf f…