0

I am trying to make my angular web app as quick as possible. If I begin right at the including scripts level, this is how a straightforward implementation looks like:

<!DOCTYPE html>
<html ng-app="buzz">
<head lang="en">
    <meta charset="UTF-8">
    <title>Live!</title>
    <script type="text/javascript" src="includes/angular.js" ></script>
    <script type="text/javascript" src="includes/angular-route.js" ></script>
</head>
<body ng-controller="AdminController">

<p>Hello world!</p>


<script src="includes/modules/buzz.js"></script>
<script src="includes/controllers/AdminController.js"></script>

</body>
</html>

After referring to the info here: Where should I put <script> tags in HTML markup?

I realized I should probably make my scripts async but if I do the following

ReferenceError: angular is not defined buzz.js:6:4
TypeError: angular is undefined angular-route.js:24:4
ReferenceError: angular is not defined AdminController.js:5:0

This made me realize that the script inside the body tag is beginning to get executed even before the script in the head tag have loaded. So now I have modified it as follows:

<!DOCTYPE html>
<html ng-app="buzz">
<head lang="en">
    <meta charset="UTF-8">
    <title>Live Hockey Commentary!</title>
    <script type="text/javascript" src="includes/angular.js" ></script>
    <script type="text/javascript" src="includes/angular-route.js" ></script>
</head>
<body ng-controller="AdminController">

<p>{{data}}</p>


<script src="includes/modules/buzz.js" defer></script>
<script src="includes/controllers/AdminController.js" defer></script>

</body>
</html>

I cannot async my modules and controllers since there is a dependency. But this doesn't make my web page very fast does it? I can't async my angular scripts in <head>. How do I make my angular web page as fast as possible?

Does adding defer everywhere make it any better?

Community
  • 1
  • 1
tselvan
  • 642
  • 3
  • 11
  • I dare to doubt that whatever slowness you are experiencing comes from loading angular resources. You might want to tell us which problem you are trying to solve because if ~30ms resource loading time is a problem, I'd really like to know why. – Henrik Peinar May 07 '15 at 08:35
  • I am not experiencing any slowness as of now. The angular resources are definitely going to increase in size. I just want to optimize as a good practice. Am I being too greedy? – tselvan May 07 '15 at 15:12

0 Answers0