0

In terms of performance best practice it is recommended to load the javascripts at the bottom of the page. AngularJS official documentation also states the same for angular applications.

Place the script tag at the bottom of the page. Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of the angular.js script.

My web page is full of angular directives and angular bindings and i dont have any static html content inside my body tag. Does the general recommendation still applicable for my site? I hope that this recommendation only applicable to the sites with static content and partial angularJS content.

If i put my angular at the bottom, i assume that first my html will be loaded and then angular parsing and then again html loading, parsing and script execution will happen. Is it true? If i place my angular at the top of the page, can i get some performance benefit or performance will be worsen?

I have combined and minified all my scripts into one. I dont have any external templates. I have inline templates with some data biding. Also you can assume that i use ng-cloak and debugInfoEnabled false.

My app looks like

<!DOCTYPE html>
<html ng-app="coreModule">
<head>
    <title>Angular App</title>
    <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<directive1></directive1>
<directive2></directive2>
..
<directive10000></directive10000>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

instead do i need to use in the below way?

<!DOCTYPE html>
<html ng-app="coreModule">
<head>
    <title>Angular App</title>
    <link rel="stylesheet" type="text/css" href="app.css">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
<directive1></directive1>
<directive2></directive2>
..
<directive10000></directive10000>
</body>
</html>
Sriram
  • 767
  • 2
  • 17
  • 42
  • 1
    If you don't have a static html, then where do you put your ng-app? – Icycool Jun 25 '15 at 08:37
  • @lcycool, i dont have any static content inside my body tag. I applied ng-app to my html tag – Sriram Jun 25 '15 at 08:39
  • "If i put my angular at the bottom, i assume that first my html will be loaded and then angular parsing and then again html loading, parsing and script execution will happen. Is it true" did you try it? what happened? – atmd Jun 25 '15 at 08:44
  • I think performance wise it would be almost the same. Even if you put angular on top, it will still render your whole HTML first (I assume it is small so it doesn't matter, too), and then fetch the templates etc for directives. – Icycool Jun 25 '15 at 08:46
  • @atmd, i tried. but i could not exactly measure the difference. I fear if my page grows it will worse in any case. – Sriram Jun 25 '15 at 08:47

3 Answers3

3

If you don't have any content on the HTML file besides the html and header tags and an empty body then you're likely doing it wrong. Here's why.

Whether you put the script tag won't matter in this case, it does matter when you want things to be shown before JS loads but in your case there's no content to show so if the download of the JS is slow, then an empty page will be shown. Not sure if your app is public or just a private one. If the latter, this state is acceptable but if it's going to be public then I don't recommend this scenario.

You should put some content on your initial page load that then, later on, gets improved or replaced with Angular.

Tips to load Angular

You should concatenate all the scripts into one single script and minify it so you save some bandwidth when loading the site.

You should also compile all your templates and put them inside the scripts with $templateCache such as this:

$templateCache.put('main.html', '<strong>Main</strong> template');

In that way, angular won't make any extra requests to your server to try and fetch the templates. There are grunt and gulp tasks for this which you may want to check.

Also, in production you may want to disable the debug data with:

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

Since Angular will be faster.

Antonio Laguna
  • 8,973
  • 7
  • 36
  • 72
  • yes. I have combined and minified all my scripts into one. I dont have any external templates. I have inline templates with data biding. Also you can assume that i use ng-cloak and debugInfoEnabled false. – Sriram Jun 25 '15 at 08:54
1

If your HTML is almost empty, load javascripts at the bottom of the page or not, will have very little impact on your web page performance.

Contrariwise, if the amount of javascript required by your angular application is important, you should lazy load your application. I mean only load at first what's really needed on the first view.

You can use ocLazyLoad to help you do it.

If you want to analyse the performance of your website you can use tools like dareboost.com

Yoann
  • 446
  • 3
  • 6
1

Add loading animation, load angular first. Performance wise the same. Better actually you wont need to hide angular related html, say on mobile angular loads slowly user will be seeing all {{}} everywhere

Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168