[Angular] Increasing Performance by using Pipe
2024-08-24 01:34:55
For example you make a function to get rating;
getRating(score: number): string {
let rating: string;
console.count('RatingPipe');
if(score > 249000){
rating = "Daniel Boone";
}
else if(score > 200000){
rating = "Trail Guide";
}
else if(score > 150000){
rating = "Adventurer";
}
else if(score > 100000){
rating = "Pioneer";
}
else if(score > 50000){
rating = "Greenhorn";
}
else{
rating = "Buzzard food";
}
return rating;
}
Then using it in html:
{{getRating(entry.points)}}
These code actually casues the preformance issues, because everything Angualr's change detection run, it saw function call inside {{}}, it have to run it everything when anything changes, there is no way to figure out whether the function output changes or not without running it.
The way to fix it is using Pipe. Angular will remember the input value and cache the output. Therefore by using pipe we can reduce the number of function call way better.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'Rating'
})
export class ScoreRatingPipe implements PipeTransform {
transform(score: number): string {
let rating: string;
console.count('RatingPipe');
if(score > 249000){
rating = "Daniel Boone";
}
else if(score > 200000){
rating = "Trail Guide";
}
else if(score > 150000){
rating = "Adventurer";
}
else if(score > 100000){
rating = "Pioneer";
}
else if(score > 50000){
rating = "Greenhorn";
}
else{
rating = "Buzzard food";
}
return rating;
}
}
{{entry.points | Rating }}
最新文章
- cglib动态代理
- ElasticSearch大数据分布式弹性搜索引擎使用
- 史上最强大的js图表库——ECharts带你入门(转)
- hibernate的多对多例子讲解（加图片）
- Jenkins运行完Test后，把ngreport生成的测试报告 拷贝到相应的文件夹
- SQLServer排序时与读取的记录会影响到结果?
- 【转】python中常用第三方包os sys
- Maven之多模块打包成一个jar包及assembly
- PHP DES加密
- 【转】nginx配置：location配置方法及实例详解
- 添加OpenStack Mitaka源
- 毕业论文内容框架指导-适用于MIS系统
- iOS----------取数据的两种取法
- 数据库的Connection、Cursor两大对象
- 利用curl 实现URL监控
- type=number 的maxlength和可以输入E的问题
- SharePoint Online 怎样让用户只能拥有sub site 的权限
- TZOJ 4085 Drainage Ditches(最大流)
- python接口自动化2-发送post请求详解（二）
- 语法规范：BNF与ABNF 巴斯克范式