To remove JavaScript that is blocking rendering

Source: Internet
Author: User

Personal Original website: http://www.phpthinking.com/archives/443

The browser must parse the Web page before it can be presented to the user. If the browser encounters an external script that is blocked by the system during parsing, it must stop parsing and download the JavaScript. Each time this happens, the browser adds a network round trip, which results in a delay in the first time the page is rendered.

Suggestions

It is recommended that you handle the JavaScript required to render the first screen area inline and have the JavaScript delay loading required to add additional functionality to the Web page until the first screen is finished sending. Note that to shorten the load time in this way, you must also optimize the CSS sending process .

Embedded with smaller JavaScript

If the external scripts are small, you can add them directly to the HTML document. Embedding smaller files in this way allows the browser to continue rendering the Web page. For example, if the HTML document looks like this:

      <scripttype="Text/javascript"src="Small.js"></script>    <body>    <div>Hello, world!. </div>  </body>

resources small.js is as follows:

/* Contents of a small JavaScript file */

Then you can embed the script as follows:

      <scripttype="Text/javascript">      / * Contents of a small JavaScript file * /    </script>    <body>    <div>Hello, world!. </div>  </body>

This allows you to small.js embed it in an HTML document, eliminating external requests for it.

Delay loading JavaScript

To prevent JavaScript from blocking page loading, we recommend that you use HTML async properties when you load JavaScript. For example:

<script async src="my.js">

If your JavaScript resource is using document.write, it is unsafe to use asynchronous loading. We recommend that you rewrite the script that uses document.write to use other techniques instead.

Also, when loading JavaScript asynchronously, it is important to be cautious if your Web pages load interdependent scripts to ensure that your app loads the script in the appropriate order of dependency.

Frequently Asked Questions
What if I'm using a JavaScript library (such as jquery)?

To remove JavaScript that prevents rendering

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.