Self-cultivation and front-end engineer of a junior front-end engineer

Self-cultivation and front-end engineer of a junior front-end engineer

　　Preface

Optimized! Optimization again!

As the bond of the entire web application, the tumbler connects user behavior and machine performance. The final significance of optimization is to strike an optimal balance between the two.

This is especially true for image resource loading. Let's talk about the image loading optimization methods that are common in project development.

　　Pre-Load

1. Mask Algorithm

We all know that window. onload is actually the callback completed by the DOMContentLoaded event, but it completes the construction of the DOM tree. Resources such as Css rendering and page images may not be downloaded. So if the page is displayed at this time, the page will be very ugly.

To solve this problem and improve user experience from the perspective of design and behavior, we can add beautiful masks to the page before the images and other important resources are completely downloaded, the loading prompt is displayed to inform the user that the resource is being loading. after the image is fully loaded, the mask and animation will be removed.

The specific implementation ideas are as follows:

After window. onload is called, the mask and the loading animation are displayed to prompt the user to be loading.

Download var IMG = new Image (); img. src = "xx.jpg" from the img element to be preloaded on the page"

After the image is downloaded, there will be an onload callback img. onload = function (){...}

Remove the loading animation and mask from this callback.

In this way, users can enjoy a smooth operation experience, and no longer have to worry about seeing the pictures that are being downloaded that are not completely ugly.

Our slogan is: either not to show you, or to show you the best Application Scenario: Please see the Picture Animation In the first screen, or the UI Designer you are connected to is extremely powerful ."

2. Big code

There is a slight difference between the code-based big method and the mask-based big method. The specific implementation ideas are as follows:

First, prepare two pre-loaded images. One is high definition and the other is low definition. For example, girl_hd is 60 kb. The other is girl, And the size is 6 kb.

The src address of the pre-loaded image tag on the html page is the low-definition address

Because low-definition images are small, they can be loaded soon.

Then download the HD Image var img = new Image (); img.src?#girl_hd.jpg"

After the image is downloaded, there will be an onload callback img. onload = function (){...}

The image label on the page is

Our slogan is: to see code-free HD, please first look at the code-less HD Application Scenario: please use it when "a large number of images appear on the first screen and the size is not small"

　　Lazy Loading

If you have carefully read the pre-loading ideas above, you must shoot bricks on my head: whether it is a large mask method or a large code method, this does not increase the project loading speed, the downloaded image does not have to be downloaded yet. Yes, lazy loading only changes the user's operation experience. In fact, the project loading speed has not improved. However, the lazy loading method has actually improved the project loading speed.

What is lazy loading? in one sentence, the image is loaded as needed.

Everyone must have brushed Weibo. Weibo's photo wall is the best example of lazy loading. There are not many photos displayed at the beginning. The photo wall will be stretched and new images will be loaded only when users pull down and pull to the bottom.

Operation logic:

Listen to scroll events of the scroll bar (of course, The touchmove event can also be used)

When an event is triggered, the current photo wall location is determined.

If the photo wall has been flushed to a critical position at the bottom

Js downloads the new Image, var img = new Image (); img. src = "xx.jpg"

After the download is complete, there is an onload callback img. onload = function (){...}

Insert the downloaded image to the page in the callback after the download is completed.

Of course, there are various lazy loading methods based on different projects. But the core is unchanged: When the page is initially loaded, only the minimum number of resources meeting the user's needs are loaded. taking the photo wall as an example, a user may have 500 photos in his microblog. If you load 500 photos when loading the page, the user will be stuck in an explosion (because the background is always in the image download status ). If only 20 images are initially loaded when the page is loaded, other images can be loaded as needed through your own operations (scroll down), which greatly improves the smoothness of project operation.

　　Conclusion

Although the implementation principles of pre-loading and lazy loading are very simple, the inspiration for me is indeed huge:

In addition to improving users' operation experience, the core of pre-loading lies in the fragmented loading of resources, that is, the pre-loading can actually appear in any time period, can I download two images without moving the mouse for a long time? Can I secretly download two images when a user does not perform a large number of operations? When a user is currently on a very streamlined login interface, can I secretly download the images on the pages that he successfully jumped? And so on.

The core of lazy loading is that the word "on demand" has been deeply rooted in my mind. In retrospect, many optimization methods focus on demand. Load Js on demand, load images on demand, etc.

First, we must ensure that the loading speed of the project is the first time, so that users can see the page and content in the shortest time.

Second, try to make sure that the current page is streamlined without meaningless loading. Only when the user really needs it can we present it to him.

Their advantages and disadvantages are:

Pre-load:

Advantage: If you have prefixed the image, you can open it in seconds when it is needed.

Disadvantage: downloading images may affect the project loading completion time and the smoothness of project operations.

Lazy loading:

Advantage: ensure that the projects loaded by users are the most streamlined and fastest, and the resources downloaded are the least.

Disadvantage: If user operations trigger lazy loading, you need to wait for the download time of the resource to be completed. Meanwhile, the Operation smoothness is reduced during the resource download period.

In the end, there is no silver bullet in project optimization. The efficiency of this Part may lead to inefficiency of the other part. Copying the optimization method of project A to Project B may be worthless. Therefore, what we can do is to deeply understand the principles of these technologies and to gain experience in the project. Only by profoundly understanding the advantages and disadvantages of these technologies, only by deeply understanding users' needs and behavioral habits can they be most suitable for specific projects and scenarios.