JS in-line script can be used freely? Performance optimization said: "No, be careful."

For the way the script is loaded, many people will choose the way to load externally, but very often have to use inline scripting, there are a lot of things to notice in the inline script, not the more the better,

Whether you consider the problem of performance optimization, if so, please pay attention to the following questions when using, may help you.

# #行内脚本会阻塞并行下载影响加载性能, when the inline script is used for loading, other resource downloads will block the stop and the inline script will also affect browser rendering.

Solution: 1. Move the inline script to the bottom to load

2. Using asynchronous callbacks to start JS execution

3. Use the script's defer property (not commonly used, because of browser version and compatibility issues)

1. Move the inline script to the bottom to load

Load the inline script directly after the body is placed

2. Using asynchronous callbacks to start JS execution

The first method: Using the SetTimeout () method to realize the asynchronous start of JS. The advantage of using the settimeout () method is that the browser can render the other resources more efficiently in the lazy loading time.

The second method: triggering the invocation of the JS function by triggering the window.onload () method, enabling the asynchronous callback to start JS

3. Use the Defer property of the script

The Defer property is supported only by some browsers, so it is not recommended to use

Finally, add an important issue that affects the speed of inline script loading:

During Web page loading, most loads do not block the loading of inline scripts, but there is a tumor called style sheet, and inline scripts loaded after the stylesheet block the download of other resources. This is because the browser to keep the CSS and JavaScript execution sequence of parsing, so there is a big risk is to put in-line script after the stylesheet loading, the best way to avoid the problem is to adjust the location of the inline script, so that it does not come out between the style sheet and other resources, If other resources are external scripts, inline scripts and external scripts may have code dependencies, and the best advice is to put inline scripts before the style sheet, which avoids code dependencies. If there is no code dependency, then move the inline script to other resources since, so that it facilitates the download of other resources, and browser rendering, so that its entire page loading for better results.

JS in-line script can be used freely? Performance optimization said: "No, be careful."