用户频繁执行分页功能场景下的前端优化

背景

技术栈：vue+element；

页面布局：某页面有一个表格组件，表格下有一个分页器。

现在用户会频繁点击分页器，执行分页操作，进行异步调用获得新的页面数据，进而控制用户表格组件短时间内频繁更新渲染，造成性能损耗和浪费。

解决方案

法一：防抖

思路：分页触发函数调用外部设计一个变量，保存延时器。分页操作时重设延时器。若用户时段内不操作，则延时器生效，执行分页请求以及响应内容更新渲染操作。

特点：易于想到，节省带宽，但用户体验会因为延时而下降。

法二：表格增加loading状态

思路：el-table增加loading字段，函数调用更新loading状态。

特点：扬汤止沸，仅仅是优化用户体验而已。

法三：利用时间戳判断

思路：分页触发函数外部设置时间戳变量，保存最新请求时间。每次调用触发函数内发起异步请求前均会刷新最新时间戳，请求结束后将函数内部的时间戳与外部时间戳比对，若小于，则说明不是最新请求，则不必进行渲染。原理是每次执行触发函数，js都会新建函数并执行，函数与函数之间相互独立，内部变量互不干扰。

特点：没有节省带宽，但优化渲染性能，并提升了用户体验。