Objective of this paper: to discuss the optimization scheme of record rolling loading

This article does not discuss the implementation and principle of pull-up loading, there are many such wheels. For any implementation of scroll loading, the following points are unavoidable:

  1. Listen for rolling events and set critical points
  2. When scrolling reaches a critical point, a load event is triggered and data is retrieved asynchronously
  3. DOM render data

It is not difficult to find that in the process of fast sliding causing lag, the scrolling is too fast, the time interval between triggering loading events and sliding to the bottom is too short, and the data has to be loaded. The reason for slow content rendering may be that the speed of the interface itself in the second step affects the subsequent DOM rendering speed. Dom rendering is already very good in normal browsers, except that it may flash when the content contains most of the images (such as e-commerce sites), which concludes the data preloading scheme. This solution is not a perfect solution to various loading problems, but can further optimize the loading experience in some business environments.

Data preloading, scroll rendering scheme

Scheme main idea: request data in advance, scroll to trigger DOM rendering. When the load event is triggered, the time for requesting data is saved and the data is directly rendered from the object.

Conditional constraints:

  1. The end point of preloading needs to be processed based on actual services.
  2. The loading event is triggered quickly, causing the preloading data to be incomplete. Unable to load (optimization method not yet thought of)

Code logic: after loading the first page of data, trigger callback and recursive callback, continuously forward loading data, must set the end point or intermediate rest point (did not think of a good name), and when the rolling load event triggered, from the loaded data to take out data and render, can save the page of data request time. A request can be tens of kilobytes without causing traffic problems.

document.addEventListener('scroll'.function (e) {
      let scrollHeight = document.body.scrollHeight
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if(scrollHeight - scrollTop < 2000) {// Trigger the scroll conditionif (_this.lock) return/ / lockif (_this.preLoadList.length === 0) return_this.getDataFrompre ()}});Copy the code

This scheme is not a perfect one, but it can solve some scenarios that require extreme loading speed. Change the implementation of the front end to optimize the loading speed when the back end is not required.