angular.js - parse html function is taking 2000ms and much more [closed]

Question

I'm trying to speed-up my website. This is what I found in chrome's developer tools inside Timeline/Profile JS. In contains like 150 those blue Parse HTML(in screen).

It's 50% of load time. I tested it using a tablet and this function took even 15000ms! I'm setting route provider like this:

var start = '<div class="important">';
var end = '</div>';
$routeProvider.when('/test', {
   template: start + 'some short text' + end
});

What's wrong? Complete size of website is 500kb. It has 97 scopes.

Edit: if I test website without using angular on tablet, load time is 2.5s(as I pointed above with angular it was more than 18 seconds). I'm willing to pay for solution.

I'm also adding timeline data that I debugged(on tablet). You can check a timeline on Chrome. Open developer console(F12). Click tab Timeline. Right click on this tab and then choose Load timeline data.

Edit 2: I'm using angular-material, and I think this might the problem and this might all those parse html's because there are for example lot of buttons.

Answer 1

You didn't post your code, but below the slow makers:

• Too many reflows, repaints, parseHTML
• Slow dirty checking
• Too many DOM operations

In short solutions below:

• Use directives with inline templates
• Use $templateCache
• Reuse memory instead of allocating new memory
• Use fewer watch
• Defer element creation
• Prevent large and complex ng-repeats (apply pagination for example)
• Prevent multiple (initial) requests from a page

Where goes it wrong?

Use a tool besides Chrome developer bar as Batarang to debug and profile your angularjs app. Download it from: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

Read more here:

• http://tech.small-improvements.com/2013/11/28/analysing-performance-of-angularjs-screens/
• http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html