# Resource loading optimization

# 1. Control the size of image resources

Developers should be based on functional needs and the actual size of the display area, select the appropriate image size, image format and compression ratio.

The image size is too large, which may lead to the following consequences

• Increased image download time, resulting in delays in users seeing images
• Unnecessary traffic consumption for users
• The time it takes to decode and draw the picture may be more likely to cause frame drops, stuttering, or white screens, or even failure to scroll and switch pages properly (especially on low-end devices).
• Memory footprint growth, especially large images and a large number of images in a long list can cause memory footprint to rise dramatically.

The effect of pictures on memory

iOS When the system memory is tight, it will actively reclaim some of it WebView。Large images and a large number of images in a long list can easily cause the system to WebView The recovery of the Mini Program will lead to a white screen, which will trigger WeChat to force the closure of the Mini Program in severe cases.

If the memory growth exceeds the limit, it will also cause the Mini Program to appear white or black screen, and even the entire Mini Program to flash back.

# 2. Avoid abuse image Component widthFix/heightFix Pattern

widthFix/heightFix Mode will dynamically change the height or width of the image after the image is loaded. Dynamic changes in the height or width of an image can cause extensive rearrangement of the layout of the page, causing the page to wobble and cause stuttering.

For the background image of the page or Banner Figure, should try to specify the size of the picture in advance, to avoid the picture loaded after the completion of the second size adjustment.