简单的登录流程
说起登录token是不可缺失的,token可以看成古代进城时的令牌;在首次登录的时候,后端就已经帮我们处理好token并返回,前端只需要存储在cookie即可,然后每次都通过请求头的形式携带cookie发送给后端,如果后端对比,发现cookie已经过期,此时会返回对应的状态码,例如401,前端就可以通过状态码去重定向到登录页面即可;
当然token也可以存储的localstorage,看业务场景吧,我碰到的都是存放在cookie里面的
简单描述页面的优化(假设后端返回一万条数据?)
通常情况有懒加载和虚拟列表的形式去做数据优化,具体如何实现?
懒加载:假设一屏展示10条,先展示第一屏数据,用户滑动的时候展示第二屏,然后第三屏,可以理解为分页
虚拟列表:这种实现方式涉及到DOM的计算,比如说页面只有10个DOM元素,在滚动过程中,永远都是走10DOM元素,不会跟随滚动越来越长,这样的话,数据需要在滚动过程中计算什么展示新的10条数据
比较它们两者之间的区别:
懒加载实现起来比较简单,我们只需要在底部放一个组件,检查它是否完全在可视区域内,然后加载新的列表
缺点:如果数据真的很大,会出现性能问题(比如1万条数据)
虚拟列表:
优点:DOM可控的
缺点:技术上需要让那些DOM都展示出来,如果我们不知道每一项高度的情况下,高度可变的情况下,工程变得很复杂。
工作中是如何使用它们的:
懒加载:像移动端组件库里面的VantUI,还有list,antd-mobile的话有个叫做infinite-scroll,优先使用集成的东西, 不满足需求的情况下,再去研究框架的源码,自己封装
虚拟列表:Vue里面有Vueuse的usevivtullist,react的hooks也有,像react比较热门的有react-window和react-virtualized,这两个是比较热门的虚拟滚动库。 它们提供了多种可复用的组件,用于展示列表、网格和表格数据。 如果你想要一些针对你的应用做定制优化,你也可以创建你自己的虚拟滚动组件就像Twitter 所做的