How can we use the pre-loading technology to accelerate webpage loading?

The Pre-loader is the most important measure to improve the browser performance. According to official data released by Mozilla, the loading performance of web pages is improved by 19% through the pre-loader technology. Chrome tests the top 2000 websites in Alexa, and the performance is improved by 20%.

It is not a new technology. Some people think that only Chrome has this function. Some people think that it is the most effective way to improve the browser performance in history. If you contact the preloader for the first time, there may be countless question marks in your mind. What is a preloader? How does it improve browser performance?

First, you need to understand how browsers load web pages.

Loading a webpage depends on script files,CSSStyle File. Let's take a look at the web page loading process in the browser.

• First, the browser downloads HTML and starts parsing. If the browser finds the external CSS Resource Link, a download request is sent.
• The browser can parse HTML files in parallel while downloading CSS resources. However, once a reference to a script file is found, the parsing can continue only after the script file is downloaded and executed.
• After the script file is downloaded and executed, the browser can continue to parse HTML. If a non-blocking resource I. e. image browser sends a download request and continues parsing.

Even if the browser can execute multiple requests in parallel, it cannot be executed in parallel with operations on script files.

You can use IE7 to open the webpage in the link for testing. We can see that the webpage head tag contains two style files and two script files. The body contains three images and one script file.

Through the waterfall stream, we can view the resource loading process:

How to improve network utilization of the preloader

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

When the browser is blocked by the script file, another lightweight parser will continue to browse the remaining tags to find the resources I. e. Style files, script files, images, and so on to be downloaded.

Once it is found that the pre-loader can receive these resources in the background, wait for the master parser to complete the current script operation, and other resources have been downloaded, this reduces the performance loss caused by script blocking.

The waterfall stream below is the result of using IE8 to open the webpage in the link, and the performance has been significantly improved: IE8 = 7 S> IE7 = 14 S.

Preloader traps

The pre-loader can only retrieve URLs in HTML tags and cannot detect URLs added using script code until the script code is executed.

I used JavaScript to determine the current Window width and then decide to load the CSS style file. The pre-loader cannot identify such resources.

The above code can easily cheat IE9's pre-loading mechanism. In the waterfall stream below, we can see that loading images occupies all the connections until the first image is loaded, CSS files.

Currently, there are several ways to control the loading sequence of the preloader (using javacript to hide Resource files is one of them). At the same time, W3C Resource Priorities also provides two features to affect the preloader.
Lazyload: The Marked resource is downloaded only after it is not marked as a lazyload resource.
Postpone: resources are downloaded only after they are visible to the end user. The display attribute of the I. e. label is set to none.
Pre-Load
VS
Pre-read
Pre-fetching can notify the browser which resources may be used on the current page or other pages in the future.
The following is a simple pre-read application that notifies the browser to load resources for other sites to be accessed:
<link rel="dns-prefetch" href="other.hostname.com">
Chrome allows us to notify the browser in advance to load resources that will be used in the future. The declared resources will be downloaded with a higher priority.
<link rel="subresource" href="/some_other_resource.js">
(As mentioned in Chromium source code, the download priority of resources marked as subresource is lower than that of style files and script files, but not lower than the image loading priority)
It also indicates which files in the browser are pre-read at a lower level.
Pre-read independent resource files that will be used in the future.
<link rel="prefetch" href="/some_other_resource.jpeg">
You can use the pre-read method to render the entire page in the background.
<link rel="prerender" href="//domain.com/next_page.html">
Summary
Pre-loading is not a new technology, it is commemorative for improving the browser performance, we do not need to do any operation can use pre-loading.
It is widely used. I tested the following browsers and all of them have the pre-loading function:

 

 
  
IE8/9/10
 
  
Firefox
 
  
Chrome (inc Android)
 
  
Safari (inc iOS)
 
  
For Android 2.3

 
Bruce Lawson (President of Opera) also announced that Opera Mini also supports pre-loading.
Link: http://www.cnblogs.com/oooweb/p/page-prefetch-and-prerender.html
Via powertoolsteam