- 2020-12-09 00:41:10
1. Location of script tag
when < script > Appear in the < head > For example:
When loading multiple js files, the browser blocks the page rendering by downloading and executing js code first, resulting in a white screen < body > No page content is rendered before the tag), no preview, no interaction, poor user experience.
Modern browsers support parallel download of resources, only limited to
Downloading external resources does not block others
Tag, but can block downloads of other resources.
2. Merge multiple script tags
Encountered when the browser parses HTML < script > There is a definite delay due to the execution of the script, as is the case for chains with the src attribute < script > What's more, more HTTP requests will bring more performance overhead, so as to minimize this delay, which is also an optimization method. Multiple js files can be combined to reduce the number of HTTP requests, reduce the number of three handshakes and the redundant HTTP header transmission, and reduce the response time and improve the user experience. There are many solutions and tools for incorporating js on the Web, which I won't cover here.
3.1. defer and async attributes using the script tag
The async and defer attributes are used to load the js file asynchronously without blocking other processes in the browser. The difference is that async is automatically executed after loading, while defer needs to wait until the page is loaded. One thing to note is that these two attributes must be in the src attribute < script > Tag (outer chain script) is only valid. The following is demo:
// defer.js has only alert("defer") under the file; One line of code
The async example is also the same page structure, I won't put the example here, you can poke the link below.
defer example's link stamp here!
async example's link stamp here!
The page structure is one, but not the other
Open defer.html and see in turn: Pop up alert box of "script" =
Page rendering text =
Pop up alert = for "defer"
Pop up the alert box for "load"
Open ES129en. html and see in turn: alert box = pop out "script" > Pop up alert = for "async" > Page rendering text = > Pop up the alert box of "load"
file.js starts the download as soon as the script element is added to the page. The advantage of using this approach is that the download and execution of ES151en.js does not block other processes on the page.
It is obvious from demo that the dynamic loading method can see the text on the page before the alert box pops up, but the normal way can only see the text on the page after the alert box pops up.
We can encapsulate a function that reads the script script across browsers and dynamically creates the script tag:
This type of dynamic load script is a common non-blocking solution with good compatibility and simplicity.
Another way to load a script without blocking is to use the XMLHttpRequest(XHR) object to get the script and inject it into the page.
The above code sends GET to request the ES183en.js file. onReadyStateChange detects whether readyState is 4(4 means the request is complete) and whether the HTTP status is valid (200 means a valid response,304 means read cache). After determining that the response is valid, create one dynamically < script > Tag, the content is responseText received by the server.
Advantages and disadvantages of this approach:
4.1 Recommended non-blocking schemes
So you only have to do it in the first one < script > Downloading the more compact ES216en.js file has a slight impact on the page after < script > It won't make much difference.