10 ms·
Improving Angular performance with 1 line of code
- Zekio 10y agoShouldn't debugging be something you opt-in to rather than opt-out of? Seems like a weird design choice
- rhinoceraptor 10y ago> Seems like a weird design choice Angular.js in a nutshell.
- fenomas 10y agoKeep in mind Angular is a framework where, when you pass it a callback function, it will sometimes behave differently depending on what you named the function's parameters. @_@ (Or at least it used to when last I checked. It does it by calling toString on the function and parsing the result.)
- throwanem 10y agoOnly if you opt not to use strict dependency injection, and strict DI has been best practice for quite a while now.
- RKoutnik 10y agoThis is known as Dependency Injection and makes testing and codebase componentization a breeze. You may have seen it called "inversion of control" elsewhere. In essence, my components define what they need to run (through the function params) and Angular hands it to them. For instance: myApp.service('foo', function (bar, baz) { registers a service named `foo` that depends on the `bar` and `baz` components. My service doesn't need to know how/where bar & baz come from, it just knows that it'll have them at runtime. This isn't all callback functions (in fact, Angular is built on Promises, not callbacks) but rather functions when you register a new component. You can override what gets injected (say, mocking things out in tests). DI is a fantastic pattern that reduces or otherwise eliminates all sorts of snarls that can come up.
- fenomas 10y agoCheers for the explanation, but this isn't so much "DI", as "reflection for the sake of DI", right? I mean, libraries can have DI without being quite this magical. I say this naively as a non-user, but in my case this specifically is what made me decide not to use Angular. I was trying it out for a new project and running through tutorials, but when I realized it was being that clever behind the scenes I decided that learning all its quirks would take longer than the rest of the project, and switched to something way simpler.
- voltagex_ 10y agoWhen I've implemented (toy) DI in C#, I've also used reflection. How else are you finding the types to load? (Happy to see examples in other languages, too)
- RKoutnik 10y agoSure, Angular has strict DI, which looks like this: myApp.service('foo', ['bar', 'baz', function (bar, baz) { Now it doesn't need to read the function params as it has the strict strings. This'll survive function param mangling (a typical minification step). Sorry to hear you felt you weren't up to learning Angular & DI patterns. It can be tough for some folks who are still learning programming & JavaScript in general, so there's no shame in passing. Maybe next time - challenge yourself!
- fenomas 10y ago> Sorry to hear you felt you weren't up to learning Angular & DI patterns. It can be tough for some folks who are still learning programming & JavaScript in general I'm sure you don't mean that to sound condescending, but that's really not what I said. It was a question of magicalness vs. payoff - I needed a front-end framework that would handle a bunch of databinding and stay out of my way, and halfway into my first tutorial I found none of the sample code worked (either because I changed a local variable name or because my project already had minification set up, I don't recall). Either way the docs and tutorial I was using didn't even mention the function was being introspected, I had to go source-diving to find that out. It all worked out to make Angular feel less like a framework and more like a career choice - I couldn't just give it idiomatic javascript and expect things to work. If this introspection thing is the one and only magical part of Angular and I just happened to trip over it, maybe I got the wrong impression.
- MaulingMonkey 10y agoI'd be interested in how significant the actual performance hit is - I see no measurements. There are plenty of times you'd want to enable various debug features, even in production, even if it means leaving them always on. The only real question is if the tradeoffs are worth it - the performance hit, if any, and the security implications, if any, versus the productivity gains.
- mkolodny 10y agoDjango has DEBUG set to True by default, too.
- pbreit 10y agoSince performance rarely matters and debugging usually does, doesn't seem totally crazy.
- geofft 10y agoIt's the same design choice as most C compilation toolchains: you get debug symbols during the compilation process, and you can strip the binaries later if you want.
- joosters 10y agoIt's a little different though, as debug symbols won't slow down the execution of a compiled program, they just take up space in the binary.
- nothrabannosir 10y agoReally? Limited experience, but doesn't GCC require -g to enable debug symbols?
- joshschreuder 10y agoIt wasn't an option before 1.3, so I imagine it was debug by default to avoid breaking sites in the wild (ours uses angular.element().scope() in some old code which breaks with debug info off)
- aeontech 10y agoYeah, this is the hidden cost of not choosing sane defaults. If you're not sure what "sane" is, default to "most likely/common use case". It's good to hear this is changed to opt-in in Angular 2 though.
- aaronbrethorst 10y agoDoes Angular 2.0 make this one weird trick unnecessary?
- Bahamut 10y agoAngular 2 forces you to opt in to debug mode, as opposed to the Angular 1 mechanism of opting out.
- jakegarelick 10y agoThis article reminds me of those X Hate Him! ads. http://i1.kym-cdn.com/photos/images/newsfeed/000/633/254/14f.jpg http://i1.kym-cdn.com/photos/images/newsfeed/000/633/254/14f...
- cookiecaper 10y agoI agree. He kept repeating "this one line of code that improves Angular performance!" like he's trying to optimize for SEO on the term "improve angular performance".
- gamache 10y agoI'd like to see some data indicating there is actually an appreciable performance difference. Indeed, with only one line of code to add, the setup cost is low, but this article asserts a performance gain without any evidence.
- aaronbrethorst 10y agoThe official Angular docs describe it thusly: You may want to disable this in production for a significant performance boost https://docs.angularjs.org/api/ng/provider/$compileProvider https://docs.angularjs.org/api/ng/provider/$compileProvider I'm inclined to believe the engineers who wrote the docs on this.
- Bahamut 10y agoA Twitter engineer mentioned this in a lightning talk in the AngularJS SF meetup a little more than a year ago - he mentioned that he found speed gains of about 33% with that one line. It's a great tool to have in your belt for optimizing angular apps, most people working with angular are not aware of this unfortunately.
- MaulingMonkey 10y agoI'd be inclined not to believe even myself, had I wrote such a thing, without hard data. Even if I was right then, things may have changed. And just what constitutes significant, anyways?
- visural 10y agoNot a very rigorous test - but I just applied this to one of our (very) large angular 1.x apps and it had a consistent 20-30% reduction in profiled execution time across the couple of test interactions I did. That said, I'm not sure it made much perceptible difference as the app already performed adequately and the reduction is amortized across all of the interactions the user makes.
- gog 10y agoIf you tested on your machine, I hope you factored in that your users may not have an up to date machine.
- deleted 10y ago[deleted]
- acconrad 10y agoYeah this seems more like something that Angular should be doing, rather than the end user. If you're in a production environment Angular should enable this for you.
- jsumrall 10y agoI've searched a few minutes for any blog post or article which demonstrates the performance difference between turning this setting on or off, and I haven't found anything. If you don't have a benchmark, you don't have a performance boost.
- dimgl 10y agoThis is a silly statement. Not everything is placebo. I'm working on a bigger Angular application and adding this one line of code made a small perceivable difference.
- rrdharan 10y agoDid you do a double blind test or use any instrumentation to confirm your perception? I ask as someone who has more than once been convinced that I'd made something faster only to prove myself wrong after measuring it.
- mkonecny 10y agoGiven the condescending tone of this article, you'd think the author has some data to back himself up.
- Too 10y agoI guess after checking 77 web pages if they have this flag enabled or not he didnt have any time left for actual performance testing.
- artursapek 10y agoSlow websites hate him!
- hiimnate 10y agoCheck out this one weird trick to making your websites 20% faster!
- melvinmt 10y agoLine 17 will make you furious.
- roosterjm2k2 10y agoNew Law in Your State changes website performance forever!
- sker 10y agoDude should have made a small fortune selling optimization services to those big corps.
- hinkley 10y agoThere was a 3 job string in the late nineties where the first impressive thing I did was go fix the log levels of the code and get transaction times down by 50%. Sometimes the simplest tricks are the best. I've also been known to take a couple minutes off a build process or fix something that is annoying everybody to break the ice.
- Alex3917 10y agoFlagged for being written as SEO spam, which is unfortunate because the content is actually useful.
- nrub 10y agoLooks like it's the first suggestion in their production developer guide, https://docs.angularjs.org/guide/production https://docs.angularjs.org/guide/production
- RKoutnik 10y agoAs someone who's specialized in AngularJS optimization [0], this doesn't surprise me in the least. Developers leave plenty of performance optimizations on the table, some worse than this one. The truth of the matter is that in the general case, it doesn't matter. We engineers like to go on and on about this or that perf efficiency but most of the time the code runs fast enough (and the majority of the time when it doesn't, ads are to blame over framework tweaks). Heck, I shouldn't even be saying this as it'll cut into my very lucrative field but unless you've got a confirmed performance problem, you shouldn't think about it at all. Really. Leave all of the fancy perf tweaks behind. Sure, you might get ridiculed on Medium but that's par for the course here on the internet. I'm afraid articles like these will cause lots of cargo-cult 'optimization' that just makes the job harder for future devs. Make it work, make it work well, THEN make it work fast. [0] I wrote Batarang's new perf panel before Google abandoned the project
- jsprogrammer 10y agoSome deoptimizations are ahead-of-time planted to make performances increases easy to enable in the future. http://thedailywtf.com/articles/The-Speedup-Loop http://thedailywtf.com/articles/The-Speedup-Loop
- hinkley 10y agoI have a better solution to this problem. I optimize one module at a time, and I optimize it deeply. The number of people whose stuff I might break is kept to a minimum, the surface area of regression testing is controlled, and next quarter when they ask me for more power I can repeat it, until I run out of modules (hopefully someone will write some more in the meantime). The whole idea of the Tall Tent Pole is pretty enticing, but the thing is nobody is ever gonna buy into going back for the last 20% in any one part, and these things always have a multiplicative factor. If you're in a field with no competition, this isn't a big deal, but how often does that happen?
- joshschreuder 10y agoTried this out on a work project a month or two ago, found it worked quite well and had a noticeable performance boost. Unfortunately a bunch of inherited legacy code uses angular.element().scope() in a lot of places which then breaks without this turned on, so I had to revert it.
- joesmo 10y agoWhat the author discovered is really shitty defaults for Angular. Most software is like that. Don't blame the developers using the software, blame the Angular developers for choosing shitty defaults. Instead of choosing production ready defaults, they chose development ready defaults, creating more work for everyone.
- yoran 10y agoMy experience is that Ember.js does a good job in that area. Through ember-cli they provide sane defaults when deploying for production vs a local development environment.
- recursive 10y agoI think it would create much more work to optimize the defaults for production than development. I'd guess fewer than 1% of all debugged angular apps ever go into "production", and even fewer in situation where the performance gained by this would be meaningful.
- enraged_camel 10y ago>>Don't blame the developers using the software, blame the Angular developers for choosing shitty defaults. I like to blame developers who don't read the friggin documentation on the software they are using. This particular suggestion is literally the very first one in the developer guide for running Angular in production: https://docs.angularjs.org/guide/production https://docs.angularjs.org/guide/production
- joesmo 10y agoOh please. There are thousands of Angular guides out there. Some people don't use the official documentation, especially when it's as shitty as Angular's is.
- seanwilson 10y agoI've played with this setting on a few projects and didn't notice any big difference so I'd like to see benchmarks for it. I reasoned that if it's not significantly slowing the code down and could be used for easier debugging later I didn't see the harm leaving it in.
- azernik 10y agoLess link-baity title - "Using development options in production is bad for performance."
- inquire 10y agoProtractor also works with debugInfo turned on from v 3.1.0 https://github.com/angular/protractor/blob/master/CHANGELOG.md https://github.com/angular/protractor/blob/master/CHANGELOG....
- natvert 10y agothis. is. awesome. (and sad that i didnt know this already)
- mangeletti 10y agoWow, I did not know that everyone else also right clicked to "inspect element" all over the place, for no reason... I love moments like this.
- melvinmt 10y agoIt comes in quite handy when you're dealing with sites that attempt to hide content behind a paywall, with just a front-end solution... #nevertrusttheclient
- imjustsaying 10y agoThat still works? Cool. Off the top of your head, do you remember any examples of sites that expose paywalled content like this?
- mangeletti 10y agoNot a pay wall, but Quora requires login, and you can just remove the overlay and the "noscroll" body class.
- finleymedia 10y agowww.kansascity.com
- shanselman 10y agoForgive my ignorance, but doesn't the Angular framework * have this off by default and you have to turn it ON in prod? * have it cause a Console.Log("DEBUG IS ON Y'ALL"); Either way, I mean, there's ways to give folks the heads up, right? It seems odd to have to ADD this in Prod.
- iLemming 10y agoWhatever. I'm using Clojurescript. I'm happy. When I used angular - I wasn't.
- blinkingled 10y agoThis is a case of bad defaults - why should a developer be required to write code, even if it is a one liner, to _disable_ debug? It should be the other way around - you write a single liner to enable debug.
- BinaryIdiot 10y agoCorrect. Debug options should never be a default. They should be enabled explicitly through the act of debugging (perhaps a flag somewhere in your web app, etc). I'm guessing it is the way it is for simplicity so someone can debug without trying to figure any of this out.
- hinkley 10y agoIt should be on for test and dev builds, and off for production.
- kylemuir 10y agoThat particular flag wasn't released until version 1.3 so by opting in rather than out it wasn't released as a breaking change. When it was released and we tried to use it, it broke our site entirely due to third-party libraries we were using.
- megablast 10y agoJust another reason to hate angular.
- __derek__ 10y agoThat's not just Angular. From the React README[1]: > Note: by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages. > To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode. [1]: https://www.npmjs.com/package/react https://www.npmjs.com/package/react
- awqrre 10y agoThis might have went unnoticed to most if the web was binary blobs...
- deleted 10y ago[deleted]
- justinsaccount 10y agoI see this more as a tooling failure. All the yeoman/grunt/gulp/webpack/boilerplate/starterkit BS that you need to do to get a minified/concatenated/compressed build deployed and none of that turns this option off? The only way I was ever able to get an angular project built/tested/deployed was by using something like yeoman. It's kind of shocking that the default project templates set up everything that you need except for this one thing. I do notice that the made with angular site isn't even minifying their code: https://www.madewithangular.com/static/js/main.js https://www.madewithangular.com/static/js/main.js Though that may be intentional so that people can see how it is written.
- Pxtl 10y agoNobody will write that one line until somebody says that it's time to make performance a priority.
- partycoder 10y agoTL;DR
- wintersFright 10y agotried this but broke the angular datatables directive...
- wintersFright 10y agotried this but it broke the angular-datatables directive
- nathancahill 10y agoImprove Angular performance with 1 line of code: rm -rf /
- teknologist 10y agoI think another question to ask is why calling angular.element().scope() is considered use of "debug info"
- ggregoire 10y agoYou should turn off debugInfo carefully because some third-party libraries works with the classes added by this mode. For example: https://github.com/angular-ui-tree/angular-ui-tree/issues/521 https://github.com/angular-ui-tree/angular-ui-tree/issues/52... (now fixed)
- matharmin 10y agoIf you're using Ionic 1.x, the debugging info is forced to enabled, since some of Ionic's internals depend on this for some reason. Haven't tested with 2.x to see if they've improved this yet.
- roncohen 10y agoGreat trick. Incredible that it's not on by default. if you've applied that trick and still find yourself wondering what's taking up time, we just released a performance monitoring tool. We're looking for feedback, so please let me know how you find it: https://opbeat.com/angularjs https://opbeat.com/angularjs