generator-ngbp
generator-ngbp copied to clipboard
thardy
Wouldn't it be better to load JavaScript in the body?
Usually it is recommended to place the <script> tags right before closing the body tag (</body>) so that the browser's parser doesn't get blocked until all the JavaScript is downloaded. Wouldn't it be better to place the <script> tag at the bottom of the body of index.html?
<!DOCTYPE html>
<html ng-app="<%=appName%>" ng-controller="AppController">
<head>
<title ng-bind="pageTitle"></title>
<!-- font awesome from BootstrapCDN -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- compiled CSS --><% styles.forEach( function ( file ) { %>
<link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>
</head>
<body>
<header>
<nav class="container navbar-default">
<ul class="nav navbar-nav">
<li ui-sref-active="active">
<a ui-sref="home">Home</a>
</li>
<li ui-sref-active="active">
<a ui-sref="about">About</a>
</li>
</ul>
</nav>
</header>
<div class="container" ui-view="main"></div>
<footer class="container">
(c) <%= date %> <%= author %>
</footer>
<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>
</body>
</html>
That practice is generally good for pages that use javascript to provide some small effects to the page itself, but still need to load very quickly. When you're talking about a SPA, you're usually dealing with a web application, and having the application fully loaded and responsive is usually more valuable than having the first page load quickly.
My advice is to use static html for your landing pages, marketing site, SEO-friendly, lead-generation websites, and use a SPA for your web applications. On the former, speed is paramount on the first hit. On the latter, functionality is the top priority, and we can settle for speed after the first hit. Having everything loaded and ready to go once the user starts clicking is more important. Once we get some traction on javascript loaders/managers in the browser, we'll start thinking about a hybrid approach, but I haven't needed to merge the two yet. I usually go one route or the other.
