html5 - I encountered a problem with caching data during the front-end interview. I came to the forum to ask for advice.

Question

During the interview today, the interviewer asked me if a page calls an interface in the background to get an array consisting of 100 objects. Ten of these objects are used to generate some components for a page. The page number can be switched and displayed. If the user clicks on an item to view detailed information and then returns to the directory location, or refreshes the page in the directory location, what technology should be used? Reduce the number of calls to the background interface. It can be considered that this set of data is generated by similar conditional filtering. Refreshing or returning the data obtained when the conditions remain unchanged are the same. Please give me some advice

Answer 1

I don’t quite understand what you mean. Do you mean to make fake paging?

Answer 2

• That is, the front-end configures the query parameters, and the back-end returns the corresponding data based on the query parameters

• You only need to save the query parameters and the queried data locally

• Before each request, check whether the query parameters are consistent with those saved locally

  • If the query parameters are the same, use local data

  • If the query parameters are inconsistent, please request again

• If you need deeper optimization, you need to split the interface.

Answer 3

Front-end paging (just fake paging

// 100 条数据的原数组
const dataArr

// 页面偏移量及每页尺寸
let offset, size
// 最终显示在页面的数据
let displayArr = dataArr.slice(offset, offset + size)