Summary of several ways to make the browser load javascript non-blockingly_javascript skills

In order to ensure that the script is executed correctly and the layout is rendered, the browser will completely block the rendering of subsequent content of the page and the loading of other resources until the browser has loaded and executed it.

If the content can be gradually presented during the loading process of the page, it is very important for a good user experience. Usually we also do something in the onload event processing function of the wondow object. However, due to the characteristics of script blocking loading and rendering, on the one hand, it increases the page loading time and delays the triggering of the onload event. On the other hand, it also delays the time the user requests. Looking forward to feedback. This requires us to use some methods to allow the browser to load external scripts in a non-blocking manner.

1 Use the XMLHttpRequest object to load external scripts asynchronously.

The advantage of this method is that it triggers fewer browser busy indicators and can be supported by all modern browsers. The disadvantage is that due to the browser's cross-domain security mechanism, it can only allow external scripts in the same domain to be loaded. In addition, if there are dependencies between multiple scripts, you need to write related queue management scripts to control the execution order of multiple scripts.

2 Use Javascript to dynamically create SCRIPT elements for external scripts

I think this method is the best solution for cross-domain parallel loading of external scripts. The implementation method is to use Javascript to dynamically create the srcript element required to reference external scripts in HTML and give the src attribute of the created srcript element. Set the URL of the corresponding external script to load in parallel with other resources.

Four. Use iframe to load external scripts

In this way we need to use a new HTML page to convert the external script into an inline script to the HTML page, and then use an iframe to load the HTML page containing the script in the main page. Using this method requires refactoring part of the code. To access the DOM elements in the main page. Moreover, IFRAM is a relatively expensive DOM element and also has cross-domain restrictions.

5 Using the derfer attribute of the Script tag

This method is the simplest way to implement non-blocking parallel loading of external scripts. You only need to apply the defer attribute to the SCRIPT tag in the conventional way of referencing external scripts. However, the disadvantage of loading external scripts in this way is that it only implements parallel loading in some browsers and therefore lacks compatibility.

Six document.write script tag

This method is relatively simple to implement, which is to directly use the document.write method of javascript to output the string of the script tag that references the external script in HTML. The shortcomings are the same lack of compatibility as method five.

Summary

The above methods need to be based on specific needs, such as whether they need to cross domains? Do I need to ensure that my scripts are executed in order? Do you need to trigger the busy indicator for more or fewer browsers? As well as compatibility, the amount of code supported will be determined to comprehensively consider which method is suitable.