3 Ways to Render Large Lists in Angular

栏目: IT技术 · 发布时间: 4年前

内容简介:Frameworks in 2020 have got better, more efficient and faster. With that said, rendering large lists of items on the Web without causing the Browser to freeze can still be hard even for the fastest frameworks available.This is one of the many cases where “

An overview of the available techniques to render large lists of items with Angular

3 Ways to Render Large Lists in Angular

Frameworks in 2020 have got better, more efficient and faster. With that said, rendering large lists of items on the Web without causing the Browser to freeze can still be hard even for the fastest frameworks available.

This is one of the many cases where “the framework is fast, your code is slow”.

There are many different techniques that make rendering a large number of items in a non-blocking way for the users. In this article, I want to explore the current techniques available, and which ones are best to use based on particular use-cases.

Although this article focuses on how to optimize rendering with Angular, these techniques are actually applicable to other frameworks or simply Vanilla Javascript.

The framework is fast, your code is slow

This article goes in detail about an aspect I talked about in one of my previous articles: rendering too much data.

We will take a look at the following techniques:

  • Virtual Scrolling (using the Angular CDK)
  • Manual Rendering
  • Progressive Rendering

Whatever implementation you choose for rendering long lists, make sure you share your reusable Angular components to Bit.dev ’s component hub. It will save you time otherwise spent on repeating yourself and will make it easier for you and your team to use tested and performance-optimized code across your Angular projects.

3 Ways to Render Large Lists in Angular
Example: browsing through shared components in bit.dev

You can read more about it in my previous post:

1. Virtual Scrolling

Virtual Scrolling is probably the most efficient way of handling large lists, with a catch. Thanks to the Angular CDK and other plugins it is very easy to implement in any component.

The concept is simple, but the implementation is not always the easiest:

  • given a container and a list of items, an item is only rendered if it’s within the visible boundaries of the container

To use the CDK’s Scrolling module, we first need to install the module:

npm i @angular/cdk

Then, we import the module:

import { ScrollingModule } from '@angular/cdk/scrolling';@NgModule({
 ...
 imports: [ ScrollingModule, ...]
})
export class AppModule {}  

We can now use the components to use virtual scrolling in our components:

<cdk-virtual-scroll-viewport itemSize="50">       
<div *cdkVirtualFor="let item of items">
{{ item }}
</div>
</cdk-virtual-scroll-viewport>

As you can see, this is extremely easy to use and the results are impressive.The component renders thousands and thousands of items without any problem.

If Virtual Scrolling is so good and easy to achieve, why bother exploring other techniques? This is something I’ve been wondering too — and actually there’s more than one reason as to why.

  • The way it’s going to work is very dependent on implementation : it’s hard to be able to manage all the possible scenarios with one single implementation.
    For example, my component depended on the Autocomplete field (built by the same team) and unfortunately, it didn’t work as expected. The more complex your items, the more difficult it’s going to be .
  • Another module, another big chunk of code added to your app .
  • Accessibility and Usability: the hidden items are not rendered, and therefore won’t be searchable.

Virtual Scrolling is ideal (when it works) in a number of situations:

  • an undefined and possibly enormous list of items (approximately greater than 5k, but it’s highly dependent on the complexity of each item)
  • infinite scrolling of items

2. Manual Rendering

One of the options I’ve tried to speed up a large list of items is manual rendering using Angular’s API rather than relying on *ngFor .

We have a simple ngFor loop template:

<tr 
*ngFor="let item of data; trackBy: trackById; let isEven = even; let isOdd = odd"
class="h-12"
[class.bg-gray-400]="isEven"
[class.bg-gray-500]="isOdd"
>
<td>
<span class="py-2 px-4">{{ item.id }}</span>
</td>

<td>
<span>{{ item.label }}</span>
</td>

<td>
<a>
<button class="py-2 px-4 rounded (click)="remove(item)">x</button>
</a>
</td>
</tr>

I’m using a benchmark inspired by js-frameworks-benchmark to calculate the rendering of 10000 simple items.

The first benchmark run was done with a simple, regular *ngFor. Here are the results: scripting took 1099ms and rendering took 1553ms, 3ms painting.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员的算法趣题

程序员的算法趣题

[ 日] 增井敏克 / 绝 云 / 人民邮电出版社 / 2017-7 / 55.00元

本书是一本解谜式的趣味算法书,从实际应用出发,通过趣味谜题的解谜过程,引导读者在愉悦中提升思维能力、掌握算法精髓。此外,本书作者在谜题解答上,通过算法的关键原理讲解,从思维细节入手,发掘启发性算法新解,并辅以Ruby、JavaScript等不同语言编写的源代码示例,使读者在算法思维与编程实践的分合之间,切实提高编程能力。 本书适合已经学习过排序、搜索等知名算法,并想要学习更多有趣算法以提升编程技巧......一起来看看 《程序员的算法趣题》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试