Several Methods for loading javascript in non-blocking browsers

This article describes how to enable non-blocking loading of browsers.Javascript.

Generally, most browsers download resources in parallel. However, due to the special nature of external scripts, such as changing the DOM structure of documents through scripts, dependency between scripts, and using document. write outputs HTML to the page. In order to ensure correct execution of scripts and rendering layout, the browser completely blocks the rendering of subsequent page content and loading of other resources before loading and executing the script.

In the page loading process, if you can gradually render the content, it is very important for a good user experience. We usually do some things in the onload event handler of the wondow object, but because of the feature of script blocking loading and rendering, this increases the page loading time and delays the onload event triggering, on the other hand, it also delays user feedback. In this case, we need to use some methods to allow the browser to load external scripts in a non-blocking manner.

1. Use the XMLHttpRequest object to asynchronously Load External scripts.

This method has the advantage of triggering less browser busy indicators and can be supported by all modern browsers. The disadvantage is that the cross-domain security mechanism of the browser can only load external scripts in the same domain. In addition, if there is dependency between multiple scripts, you need to use the queue management script to control the execution sequence of multiple scripts.

2. Use Javascript to dynamically create SCRIPT elements of external scripts

This method is the best solution for loading external scripts in parallel across domains, the implementation method is to use Javascript to dynamically create the srcript element required to reference external scripts in HTML, and set the URL of the corresponding external script for the src attribute of the srcript element to implement and other resources. parallel loading.

Iii. Use iframe to load external scripts

In this way, we need to use a new HTML page to convert the external script to the line script of the HTML page, and then use iframe on the home page to load the HTML page containing the script, to use this method, You Need To refactor some code to access DOM elements on the home page. IFRAM is a DOM element with relatively high overhead, and also has cross-origin restrictions.

4. Use the derfer attribute of the Script tag

This method is the simplest way to load external scripts in non-blocking parallel mode. You only need to apply the defer attribute to the SCRIPT tag in the conventional mode When referencing external scripts. However, the disadvantage of using this method to load external scripts is that it only implements parallel loading in the department browser, so the compatibility is insufficient.

Docuument. write script tag

This method is also relatively simple, that is, the document. write method of javascript is directly used to output the string marked by the script that references the external script in HTML. Deficiencies and compatibility of the method may be insufficient.

Summary

The above methods need to be based on specific requirements. Do you need cross-origin? Do you need to ensure that the script is executed in order? Do I need to trigger a busy indicator for more or less browsers? And compatibility, the amount of code supported to determine the way to comprehensively consider that is appropriate.