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.
By Ben Nadel on June 1, 2020
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.
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.
Learn how to improve the performance of rendering in canvas by using OffscreenCanvas
Improve The Performance of Your Application With 5 Tips