We have been writing JavaScript code from ages. But have you ever think of OPTIMIZING it? How many of you know about the Design Patterns for JavaScript? " WHAT!!! Design Patterns for JavaScript? Do they really exists?". Yes that's what might have come in your mind. Well to be very honest, most of the UI developers, never focus on the performance of the JavaScript.
Despite advancements in core JavaScript execution time, there are still aspects of JavaScript that the new age JavaScript engines don’t handle.In this and next few articles I will focus on how to improve performance of the JavaScript code we write. I will share techniques and approaches which will address different aspects of JavaScript, including execution time, downloading, DOM interaction, page life cycle, and more.
This article talks about improving page loading and execution time.
Let's start with a simple example -
<html>
<head>
<title>Simple Script </title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Can you guess what's wrong with this code? Well the answer is - inefficient script positioning.
Usually we all keep all the <script> tags that are used to load external JavaScript files along with <link> tags to load external CSS files and other meta information about the page in the <head> tag. The theory was that it’s best to keep as many style and behavior dependencies together, loading them first so that the page will come in looking and behaving correctly.
Today most browsers use a single process for both user interface (UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer
JavaScript takes to execute, the longer it takes before the browser is free to respond to user input. this means that the very presence of a <script> tag is enough to make
the page wait for the script to be parsed and executed. Whether the actual JavaScript code is inline with the tag or included in an external file is irrelevant; the page download
and rendering must stop and wait for the script to complete before proceeding. This is a necessary part of the page’s life cycle because the script may cause changes to the page while executing.
In the example above each <script> tag blocks the page from continuing to render until it has fully downloaded and executed the JavaScript code, the overall performance of this page will suffer. Keep in mind that browsers don’t start rendering anything on the page until the opening <body> tag is encountered. Putting scripts at the top of the page in this way typically leads to a noticeable delay, often in the form of a blank white page, before the user can even begin reading or otherwise interacting with the page.
Although new age browsers support parallel downloading of the external JavaScript files but it still blocks downloading of other resources, such as Images. And even though downloading a script doesn’t block other scripts from downloading, the page must still wait for the JavaScript code to be downloaded and executed before continuing.
So what's the solution to this problem? Well the best solution to this problem is to place all <script> tags as close to the bottom of the <body> tag as possible so as not
to affect the download of the entire page -
<html>
<head>
<title>Simple Script</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<script src="file1.js"></script>
<script src="file2.js"></script>
</body>
</html>
In this case even though the script downloads will block one another, the rest of the page has already been downloaded and displayed to the user so that the entire page isn’t perceived as slow.
That's the first lesson for you!!!
Posts
No comments:
Post a Comment