[Go] pre-load resources research

Original:http://www.otakustay.com/prefetch-resource/

What is pre-loading

The so-called preload, is through a certain programming method, so that the browser in space, in the background through HTTP request access to some resources. When users actually use these resources over a period of time, they can get these resources faster (return 304 or directly hit the browser cache) than a full (return 200) request.

Preloading is very important in some cases, especially when certain resource users are used for a short period of time, such as the previous and next pages of the paging list, and images such as some commonly used logos.

Possible ways to preload resources

The principle of preloading is to find a way to send an HTTP request, the cache of the response is done by the browser, so all the possibilities of reading remote resources can be a pre-loaded resource scenario, roughly the following categories:

General method

• Use the script tag:<script type="other/prefetch" src="some.res"></script>
• Using the IMG tag:
• Use the IFRAME tag:<iframe src="some.res"></iframe>
• To load with XMLHttpRequest:$.get(‘some.res‘);
• Loading with flash: You need to write a specific flash

Unconventional Way

• Use background Image:<div style="background-image: url(some.res);"></div>
• Use the object or embed tag:<object type="other/prefetch" src="some.res"></object>
• Use the link tag and modify media:<link rel="stylesheet" href="some.res" media="prefetch" />
• Do import in CSS:@import "some.res"

Next Generation approach

• Using link Prefetch:<link rel="prefetch" href="some.res" />
• Using Webworker:var worker = new Worker(‘some.res‘);
• Using @font-face:@font-face { font-family: prefetch; src: url(some.res); }

There are many ways, there may be more, the specific use of the way is not explained in detail, the details of the need for attention will be described in detail in the following article.

Evaluation metrics for preloaded resource methods

Each of these approaches has its strengths and weaknesses, which are evaluated mainly in the following dimensions:

[A] browser compatibility

The main studies included Ie6-8, firefox3.5+, chrome7+, opera9+, and safari4+ compatibility.

[B] coverage of resource locations

The main study is whether there is a cross-domain policy limit and whether third-party resources can be read.

[C] security of introducing third-party resources

The main study is whether the loaded resources will be parsed and executed, whether it is possible to produce security issues such as XSS.

[D] introduction of resource type coverage

The main study is whether different types of resources can be introduced, including text, image, script, HTML, and so on.

[E] can determine when preload is complete

Due to the uncertainty of preloading resources, it is possible to cause the user to behave when the resource is not loaded, causing the load request to be interrupted. Therefore, it is necessary to investigate whether the loading of resources is controllable, and whether there are load, error, ReadyStateChange and other events.

[F] accumulation of labels for clean-up feasibility

if the method of preloading resources introduces redundant tags, such as link, script, etc., it is necessary to investigate whether deleting the corresponding tag during the resource loading will cause the request to be interrupted.

Issues that arise in the assessment

As we go deeper, the flaws of the various schemes are being tapped a little bit, and here are some strange questions that are not easily noticed.

Script tag

In Firefox, Firefox does not send any requests when the Type property of the script tag is the one that Firefox does not recognize, except that Firefox does not respond to type= "Text/javascript".

IMG tags and background-image

In Firefox, when the contents of an IMG tag or background-image-style request return a content-type other than the image class, its response body (Response body) is only received by 1 packets, and the contents of the subsequent content are discarded.

Flash

For cross-domain requests, Flash reads the policy XML file on the opposing server, such as when the policy file is allowed to cross-domain, it is loaded.

Object or embed Label

In Firefox, regardless of whether the element is hidden, will be prompted to install plug-ins, of course, this plugin is not found.

Under Chrome, if the element is hidden, the request is not initiated and the element is not hidden, prompting for the plugin to be installed.

All browsers will not initiate a request until the plugin has been downloaded.

However, if the type of the object tag text/plain does not have the problem of installing the plug-in, but the tragedy is that under IE will not make a request, and in Firefox and Chrome will parse the execution of HTML resources .

It is important to note that the object element has its particularity, and the cost of creating an object element is much greater than the other elements.

Link label

With the Load event under IE, Opera can periodically view readystate to determine if a request has been completed and not exist in another browser.

Link Prefetch

Firefox is only supported at this stage, and this feature is well worth looking forward to in the HTML5 draft.

Webworker

Script files loaded with Webworker are parsed and executed immediately, although the global object in the worker is limited, it still cannot completely prevent third-party scripts from injecting harmful code.

@font-face

@font-face only defined in the style sheet is not to initiate the request, an element must be created, its font-family set to the Font-face, and the element must be added to the DOM tree to generate the request.

Assessment forms and basic judgments

The table in the previous article a-f a total of 6 aspects to examine the various pre-loading resources, in order to more intuitively evaluate the pros and cons of various ways.

[A] Browser compatibility [B] cross-domain [C] security [D] Resource type [E] whether onload [F] can delete tags *: Only the effect of the DOM element is deleted, because the GC is not controlled, the element object is not measured by GC.
	A	B	C	D	E	[f]*
Script	1	1	1	0	1	1
Img	0	1	1	0	1	1
Iframe	1	1	0	1	1	1
XMLHttpRequest	1	0	1	1	1	1
Flash	1	0	1	1	1	1
Background image	0	1	1	0	0	1
Object/embed	0	1	0	0	1	1
Link + Media	1	1	1	1	0	1
@import	1	1	1	1	0	1
Link Prefetch	0	1	1	1	0	1
Webworker	0	1	0	1	0	1
@font-face	0	1	1	1	0	1

From the data presented in the table, the way of Link+media and the CSS @import way are relatively good, the only regret is that it is not able to get the completion of loading, so the site itself through the study of user behavior, to ensure that the user 2 times the interval sufficient to complete the load of resources.

Other considerations

• Link prefetch as the standard in the HTML5 draft, and the bottom level of the browser support, so the browser can be in the bandwidth free time to preload, the user can also be a certain way to turn off the function, all aspects have a decent performance, if you can promote to mainstream browser, It should be the most recommended solution.
• @import need server-side assistance, package the resources that need to be loaded into a CSS-formatted file that contains several @import declarations, but in any case the browser will need more than one request to load the dynamically generated CSS file.
• In a Link+media way, you can load multiple resources with a link by modifying the href attribute of link, without causing the DOM structure to become bloated and affecting performance because of too many tags.
• Under IE, using Link+media, regardless of whether the downloaded content is parsed, IE will redraw the page once, this time redraw performance loss is very small, basically just into the redraw method, but did not really re-layout.
• The object tag must be connected to the DOM tree to load resources, and when using the OBJECT tag, you can set the width and height of the object tag to 0 in non-ie browsers, but IE does not. In IE, you can set the width height to 1 and use visibility: hidden; position: absolute; top: 0; z-index: -1000; the style to hide it. Of course, since IE will not initiate the request, it does not make sense to set ...

Conclusion?

Depending on the usage scenario, there is no one-of-a-kind best solution, but it can be summarized as follows:

• Load the same domain resource and use XMLHttpRequest.
• Load third-party trusted resources, like different systems within your company, and use an IFRAME to load non-HTML resources.
• Loading the picture resource, using IMG is the best way, but be aware that the IMG cannot be recycled by GC during the request process.
• For third-party untrusted resources, consider loading using Link+media, but it is not possible to determine the point in time when the load is complete.
• If you can judge the browser, using link Prefetch for Firefox, using the img tag for IE, other browsers using the script tag is a perfect solution.
• Never see, Link prefetch will be the trend, we give WHATWG advice, let him add onload bar.

Resources

• Mozilla Developer Center's link prefetching
• Link prefetching on Wikipedia
• Solve some of the ills of resource preloading with HTML5 Web Worker
• Franky's HTML5 Web Worker

[Go] pre-load resources research