Self-cultivation of a junior front-end engineer

　Foreword

Optimization! Another optimization!

Cutting pictures serve as the link between the entire web application, connecting user behavior and machine performance. The ultimate meaning of optimization is to achieve the best balance between the two.

This is especially true for the loading of image resources. Today we will briefly talk about common image loading optimization methods in project development.

　Preload

1. Masking method

We all know that window.onload is actually the callback completed by the DOMContentLoaded event, which only completes the construction of the DOM tree. The downloading of resources such as CSS rendering and in-page images may not necessarily be completed. So if you render the page at this time, the page will be very ugly.

In order to solve this problem and improve the user experience from the perspective of design and behavior, we can add a more beautiful mask to the page before important resources such as images are completely downloaded, and a loading prompt will pop up to inform the user that the resource is loading. .Wait until the image is completely loaded before removing the mask and loading the animation.

The specific implementation ideas are as follows:

After window.onload is called, the mask will pop up first and the loading animation will be used to remind the user that loading is in progress

Download the IMG elements that need to be preloaded in the page var img = new Image(); img.src="xx.jpg"

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

Remove the loading animation and mask in this callback

This will provide users with a smooth and silky operating experience, and they no longer have to worry about users seeing those ugly pictures being downloaded that are not fully displayed.

Our slogan is: Either we won’t show it to you, or we’ll show you the best application scenario: Please use the situation where “there is an animation of the picture on the first screen, or the UI designer you are connecting with is extremely powerful” Use below

2. Coded Dafa

There are slight differences between the coding method and the masking method. The specific implementation ideas are as follows:

First prepare two pictures you need to preload, one is high-definition and the other is low-definition. For example, the size of girl_hd is 60kb. The other picture is girl, the size is 6kb.

The src address of the image tag that needs to be preloaded in the html page is a low-definition address

Because the low-resolution images are very small, they can be loaded quickly.

After window.onload is called, obtain the src (girl.jpg) of the img that needs high-definition replacement on the page, and use the src as a basis to splice the string ('_hd.jpg') to obtain the address of the high-definition image (girl_hd.jpg). Then download the high-definition image with var img = new Image(); img.src="girl_hd.jpg"

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

Replace the src of img in the page in the callback, so the image tag on the page is now

Our slogan is: If you want to watch uncensored high-definition, please look at the coded low-definition application scenario first: Please use it when "a large number of pictures appear on the first screen, and the size is not small"

　Lazy loading

If you carefully read the above preloading idea, you must slap me on the head: Whether it is the masking method or the coding method, this does not improve the loading speed of the project. In the end, the pictures that should be downloaded are still It doesn't have to be downloaded. Yes, lazy loading only changes the user's operating experience. In fact, the loading speed of the project does not increase. However, what we are talking about now is lazy loading, which actually improves the loading speed of the project.

What is lazy loading? To explain it in one sentence, it means loading images on demand.

Everyone must have visited Weibo. Weibo’s photo wall is the best example of lazy loading. There are not many photos displayed at the beginning. Only when the user pulls down to the bottom position will the photo wall be stretched and new pictures will be loaded.

Operation ideas:

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

Every time the event is triggered, determine the location of the current photo wall

If the photo wall has been brushed to a critical point at the bottom

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

There is an onload callback after the download is completed img.onload = function(){…}

Insert the downloaded image into the page in the download completion callback

Of course, there are various lazy loading methods depending on the project. But the core remains the same: that is, when the page is initially loaded, only the minimum number of resources that meet the user's needs are loaded. Take the photo wall as an example. There may be 500 photos in the user's Weibo. If you load them when the page loads, 500 pictures, the user will be stuck until it explodes (because the background is always in the picture downloading state). If only 20 pictures are initially loaded when the page is loaded, and other pictures are loaded on demand through the user's own operations (scrolling down), it will greatly improve the smoothness of the project.

　Conclusion

Although the implementation principles of preloading and lazy loading are very simple, the inspiration given to me is indeed huge:

In addition to improving the user’s operating experience, the deep-seated core of preloading actually lies in: fragmented loading of resources, that is, preloading can actually appear at any time period. When the user’s mouse has not moved for a long time, I Can I secretly download two pictures? Can I secretly download two pictures when the user is not performing a lot of calculations? When the user is currently on a very streamlined login interface, can I secretly download a few pictures of the page to which he successfully logged in? Wait wait wait

The deep-seated core of lazy loading is: on-demand. The word on-demand has been deeply ingrained in my mind. Looking back now, many, many optimization methods revolve around on-demand. Load Js on demand, load images on demand, etc.

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

Secondly, try to keep the current page as streamlined as possible and avoid meaningless loading. We only show it to users when they really need it.

The advantages and disadvantages of each are:

Preload:

Advantages: If you download the picture in advance, you can open it instantly when the picture is needed.

Disadvantages: Downloading images will affect the loading completion time of the project and the smoothness of the project's operation

Lazy loading lies in:

Advantages: Ensure that the projects loaded by users are the most streamlined and fastest, and the resources downloaded are the least

Disadvantages: If the user's operation triggers lazy loading, then you need to wait for the resource download to complete. At the same time, during the resource download, the operation fluency is reduced

In the final analysis, there is no silver bullet in project optimization. The efficiency of one part may lead to the inefficiency of another part. Copying the optimization methods from project A to project B may be worthless. Therefore, what we can do is to deeply understand the principles of these technologies and absorb experience in the project. Only by deeply understanding the advantages and disadvantages of each technology, and only by deeply understanding the needs and behavioral habits of users, can we Carry out the most suitable processing for specific projects and specific scenarios.