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