preface

Since my graduation in 2018, I have been mainly engaged in THE development of H5 in two large companies, during which I have participated in the development of H5 in many large-scale activities. During the activity, more attention should be paid to the stability and disaster recovery scheme of the page. It is indeed a challenge to ensure the stability of the page under the condition of limited resources in the face of large traffic peaks. This article mainly shares some of my development experience, and welcome to point out if there is anything wrong in the article.

practice

First of all, most h5 participants are based on Vue technology stack and adopt front-end rendering, which is mainly displayed in APP. The following figure shows some of the work done at each stage of the page life cycle to ensure page stability and improve the performance experience.

The stability of

Stability mainly includes page stability, CDN stability and interface stability.

1. Cache Cache is the most effective way to deal with heavy traffic. Cache mainly includes browser strong cache and APP offline package cache, but browser strong cache does not exist for first access.

2. During interface disassembly, if the QPS on the page is high, the back-end service cannot be supported. Therefore, you need to disintegrate the back-end interface. Interface fragmentation is mainly to splicing the fragmentation time parameters on the page URL. After the front-end obtains the fragmentation time, it randomly requests the interface within the fragmentation time. During the fragmentation, the page displays the loading dynamic effect or skeleton screen (embedded in the HTML template). The disassembly time should not be too long, which may affect user experience.

3. Image loading queue

Front-end pages contain a lot of static resource files, such as JS, CSS, images, etc. Static resource files can be cached to reduce THE CDN QPS, but some images on the page may be dynamically delivered by the back-end and cannot be cached, so it is a great challenge for CDN. Based on this situation we refer toasyncPoolThe image loading queue is implemented to reduce the QPS of image requests and ensure the stability of CDN.Solution: Maintain the image loading pool and the image loading queue of a certain length. Judge the length of the loading queue every time a new image is requested. If the loading queue is not full, the image will be pushed into the loading queue for loading; otherwise, the image will be put into the image loading pool and wait for the release of the loading queue; If the images in the loading queue are loaded, the first image in the loading pool will be automatically taken and the loading queue will be loaded until all images are loaded.

4.CDN Static resources on the retry page are stored in CDN, such as JS and CSS. If the CDN fails, loading JS and CSS fails and a major fault occurs on the page. Therefore, when static resource loading fails, you need to switch the CDN domain name to request again to ensure resource availability. In addition, it is better to report logs when resources fail to be loaded to ensure timely discovery of CDN faults.

Performance experience

1. Dynamic loading Some non-major JS libraries on the JS page can be dynamically loaded by CDN without using NPM package mode to reduce the JS package volume of the page and prevent the long JS execution time from blocking the page rendering. Note, however, that you need to use proxy mode to access library properties or methods before the library is loaded.

2. Image loading Optimization The image returned from the back end of the page is generally large in size, which will lead to slow image loading and affect the user experience when it is loaded for the first time or the network is poor. Therefore, we can cut and compress the image.

  • Picture clipping: make use of the picture clipping service provided by CDN supplier and pictures with appropriate pixel ratio to load, optimize picture size without affecting picture display effect, speed up picture loading and save picture flow.
  • Compress pictures according to network: According to the user’s current network type, the image compression service provided by CDN provider is used to compress pictures to different degrees before loading, optimize the size of pictures and reduce the loading time of pictures.

In general, the front-end rendering page can be displayed normally only after the interface returns. In order to prevent page flickering, we can add loading dynamic effect in the template and hide loading display page after the interface returns to enhance the experience.

4. Popover queue pages generally have many popovers for the purpose of flow diversion. Each popover appears at a different time, which is prone to the phenomenon of popover superposition and poor user experience, so a popover queue is implemented to manage popovers and ensure that there is only one popover on the page at one time. Solution: Each time a new popover window is opened, first judge whether the current page has a popover, if not, directly display the new popover; If so, the new popover will be added to the popover queue, and the next popover in the queue will be displayed after the current popover closes, until all popovers in the queue are displayed. The popover queue is also convenient to reuse the basic functions of popover, such as popover opening gradual effect and closing function.

conclusion

This article mainly to share some of their own daily development experience summary, the follow-up will add some sample code for your reference.