Improving AngularJS performance with 1 line of code

The following is from Upstate Interactive’s, Peter B. Smith.

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

I’m on Genius.com and I right click over some text and click “Inspect Element” for I’m not sure what reason, as any good web developer does. Generally, I’ll see nothing particularly interesting as I’m reviewing the elements that comprise the fabric of our modern WWW; usually it’s divs in divs in divs and about 100 classes per each (and that’s fine as far as this developer is concerned). On this site, however, something caught my eye.

Let me show you what that I saw:

So you see what I did, of course you do. Straight from your Retina Display to your retinas…

In case your friends can’t see it, you can show them this annotated image:

What are those ng-scope and ng-isolate-scope classes about? They are for Angular debuggers like Protractor and Batarang. I know this because that’s what the Angular documentation says. Check out the documentation for yourself. In fact, if you read that documentation page there’s no need for you to finish reading my post.

Those classes are for debugging purposes and debugging purposes only. They’re not security leaks, but performance drags. Angular has to add and remove those classes whenever a new scope or new isolated scope is created. Doing this slows down Angular, and the website that is using Angular.

So I thought to myself, “Genius dot com raised $50 million from Andreessen Horowitz didn’t they? They must have lots of Angular-trained engineers. How didn’t they catch that?!”

Then I began to wonder, if Genius didn’t use this one line of code that improves the performance of their website… who else?

So I ⌘+T my way to https://www.madewithangular.com/, the official gallery of Angular projects.

I clicked the first example I saw, Mercedes video channel. I inspected elements, and sure enough there was an ng-scope class. Take a look:

I see it. You see it. Clear as day.

I clicked another example, Maryland State Police. I did my Sherlock Holmes routine and inspected elements. I didn’t see ng-scope. But then I opened console. And I typed:

When you type that and press Enter the console will return some information about the version of angular that is in use on the page. Instead I got this:

The page didn’t use angular. The page isn’t giving me any usable data, so I moved on.

I clicked another example, groupme. Did they use the one line of code that would speed up their Angular? No.

Another example, a startup called Flat. Did they use the one line of code that would speed up their Angular? They were like the Maryland State Police example, the page that the madewithangular website linked to didn’t actually point to a page that was using angular.

I clicked another example, Sprint. Did they use the line of code? No.

I clicked another… no not really.

At that point, I made a spreadsheet because I was now determined to check every example on the madewithangular homepage. That’s 77 examples at the time I was on the site.

Amazon, Magic Leap, GoPro, Lynda, AllRecipes.com. No. No. No. No. No.

Anthropologie, Ford, YouTube Video Manager, Lego, MSNBC. No. No. No. No. No.

Google Insights, Google Trends? No. No.

Jeez Google’s internal teams aren’t using this one line of code?

-My internal dialogue

20 of the 77 examples were like the Maryland State Police example, the link from madewithangular did not lead to a page using angular. So they’re not relevant. How about the other 57 examples? How many of them used this one line of performance-enhancing code?

2.

Those two websites? CNNGo and Greatist.

That’s 3 point 5 percent of websites inspected using one line of code that improves Angular performance. That means 96.5% of websites inspected do not use this one line of code that improves Angular performance.

Oh I also inspected the MadeWithAngular website and Angularjs.org. Neither make use of this one line of code.

To those two nameless, faceless, studious developers at CNNGo and Greatist, this developer wants to buy you a lunch.