problem

Since most browsers use a single process to handle the implementation of the user interface (UI) and JavaScript, that is to say when the browser execute JavaScript code, you can not do anything else . Once the JavaScript execution time is too long, because the browser can not respond to the user's other operations, it will give a "stuck" feeling.

Reaction on the code, that is, each encounter <script>tag, the browser will stop and wait for the script to download, parse and execute.

The reason why the browser with a single process to handle, because the process of script execution may at any time modify the content of the page, it is necessary to wait until the UI is rendered after the script is finished . E.g:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div>
            <script>
                document.write(new Date().toDateString());
            </script>
        </div>
    </body>
</html>

solution

Script Location

Generally, we load a script file or CSS files are written as follows:

<hmtl>
    <head>
        <script type="text/javascript" src="script1.js"></script>
        <script type="text/javascript" src="script2.js"></script>
        <script type="text/javascript" src="script3.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>Hello World</div>
    </body>
</html>

In theory, the script and style files on <head>the tag is loaded in favor of the correctness of page rendering and interaction.

However, this will cause serious performance problems, we know that the browser encounters in front of <script>the label will be stopped and waited for them all downloaded and executed, will continue after rendering the page. And the browser to resolve <body>after the label will render the content of the page .

In other words, the <script>label on <head>the tag page load may result in longer display a blank page, it can not interact with the page, the feeling is very slow to load.

Although most modern browsers allow parallel download script file, which is good news, but the script still download process will block downloading other resources, such as images . Moreover, the browser is still waiting for all executing the script to continue. So the question has not been fundamentally resolved .In fact, because the single-threaded JavaScript, this problem is difficult to be cured。

However, we can still try to make this issue a user does not look so obvious.

You can put <script>the label on the <body>label of the bottom , so you can wait until the page contents are loaded up again to start loading <script>.

Since the pages have been loaded out, so it gives the user the feeling that "the page loading speed okay", although this time may not yet completed the script file is loaded and executed.

To the above code as an example:

<hmtl>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>Hello World</div>
        <script type="text/javascript" src="script1.js"></script>
        <script type="text/javascript" src="script2.js"></script>
        <script type="text/javascript" src="script3.js"></script>
    </body>
</html>

Organization script

Since the rendering block the download page of the script file, even if it is a script file can be downloaded in parallel, but the HTTP request brings the performance overhead is also very impressive, so try to reduce the number of script files, or <script>the number will be able to improve performance .

It can be packaged by way of the plurality of script files into one, thereby reducing <script>the number of labels.

Non-blocking script

Script reduce file size and limit the number of HTTP requests only the first step in performance optimization. Although downloading a single large script files only generate an HTTP request, it will block the browser a large period of time. To prevent this from happening, we can gradually JavaScript file to load the page.

Script delay (defer)

For the HTML <script>tag defines an extended attribute deferto show that the elements contained in the script will not modify the DOM, so the code delay can be safely performed.

With the deferattributes <script>can be placed anywhere in the document. It will be resolved in the browser to start downloading the label is, but will not be executed until the DOM has finished loading (DOMReady).

Dynamic scripting

The dynamic scenario is the use of JavaScript can be used to create <script>and being added to the page, so that you can re-load the script files when needed. E.g:

let script = document.createElement("script");
script.type = "text/javascript";
scirpt.src = "file1.js";
document.head.appendChild(script);

JavaScript performance - Load and execution

Article Directory