Improve Rendering Performance Of A Large List View In AngularJS 1.2.22

 Improve Rendering Performance Of A Large List View In AngularJS 1.2.22

Ben Nadel looks at the poor rendering performance of a large list view in AngularJS 1.2.22; how he identified some of the bottlenecks using Chrome's Performance Profiler; and what changes he made to vastly improve the rendering of the view.

Attempting To Improve Rendering Performance Of A Large List View In AngularJS 1.2.22

By Ben Nadel on June 1, 2020

Tags: Javascript / DHTML

Last week at InVision, we held a company hackathon that produced some amazing ideas across the company. I was on a team that built a "magic link" invite system for enterprise customers. But, as we were integrating the feature, I noticed that the "Team List" page rendering performance was rather appalling. As such, I spent the weekend isolating the team list page (as best I could) so that I could focus specifically on its performance bottlenecks and quickly iterate on possible solutions. Performance profiling is always a fun (and sometimes frustrating) adventure; so, I thought I would share what I did here in AngularJS 1.2.22.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

WAT?! AngularJS?! For those of you who follow my blog, you may notice that most of my client-side articles use modern Angular, up to and including Angular 9 and the Ivy rendering engine. I freakin' love Angular; and I use it for all of my personal projects. But, at work, I maintain a legacy system that still runs on AngularJS 1.2.22.

What's shocking isn't so much that the system still runs on AngularJS 1.2.22 - what's really shocking is how powerful AngularJS is. Even within the confines of a framework release that's like 6-years old at this point, I still get, what I think is, a ton of high-quality good work done.

With that said, AngularJS definitely has some performance bottlenecks, generally around the number of "watchers" that have been configured in the page. However, the performance of the "team list" page felt disproportionately slow. My gut was telling me that the issue extended beyond a "watcher" problem.

So, I spend Saturday morning recreating the team list page in my JavaScript Demos project, copying (and simplifying) the parts that I felt might be causing issue. Ultimately, I was able to build a 300-item **`ng-repeat` list** that embodied the slowness that I am seeing in production:

javascript / dhtml improve rendering performance

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Improve JavaScript performance with OffscreenCanvas

Learn how to improve the performance of rendering in canvas by using OffscreenCanvas

Top 5 JavaScript Tips for Improving Performance

In order to make your website or your application faster, you will need some knowledge about performance in JavaScript. Having a good performance in your application is very important because the users don’t like using slow applications. That’s why in this article, I wanted to show you some simple tips that will help to improve the performance in JavaScript and make your website or application smooth and faster. Improve The Performance of Your Application With 5 Tips

Top 5 JavaScript Tips for Improving Performance

Improve The Performance of Your Application With 5 Tips

Performance Optimization - 12 tips to improve JavaScript Performance

In this article, you'll learn 12 tips for improving JavaScript performance. One of the most important aspects when creating a webpage or an app, is performance.

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 Code: https://bit....