How to increase the load speed of a Web page by using a pre-loader

The preload (Pre-loader) can be said to be the most important step to improve browser performance. Mozilla official release data, through the loading performance of the Preload Technology Web page to improve the 19%,chrome test Alexa ranked the top 2000 sites, performance has a 20% upgrade.

It is not a new technology, and some people think that only Chrome has this function. Others think it is the most effective way to improve browser performance ever. If you first touch the preload, you may already have countless question marks in mind. What is a pre-loader? How does it improve browser performance?

The first thing you need to know is how browsers load Web pages

the loading of a Web page depends on the script file, CSS The style file. Let's take a look at the browser loading Web page process.

First, the browser downloads the HTML and starts parsing. If the browser finds an external CSS resource link, it sends a download request.

Browsers can parse HTML files in parallel while downloading CSS resources, but once a reference to a script file is found, you must wait for the script file to complete the download and execute to continue parsing.

After the script file has been downloaded and executed, the browser can continue parsing HTML work if it encounters a non-blocking resource i.e. the picture browser sends a download request and continues parsing.

Even though the browser can execute multiple requests in parallel, it cannot be executed in parallel with the operation against the script file.

You can test by opening a Web page in a link by IE7. As we can see, the page head tag contains 2 style files and 2 script files. In the body, contains 3 pictures, a script file.

Through the waterfall flow we can view the process of resource loading:

The download and execution of the script file will block the download of other resource files, which will undoubtedly greatly reduce the browser performance.

How the pre-loader improves network utilization

In the 2008, IE, WebKit and Mozilla implemented the preload function to improve the utilization of the network and to improve the blocking status of the script files to other resource files.

When the browser is blocked by a script file, another lightweight parser continues to browse the remaining tags to find the resource i.e that need to be downloaded. Style files, script files, pictures, and more.

Once discovered, the preload can begin to receive these resources in the background, waiting for the primary parser to complete the current script operation, and other resources have been downloaded, thus alleviating the performance loss caused by the script blocking.

The following waterfall flow is the result of using IE8 to open a page in a link, with significant performance improvements: ie8=7s > ie7=14s.

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/tools/

Pre-loading is still an area of experimentation for major browser vendors. Many browsers try to prioritize the resource downloads. For example, Safari lowers the priority of not making a style file for the current view area. Chrome sets the script file to precedence over the picture, even if the script file is at the bottom of the HTML.

Pre-loader traps

The preload can retrieve only the URLs in the HTML tag, and cannot detect URLs added using script code until the script code executes to obtain such resources.

I've come across an example of how the current window width is judged by JavaScript, which leads to a decision to load a CSS style file. This type of resource is not recognized by the pre-loader.