| layout | title | permalink |
|---|---|---|
default |
Resources |
/resources/ |
The script elements to include a document's JavaScript files should be
placed directly before a document's closing body tag:
<script src="script/transitions.js"></script>
</body>
</html>This is because JavaScript files are a "blocking resource" that will prevent the browser from downloading other resources on the page while downloading the script.
A content delivery network (CDN) is a distributed system of servers that can be leveraged to quickly serve web resources to users. Using a CDN to serve popular JavaScript or CSS libraries has a number of benefits, including decreased latency and the ability to leverage caching. The following example serves the popular jQuery library from Google's CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>JavaScript and CSS files should be minified. Minification is the process of condensing JavaScript and CSS files to only include the required content. For example, spaces can be removed from CSS files and the names of local variables can be shortened in JavaScript files. A number of tools exist for accomplishing this task.
JavaScript and CSS files should also be concatenated, or combined together into a single file. In other words, rather than referencing multiple JavaScript files on a page, these scripts should be concatenated into a single JavaScript file. This improves performance by reducing the number of separate connections the browser needs to establish while loading a page.
Web servers are gradually upgrading to a new version of the HTTP protocol, HTTP/2, which includes a number of improvements to performance. Specifically, HTTP/2 will allow multiplexing, or the ability to send multiple requests over a single TCP connection, which may actually obviate the need for concatenation and other HTTP/1-specific hacks.