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);以上就是几种常用的优化方法。
相关文章:
Angular 由一个bug说起之一:List / Grid的性能问题
在angular中,MatTable构建简单,使用范围广。但某些时候会出现卡顿 卡顿情景: 1:一次性请求太多的数据 2:一次性渲染太多数据,这会花费CPU很多时间 3:行内嵌套复杂的元素 4:使用过多的…...
第12章 PyTorch图像分割代码框架-3:推理与部署
推理模块 模型训练完成后,需要单独再写一个推理模块来供用户测试或者使用,该模块可以命名为test.py或者inference.py,导入训练好的模型文件和待测试的图像,输出该图像的分割结果。inference.py主体部分如代码11-7所示。 代码11-7 …...
MYSQL---基础篇
一、数据库操作 1.创建数据库:CREATE DATABASE db_test1; 2.使用数据库:use 数据库名; 3.删除数据库:DROP DATABASE [IF EXISTS] db_name; 4.创建表:CREATE TABLE table_name ( field1 datatype, field2…...
【启扬方案】启扬安卓屏一体机在医疗自助服务终端上的应用解决方案
为了解决传统医疗模式下的“看病难、看病慢”等问题,提高医疗品质、效率与效益,自助服务业务的推广成为智慧医疗领域实现信息化建设、高效运作的重要环节。 医疗自助服务终端是智慧医疗应用场景中最常见的智能设备之一,它通过与医院信息化系统…...
收藏!7个国内「小众」的程序员社区
技术社区是大量开发者的集聚地,在技术社区可以了解到行业的最新进展,学习最前沿的技术,认识有相同爱好的朋友,在一起学习和交流。 国内知名的技术社区有CSDN、博客园、开源中国、51CTO,还有近两年火热的掘金ÿ…...
LeetCode(4)删除有序数组中的重复项 II【数组/字符串】【中等】
目录 1.题目2.答案3.提交结果截图 链接: 80. 删除有序数组中的重复项 II 1.题目 给你一个有序数组 nums ,请你** 原地** 删除重复出现的元素,使得出现次数超过两次的元素只出现两次 ,返回删除后数组的新长度。 不要使用额外的数…...
C++ 同构字符串/ 单词规律
给定两个字符串 s 和 t ,判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t ,那么这两个字符串是同构的。 每个出现的字符都应当映射到另一个字符,同时不改变字符的顺序。不同字符不能映射到同一个字符上,相…...
oracle 中 %TYPE %ROWTYPE
前言 PL/SQL 提供了 %TYPE 和 %ROWTYPE 两种特殊的变量,用于声明与表的列相匹配的变量和用户定义数据类型,前一个表示单属性的数据类型,后一个表示整个属性列表的结构,即元组的类型。 举例: -- 数据表TB_TRANS_RECO…...
Pytorch实战教程(五)-计算机视觉基础
0. 前言 计算机视觉是指通过计算机系统对图像和视频进行处理和分析,利用计算机算法和方法,使计算机能够模拟和理解人类的视觉系统。通过计算机视觉技术,计算机可以从图像和视频中提取有用的信息,实现对环境的感知和理解,从而帮助人们解决各种问题和提高效率。本节中,将介…...
51单片机PCF8591数字电压表数码管显示设计( proteus仿真+程序+设计报告+讲解视频)
PCF8591数字电压表数码管显示 1.主要功能:讲解视频:2.仿真3. 程序代码4. 设计报告5. 设计资料内容清单&&下载链接资料下载链接(可点击): 51单片机PCF8591数字电压表数码管设计( proteus仿真程序设计报告讲解视…...
普华永道于进博会首发“企业数据资源会计处理一体化平台”
11月6日,在第六届中国国际进口博览会上,普华永道发布企业数据资源会计处理一体化平台(英文名为Data Accounting Platform,简称DAP)。该产品以普华永道“五步法”数据资源入表路径为理论依据,依托多年来普华…...
IDEA 使用Reset Current Branch to Here 进行git 版本控制,图文操作
文章目录 一、总结区别(只针对本地仓库操作)Soft详细解释文件版本冲突处理 Mixed详细解释Hard详细解释Keep详细解释文件版本冲突处理 二、其他Revert commit 参考文档 一、总结区别(只针对本地仓库操作) Soft详细解释 Soft操作只…...
有趣的 TCP 抢带宽行为
昨天发了一篇 非技术文章,很多人找我讨论,浓缩成一句话,就是 “死道友而不死贫道”,我的简历上写着这些把戏能带来什么,我的 blog 上写着这么做是多么无耻,哈哈。 看看共享链路上如何挤占带宽: …...
HCIP---VRRP
文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 一. VRRP概述 VRRP---虚拟路由器冗余协议 VRRP(Virtual Router Redundancy Protocol)是一种用于在多个路由器之间创建虚拟路由器的协议。 VRRP使用了一系列协议来实现路…...
在家用Python搞副业,也能月入10000+
下班副业实现经济自由的时候,你还在床上躺着,天天摆烂吗?这样的生活真的是你想要的吗? 疫情在家接一些Python相关的小单子,既能给自己练手,还能赚是真香 从零基础开始真的一台电脑和一部手机就可以✅ 一次…...
play() failed because the user didn‘t interact with the document first.
起因: 进入页面视频不自动播放(有时候可以,有时候不行)。 原因: Chrome 在66版本后为了避免标签产生随机噪音,都在遵循autoplay政策。 解决方法: 为 video 标签设置静音状态即可(添…...
Java任意视频转MP4
Java任意视频转MP4 在做视频上传功能时候,用户可能上传不同类型的视频文件,导致需要特定播放器才能播放,为了解决视频格式统一问题需要把视频转码一下 ,转换成统一的MP4格式。我们直接使用第三方工具 FFmpeg FFmpeg介绍 FFmpeg…...
flutter实践:慎用Expanded
问题:在一个Android原生的弹框里显示flutter view,由于使用了Expanded导致组件未显示出来 最神奇的地方在于debug调试模式显示正常,然后用release版本发布时怎么都显示不出来,还导致点击后无响应ANR 问题代码: child: Stateful…...
华为防火墙vrrp+hrp双机热备负载分担(两端为交换机)
主要配置: FW1 hrp enable hrp interface GigabitEthernet1/0/2 remote 172.16.0.2 interface GigabitEthernet1/0/0 这里可以假想为接两条外线,一条外线对应一个vrrid undo shutdown ip address 1.1.1.2 255.255.255.0 vrrp vrid 3 virtual-ip 1.1.1…...
欧拉角(横滚角、俯仰角、偏航角)、旋转矩阵、四元数的转换与解决万向节死锁
1、概述 物体的位姿(位置和方向)的描述方法一般使用两个坐标系来表示,一个是世界坐标系或地面坐标系,这里我都叫做地面坐标系吧,属于参考坐标系;另一个是自身的坐标系,以飞机为例来讲述一些常见…...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...



