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.mzph.cn/news/137829.shtml

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

相关文章

【Docker】Docker 网络

引言 Docker是一个开源的应用容器引擎&#xff0c;它允许开发者将应用及其依赖打包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器或Windows机器上&#xff0c;也可以实现虚拟化。Docker的主要优势之一是其网络功能&#xff0c;而网络功能的核心就是网络驱动…

HTTP协议详解-下(Tomcat)

如何构造 HTTP 请求 对于 GET 请求 地址栏直接输入点击收藏夹html 里的 link script img a…form 标签 通过 form 标签构造GET请求 <body><!-- 表单标签, 允许用户和服务器之间交互数据 --><!-- 提交的数据报以键值对的结果来组织 --><form action&quo…

jQuery 网页属性操作

jQuery提供了一些方法&#xff0c;例如 attr() 、 html() 、 text() 和 val() &#xff0c;它们充当了HTML文档中内容的获取器和设置器。 jQuery – 获取内容 jQuery提供了 html() 和 text() 方法来提取匹配的HTML元素的内容。以下是这两种方法的语法&#xff1a; $(selector…

18 Linux 阻塞和非阻塞 IO

一、阻塞和非阻塞 IO 1. 阻塞和非阻塞简介 这里的 IO 指 Input/Output&#xff08;输入/输出&#xff09;&#xff0c;是应用程序对驱动设备的输入/输出操作。当应用程序对设备驱动进行操作的时候&#xff0c;如果不能获取到设备资源&#xff0c;那么阻塞式 IO 就会将对应应用…

Zynq-Linux移植学习笔记之65- 国产ZYNQ在linux下usleep时间精度不准问题解决

1、背景介绍 采用复旦微的ZYNQ&#xff0c;跑linux操作系统&#xff0c;在应用程序中使用usleep进行延时时&#xff0c;发现存在10ms以下采用usleep试验都为10ms的情况 2、解决办法 使能设备树中的PS TTC设备&#xff0c;默认不是打开的 timere0024000 {compatible "s…

一题三解(暴力、二分查找算法、单指针):鸡蛋掉落

涉及知识点 暴力、二分查找算法、单指针 题目 给你 k 枚相同的鸡蛋&#xff0c;并可以使用一栋从第 1 层到第 n 层共有 n 层楼的建筑。 已知存在楼层 f &#xff0c;满足 0 < f < n &#xff0c;任何从 高于 f 的楼层落下的鸡蛋都会碎&#xff0c;从 f 楼层或比它低的…

GEE ——errors & debuggings (2023GEE峰会总结)

简介&#xff1a; 在gee中有三种错误&#xff0c;一种就是系统错误&#xff0c;也就是我们看到的会在JavaScript code editor中出现的错误&#xff0c;也就是在程序还没有启动之前就会提示的错误&#xff0c;而客户端错误则主要是会提示一些在代码过程中的错误&#xff0c;比如…

远程电脑未连接显示器时分辨率太小的问题处理

背景&#xff1a;单位电脑显示器坏了&#xff0c;使用笔记本通过向日葵远程连接&#xff0c;发现分辨率只有800*600并且不能修改&#xff0c;网上找了好久找到了处理方法这里记录一下&#xff0c;主要用到的是一个虚拟显示器软件usbmmidd_v2 1)下载usbmmidd_v2 2&#xff09;…

asp.net core mvc之模型绑定、特性约束模型绑定、模型验证(服务器/客户端/远程)

一、不用模型绑定 数据类型都是string 1、UserController.cs public class UserController : Controller {public IActionResult Register(){return View();}[HttpPost]public IActionResult DoRegister(){//不用模型绑定 以前的方法取表单数据或Url的参数//数据类型都是s…

openssl+SM2开发实例一(含源码)

一、SM2算法介绍 SM2&#xff08;国密算法2&#xff09; 是中国国家密码管理局&#xff08;CNCA&#xff09;颁布的椭圆曲线密码算法标准&#xff0c;属于非对称加密算法。它基于椭圆曲线离散对数问题&#xff0c;提供了安全可靠的数字签名、密钥交换和公钥加密等功能。SM2被设…

软件测试项目实战经验附视频以及源码【商城项目,app项目,电商项目,银行项目,医药项目,金融项目】(web+app+h5+小程序)

前言&#xff1a; ​​大家好&#xff0c;我是阿里测试君。 最近很多小伙伴都在面试&#xff0c;但是对于自己的项目经验比较缺少。阿里测试君再度出马&#xff0c;给大家找了一个非常适合练手的软件测试项目&#xff0c;此项目涵盖web端、app端、h5端、小程序端&#xff0c;…

Anaconda Powershell Prompt和Anaconda Prompt的区别

先说结论&#xff1a;主要功能应该一样。区别在于powershell支持的命令更多。比如查询路径的命令pwd和列表命令ls。 Anaconda PowerShell Prompt和Anaconda Prompt是Anaconda发行版中两个不同的命令提示符工具。 Anaconda Prompt是Anaconda发布的默认命令提示符工具&#xff0…

FFMPEG库实现mp4/flv文件(H264+AAC)的封装与分离

ffmepeg 4.4&#xff08;亲测可用&#xff09; 一、使用FFMPEG库封装264视频和acc音频数据到 mp4/flv 文件中 封装流程 1.使用avformat_open_input分别打开视频和音频文件&#xff0c;初始化其AVFormatContext&#xff0c;使用avformat_find_stream_info获取编码器基本信息 2.使…

【链接装载与库】 Linux共享库的组织

Linux共享库的组织 由于动态链接的诸多优点&#xff0c;大量的程序开始使用动态链接机制&#xff0c;导致系统里面存在数量 极为庞大的共享对象。如果没有很好的方法将这些共享对象组织起来&#xff0c;整个系统中的共享对象文件则会散落在各个目录下&#xff0c;给长期的维护…

react之Component存在的2个问题

问题 只要执行setState()&#xff0c;即使不改变状态数据&#xff0c;组件也会重新render()只当前组件重新render()&#xff0c;就会自动重新render子组件 原因 Component中的shouldComponentUpdate()总是返回true 思路 只有当组件的state或props数据发生改变时才重新rend…

听GPT 讲Rust源代码--library/core/src

题图来自 The first unofficial game jam for Rust lang![1] File: rust/library/core/src/hint.rs rust/library/core/src/hint.rs文件的作用是提供了一些用于提示编译器进行优化的函数。 在Rust中&#xff0c;编译器通常会根据代码的语义进行自动的优化&#xff0c;以提高程序…

React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass less】(十三)

文件目录 Proxying in Development http-proxy-middleware fetch_get fetch 是否成功 axios 全局处理 antd UI库 更改主题 使用css module的情况下修改第三方库的样式 支持sass & less Proxying in Development 在开发模式下&#xff0c;如果客户端所在服务器跟后…

手写链表C++

目录 一、链表基本概念以及注意事项 1.1 构造函数与析构函数 1.2 插入元素 1.3 重载运算符 二、小结 一、链表基本概念以及注意事项 在工作中&#xff0c;链表是一种常见的数据结构&#xff0c;可以用于解决很多实际问题。在学习中&#xff0c;掌握链表可以提高编程能力和…

Flutter IOS 前后台切换主题自动变化的问题

BUG 触发条件 设备 IOS 15 模拟器GetX 实现换肤GetMaterialApp 里面配置好 theme和darkTheme使用GetView和GetController进行开发 此时如果把App前后台切换&#xff0c;使用Obx包括起来的内容会跟谁异常主题变换&#xff0c;未使用Obx的颜色不会变化。 解决路径 首先在获取 …

华为交换机端口 access、trunk和hybrid收发数据规则

文章目录 1. 三个端口类型处理数据帧的汇总表2. access 端口3. trunk端口4. Hybrid 端口&#xff08;交换机的默认端口类型&#xff09;5.常用命令 1. 三个端口类型处理数据帧的汇总表 端口类型收到不带VLAN标签的帧的处理规则收到带VLAN标签的帧的处理规则发送帧时的处理规则…