Use base64 to improve visual experience and base64 to improve Visual Effects

Use base64 to improve visual experience and base64 to improve Visual Effects

Recently, I am working on a small project. After I finish writing the front-end code, I will test it on the mobile phone. It's okay, but the page loading and rendering results are a little unpleasant, although it is a small project, I don't have to do this, but I can't help but want to do something when I watch the page flash.

Let's talk about the problem first:

The above is the homepage. In fact, the web side was not taken into account at the very beginning. This figure is intended for IOS and Android native apps. In order to develop two local apps, the above graph contains images except those subjects and the tabBar below.

Because they are all images, the layout is really simple, but the problem also arises. Several images are requested through the src attribute of the img tag, so when refreshing or redirecting, there will be obvious blank flashes.

Because each image has a request, there will be a waiting time in the queue, get the image and then render and draw it, this will cause a short blank flash in each image area of the page.

My solution is to use base64 to compare the network conditions of the two:

1. Comparison of request time 1. First loading without Cache

(Image retrieval by request)

(Convert the image to base64)

 

It can be seen that, when no cache is available for the first time, normal img requests will have a long queue time, that is, this waiting time causes blank flashing during page rendering.

After the image is converted to base64, although the size of html increases, the loading time is longer, but the overall loading time is shorter.

2. cache is available for the second and later times.

(Image retrieval by request)

(Convert the image to base64)

After caching, the time for both is greatly reduced. However, when a common img request is sent, the image still has a queue time, so the page still has a blank flash, although the flash time has become shorter.

When the image is converted to base64, there is almost no beating feeling. In addition, html is also obtained from the negotiated cache, so the time is greatly shortened.

2. Performance

I didn't specifically write a test page for loading many pages, but I still used this page for comparison.

The following are the conversion to base64 and the normal multi-request image:

(Convert the image to base64)

 

(Image retrieval by request)

 

 

It can be seen that after the image is converted to base64, the document takes longer, but it does not take more time to parse, render, and draw than to request a png image, in addition, I have collected page loading records multiple times, and the situations are the same each time.

Therefore, I have said on the Internet that the performance of browser parsing base64 is much worse than that of png, but with the upgrade, this part of performance may be improved. Of course, it may also be related to the small number of my test images.

In short, at least the pictures on your first screen won't change frequently and you don't need to go to the server to retrieve them. converting it to base64 should be a good note.

In addition, small icons like tabBar are not changed frequently and will be used on multiple pages. A better way is to make them iconfont, so that your iconfont style files can be cached, in addition, the page size can be reduced without converting public images to base64.