Geek Answers Handbook

Angular.js - parse html function takes 2000 ms and more

I am trying to speed up my site. This is what I found in the chrome developer tools inside Timeline / Profile JS. It contains about 150 of these blue HTML parsers (on screen).

enter image description here

This is 50% of the download time. I tested it using a tablet, and this feature took even 15,000 ms! I set the route by the provider as follows:

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

What happened? The full size of the website is 500 KB. It has 97 areas.

Edit: if I test the site without using angular on the tablet, the loading time is 2.5 s (as I indicated above with angular, it was more than 18 seconds). I am ready to pay for the decision.

I also add timeline data that I debugged (on the tablet). You can check the chronology on Chrome. Open the developer console (F12). Click the Timeline tab. Right-click on this tab, and then select Download Timeline Data.

Edit 2: I use angular material , and I think this can be a problem, and this can lead to all of these parsing html because there are, for example, a lot of buttons.

+8
javascript angularjs angular-material
source share
1 answer

You have not posted your code, but below the slow manufacturers:

  • Too many skews, repaints, parseHTML
  • Slow dirty check
  • Too many DOM operations

In the short solutions below:

  • Use directives with inline templates
  • Use $ templateCache
  • Reusing memory instead of allocating new memory
  • Use fewer hours
  • Creating Pending Object Elements
  • Prevent large and complex ng repeats (e.g. apply pagination)
  • Preventing multiple (initial) requests from a page

Where is it wrong?

Use a tool other than the Chrome Developer Dashboard, like Batarang, to debug and profile your angularjs application. Download it from: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

More details here:

+1
source share

More articles:


All Articles