The performance of JavaScript in the browser has become the most important usability issue faced by developers. This problem is complicated by the blocking nature of JavaScript, which means that when the browser is executing JavaScript code, it cannot do anything else at the same time. This article details how to properly load and execute JavaScript code to improve its performance in the browser.
Overview
No matter whether the current JavaScript code is embedded or in an external link file, the downloading and rendering of the page must stop and wait for the script execution to complete. The longer the JavaScript execution process takes, the longer the browser waits to respond to user input. The reason why browsers block when downloading and executing scripts is that the script may change the namespace of the page or JavaScript, which affects the content of subsequent pages. A typical example is using document.write() on the page.
JavaScript code inline example
<html> <head> <title>Source Example</title> </head> <body> <p> <script type="text/javascript"> document.write("Today is " + (new Date()).toDateString()); </script> </p> </body> </html>
When the browser encounters the