background

Recently, the project has been deployed to the customer’s environment, and the customer is also conducting functional tests in various aspects. When testing a page, a problem was found:

  • The business goes like this: Entering the terminal Settings page requires setting up various aspects of the channel. There are channel number modification, channel sorting.
  • Since there is a lot of channel data here (>1000), the implementation is to load it all at once. Resulting in browser rendering, there will be a long rendering time problem, poor experience!
  • The second problem becomes more serious when the page data is reloaded each time the data is changed.

The solution

The page scrolls indefinitely.

  • There are many schemes for infinite scrolling:
    • One is to load the first page for the first time, then gradually load the second, third, and so on as you scroll down until all the data is loaded.
    • The second method is to load the first page for the first time, gradually load the second page as you scroll down, and delete the data on the first page when you load the third page, so that each time the user sees a fixed amount of data.
  • Because of requirements, the data on the page needs to be refreshed every time a change is made, so the first solution must be discarded in favor of the second.

Implementation approach

  • The home page gets data directly from the server and caches this data.
  • Then, every time you scroll the page to the point where data needs to be loaded, the next or previous page’s data is directly extracted from the cache and loaded into the page data.
  • The flow chart