Slow Angularjs page initialization - long delay before html loading

Question

I'm running an angularjs app, and can't figure out why my page is loading slowly. The css and js files all load quickly, but there is a long delay between that and when the html loads, where the app just seems to stay suspended doing nothing

headertemplate.jtml, footertemplate.html, and notelist.html are the partials being loaded to make up the view

It's maybe because you're calling external url. Please download and use local library only for font. — digit
– digit, Commented Feb 14, 2017 at 17:16
I thought that might be it, but removing the font doesn't change anything. The html still has that wait period — KDogg
– KDogg, Commented Feb 14, 2017 at 17:23
There's 1 more. Parse.serverurl. Try comment that line what is the output. Is it still same? — digit
– digit, Commented Feb 14, 2017 at 17:27

Pop-A-Stash · Accepted Answer · 2017-02-14 17:51:02Z

0

Angular uses ajax to retrieve templates. You should be able to look at the network tab in developer tools to see the ajax request for each template. That might give you a clue as to what the hold up is.

I'm not sure why it's taking so long to receive them, but one way you can speed that up would be to pre-cache the templates with a tool like HTML2JS. This way, your templates are just another JS file that you include along with your program code and templates are loaded as soon as your program code is loaded. It will increase your initial download size, but will greatly improve the speed of fetching templates.

answered Feb 14, 2017 at 17:51

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pranavjindal999 · Accepted Answer · 2017-02-14 19:11:30Z

0

You can cache all templates in $templateCache which will make angular app never make xhr request for partial htmls.

https://docs.angularjs.org/api/ng/service/$templateCache

There are various gulp and grunt modules to automate that process. https://www.npmjs.com/package/gulp-angular-templatecache https://github.com/ericclemmons/grunt-angular-templates

By the way are you making any server calls in angular.forEach, for some reason they don't show up in network tab (idk why?? o.O) Or may be you are using resolve in ui-router's state config which is taking time to activate the state and calling html partial..

answered Feb 14, 2017 at 19:11

pranavjindal999

3,0574 gold badges29 silver badges36 bronze badges

Collectives™ on Stack Overflow

Slow Angularjs page initialization - long delay before html loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related