html5 – Während des Front-End-Interviews bin ich auf ein Problem mit der Datenspeicherung gestoßen, als ich um Rat gefragt habe.

Question

Während des heutigen Interviews fragte mich der Interviewer, ob eine Seite im Hintergrund eine Schnittstelle aufruft, um ein Array bestehend aus 100 Objekten zu erhalten. Zehn dieser Objekte werden zum Generieren einiger Komponenten für eine Seite verwendet. Die Seitennummer kann geändert und angezeigt werden, wenn der Benutzer auf ein Element klickt, um detaillierte Informationen anzuzeigen, und dann zum Verzeichnisspeicherort zurückkehrt oder die Seite im Verzeichnisspeicherort aktualisiert Welche Technologie sollte verwendet werden? Reduzieren Sie die Anzahl der Aufrufe der Hintergrundschnittstelle. Es kann davon ausgegangen werden, dass dieser Datensatz durch eine ähnliche bedingte Filterung generiert wird. Wenn die Bedingungen unverändert bleiben, geben Sie mir bitte einige Ratschläge

Answer 1

不大明白你的意思，是说要做个假分页吗

Answer 2

• 也就是前端配置好查询参数，后端根据查询参数返回对应的数据

• 只需要将查询参数以及查询到的数据保存在本地

• 每次请求之前都判断查询参数是否和本地保存的一致

  • 查询参数一致，就用本地数据

  • 查询参数不一致，就重新请求

• 如果需要更深层次的优化，就需要拆分接口了。

Answer 3

前端分页（就是假分页呗

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

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