Software Development

Improve your Angular 1.x startup time

This neat and simple trick originally appeared about a year ago on this blog post, so it’s not something I came up with by myself.

Angular’s watcher functions for ng-bind and text nodes () put binding information inside the respective DOM elements using jQuery .data method. This is unfortunately a very expensive operation that impacts both load times and time taken to delete nodes. Fortunately this information is not used in actual binding and is mostly for debugging purposes.

Note, this can be used starting from Angular 1.3+ onwards.

I first discovered it in Swimlane’s Angular 1 SystemJS seed project. The trick basically consists in disabling the debug information on the $logProvider as well as $compileProvider through dedicated function calls. That could look like this:

  .module('myApp', [])
  .config(function($logProvider, $compileProvider) {
    if ( {

Now you may ask yourself, where does come from? Well that’s basically something you have to set during your production build. Frankly, it could be as simple as

<!doctype html>
  <script> = true;

Obviously you may want to automate this through your build configuration, like to inject it right in the beginning of your main application script.

In a RequireJS Grunt task that might look like…

  requirejs: {
    dist: {
      options: {
        wrap: {
          start: '(function() { = true; })();'

..or as the guys from Swimlane did in their Gulp configuration

 return gulp.src('dist/app/app.js')
    .pipe(insert.prepend(" = true;\n"))

It is a nice and easy to add performance booster that can be added without any major effort.

Reference: Improve your Angular 1.x startup time from our NCG partner Juri Strumpflohner at the Juri Strumpflohner’s TechBlog blog.

Related Articles

Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Back to top button