Web Optimization (ii)

The last mention of JS blocking DOM rendering may appear white screen phenomenon, so for JS we need some optimization. First we can imitate the concept of time in communication, using SetTime () to execute a section of JS code and then render the page and then execute a section of JS code, which can effectively prevent white screen phenomenon.

Of course, you can be aware that this does not increase loading speed, so how can you improve loading speed? If the JS code to download faster is not it? The time to load JS code, mainly loading external JS, if there are more than one JS script we want to download the execution is not a waste of time and the process does not render the page. OK, the first method, we go in parallel to download the JS script.

How to download JS script in parallel, you may immediately answer my XHR injection ah, very famous. Here to summarize the technology can be non-blocking loading script, you can certainly write all the JS in the page, but if you want to use the jquery library, or JS code is very long, this is not reasonable, and this is not conducive to the use of JS cache.

1. XHR Eval
2. XHR Injection
3. Script in IFrame
4. Script DOM Element
5. Script defer
6. document.write Script Tag

XHR eval This technique looks at the name, eval, the main use of the Eval function, which is relatively dangerous by using the new XHR object to request a script like a server and execute it, in fact, with caution.

XHR injection is interesting, it is also through the XHR to request the script to the server, but it is through the document.createlement () to create a Script tab, very interesting, very much a practice of chicken thief

Both of these practices use XHR technology, so it is not possible to solve cross-domain problems due to the same-origin policy, in fact many times we need cross-domain.

Here are a few ways to solve this problem.

For the script in IFrame, this, the main page of the IFRAME is loaded with other components, we will be the width of the IFRAME is set to 0, so that it is not visible, and then in the IFrame to implement asynchronous loading, which is actually not worth the candle, Because the IFRAME element is the most expensive DOM element, the IFRAME itself is limited by the same-origin policy.

Script defer, is IE own implementation of one, so browser compatibility is not good, but the new version of Chrome FF, etc. have achieved its support,

The last technique, which is only supported in IE, is also a parallel download script that still blocks rendering.

From the above several techniques, we find that it seems that in many cases, the script DOM element is a good choice, in fact it is.

In the above we talked about the technology of parallel download, but if we have several scripts, we download in parallel, but the download speed is fast and slow, download is executed, if there is a dependency between the code, then the implementation of the problem, that is, how we ensure that multi-js file execution is executed sequentially, Tomorrow we will continue to remember this.

Web Optimization (ii)