Web page Performance Optimizations: Prevent JavaScript, CSS from blocking browser rendering pages

Source: Internet
Author: User
Tags script tag

External files referenced in Web pages: JAVASCRITP, CSS, etc. often block browser rendering pages. Assuming that a JavaScript file referenced in

The front-end performance tuning must exclude any potential render blocking points, allowing the browser to render the overall page in the shortest amount of time.

1. Why is JavaScript blocking?

<!doctype html>"text/javascript" src="page.js"></script>  

In the above code, when the browser parses the script tag, because the browser does not know what page.js will do to the page, the browser needs to stop rendering, download and execute page.js before continuing to render the subsequent content. If any delay occurs during the download of Page.js, it will also affect the rendering of the entire page.

2. Optimization scheme:

(1) Inline JavaScript:

If the initial rendering of the page does depend on Page.js, we can consider using inline JavaScript.

<!doctype html>"text/javascript" >/    **    </script>  

(2) Deferred loading:

If the initial rendering of the page does not depend on page.js, we can consider delaying loading the page.js so that it is loaded after the page's initial content rendering is complete.

<!doctype html>"text/javascript" src="page.js "></script>  </body>

(3) Asynchronous loading

  HTML5 allows us to add properties to the script tag: "Async" to tell the browser not to stop waiting for the script to execute, and when to download the script when it is done. In this case, the browser will download the page.js side of the content after rendering.

<!doctype html>"text/javascript" src="page.js"async></script>  

However, if a certain JS is dependent on other JS, then you cannot use asynchronous loading.

 <!doctype html>"  text/javascript   src= " jquery-1.11.3.min.js   " async  ></script> <script Type= " text/javascript   " src="  jq-plugin.js  "  async  ></script>  

Since asynchronous loading is used, JS is no longer executed sequentially. In the example above, Jq-plugin.js relies on jquery, and if Jq-plugin.js is completed before jquery is downloaded, then the browser executes jq-plugin.js causing an error. Of course, this type of problem can be solved by introducing dependency management, which is another topic that is not open for discussion.

3. Why is CSS blocked?

Because CSS determines the style and layout of DOM elements, the browser encounters a CSS file and waits for the CSS file to load and parse before continuing to render the page.

4. Optimization scheme:

(1) Inline CSS

We can add the CSS code that needs to be used to render the first screen of the page into the inline CSS.

(2) Defer loading CSS

For those who do not need to use the first screen rendering of CSS, we can still use the file form and after the page content rendering completed before loading.

<!doctype html>"text/css">     . Blue {        color:blue;    }     </style>  class="blue" >      Hello,world!    </div>    <link href="other.css" rel="stylesheet  " />  </body>

5. Conclusion

We need to get the page content to be presented to the user as soon as the page is loaded, and the JS and CSS required for the initial rendering of the page can be inserted directly into the

All external file references can be placed in the content of the page, and the JS file can also be loaded asynchronously.

Web page Performance Optimizations: Prevent JavaScript, CSS from blocking browser rendering pages

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.