[Angular] Increasing Performance by using Pipe

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 }}

优质内容筛选与推荐>>
1、table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
2、剑指offer总结
3、C/C++笔试题1（基础题）
4、Oracle 12c 的新功能：模式匹配查询
5、Spket安装

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看