Resource Loading Optimization

1. Controlling the Size of Image Resources

Developers should choose appropriate image sizes, formats, and compression ratios based on functional requirements and the actual display area size.

Large image sizes may lead to the following consequences:

• Increased image download time, resulting in delayed image display for users.
• Unnecessary consumption of data traffic for users.
• Impact on image decoding and rendering time, which may lead to dropped frames, stuttering, white screens, or even inability to scroll or switch pages normally (especially noticeable on low-end devices).
• Increased memory usage, especially with large images or a large number of images in long lists, leading to a sharp increase in memory consumption.

Impact of Images on Memory

If memory growth exceeds the limit, it can lead to white screens, black screens, or even crashes of the mini-program.

2. Avoid Overusing the widthFix/heightFix Mode of the Image Component

The widthFix/heightFix mode dynamically changes the height or width of the image after it has been loaded. Dynamic changes in the height or width of images may cause extensive layout reflows in the page, leading to page jitter and causing stuttering.

For background images or banner images on a page, it's preferable to specify the image dimensions in advance to avoid resizing the image after it has been loaded.