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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
