Web picture resource loading and rendering timing notes

The workflow of the browser does not say, there is a lot of information on the Internet.

1. First, not all of the pages in the tag picture and the style sheet background picture will be loaded

2. When a Display:none attribute is set for an element (this element is or other elements with a background graph), the picture is not rendered, but it is loaded.

3. The child element of the element that has the Display:none attribute set, the background picture in the style sheet is neither rendered nor loaded, and the picture of the tag is not rendered but is loaded.

4. Repeat the picture, the browser only load once (familiar with the browser features of the people know that the browser when requesting resources, will first determine whether there is a cache, if there is a cache and the cache has not expired, will read from the cache resources, not re-request).

5. The background image of the element that does not exist is not loaded.

6. The background image of the pseudo-class will not be loaded, only the background image on the pseudo-class style will be loaded when the pseudo-class is triggered.

Application :

First, the floor plan, when using the style sheet background image as a placeholder, you want to convert the background image to base64 format. This is because the background image is loaded in the order behind the tag, the background image may be loaded after the tag picture has been loaded, not to the desired effect.

Second, pre-loading

1. If the small icon, can be combined into a sprite chart.

2. Add the images that need to be preloaded to the element background or tags that have the Display:none attribute set.

3. Create an IMG object in JavaScript and set the image URL to the src attribute of the IMG object.

Web picture resource loading and rendering timing notes