This article is excerpted from Rax website rax.js.org

Performance and experience is the core competitiveness of the front end, is the most intuitive response to whether the page is easy to use, easy to use standards. The time users spend on the page should not be waiting for the page to load and respond, but time to use and browse smoothly. Therefore, how to improve the performance and experience of the page, make the page interactive faster, browse and scroll more smoothly, needs your continuous research, optimization and promotion. As Rax continues to evolve and mature, a number of performance practices and best practices have been developed that can help you dramatically improve the performance of your pages.

Image optimization

Pictures occupy most of the space of the web page, especially for e-commerce business, commodity pictures occupy more than 90% of the space of the page. Therefore, optimizing pictures and reducing image volume can significantly reduce bandwidth and improve page loading performance.

Image optimization is the result of the game between technology and vision, which requires you to optimize as much as possible to reduce image bandwidth and improve page loading performance under the premise of ensuring user visual experience within the acceptable range of visual reduction and clarity.

1. Load as required

For image loading on demand, Rax provides image components that you can choose to use.

  • rax-pictureThe configurationlazyload=trueTo open. This lazy load configuration only works with Rax Web.
  • Rax-recyleview as your scrolling container will have a lazy loading mechanism of its own and only render visible areas.

2. Load the appropriate images

The so-called appropriate picture, according to different environmental scene to choose the best picture display, such as screen resolution and network environment.

According to the resolution and network environment, we provide the automatic component RAX-Picture, which can easily set different sizes of pictures according to different resolutions, identify network environment at the same time, and increase quality control. For Weex, the client image library will also automatically help you process.

Resource preloading

After entering the wireless era, limited by the network environment, there are still many difficulties and bottlenecks, especially in the weak network environment, such as 2G/3G low network speed, will greatly slow down the loading of page resources, resulting in slow page opening, or even can not open, the user experience is very bad. Therefore, resource caching, reducing network requests, avoiding the impact of network environment on pages, is an effective improvement scheme at present.

Data preloading

Data Prefetch is used to advance the Data that needs to be requested in the page and run in parallel with page rendering, which greatly reduces the waiting time for users to see the page effect Data and improves user experience. The general idea is as follows:

Use the routing container and WebView container startup/initialization time to get asynchronous data, and when the page actually needs data to render directly through JsBridge to get the required data for rendering. Final time saved = container routing time (find which container to render) + container startup time + container initialization time + page frame rendering time

Reduce the bundle size

The size of JS Bundle directly affects the JS execution time under Android. For every 1K increase in code volume, the pure rendering time increases by 1-2ms. Rendering performance is strongly correlated with code volume under Android. You can use the WebPack bundle analysis tool to see the size distribution of each resource, and you can use Webpack’s Tree Shaking to shake out some zombie code. You can also use lazy resource loading to delay loading resources, so that the first screen can be displayed more quickly.

Performance optimization is something you need to keep your eye on, but it is the quantitative accumulation of various small optimizations that makes the final qualitative change.