Learning javascript file loading optimization _ javascript skills

This article mainly introduces javascript file loading optimization in detail, and implements js file loading optimization in three ways. if you are interested, refer to the js engine section for details, when the rendering engine parses the script tag, it gives control to the JS engine. if the script loads external resources, it must wait until the download is complete before execution. Therefore, here we can perform a lot of optimization work on it.

Placed at the bottom of the BODY

To enable the rendering engine to render the DOM tree as early as possible, we need to place the script at the bottom of the body so that the page can be removed from the white screen as soon as possible, that is, the DOMContentLoaded event will be triggered early. however, in IOS Safari, Android browser, and IOS webview, even if you put the js script at the end of the body, the results are the same. Therefore, you need to perform other operations to optimize js file loading.

DEFER loading

This is a script attribute defined in HTML4. it is used to indicate that when a rendering engine encounters a script, if the script references an external resource, it will be temporarily suspended and loaded. The rendering engine continues to parse the following HTML documents. after parsing, the script in the script is executed.