“这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战”

写在前面: 前段时间是在找工作,一直在寻找些线上面试,电话面试,然后碰到了很多有意思的面试题,有些知道解法,有些还不知道答案,记录一下.

事关我对于前端面试题的收集--第二弹

长列表数据解决方案之虚拟列表

长列表问题如何解决

• 懒加载->常见的无线滚动的，每次只渲染一部分（比如10条），等剩余部分滚到可见区域，就再渲染一部分。

  • 缺点:当翻了很多页之后,页面中有很多dom节点,用户上滑的体验不好

• 可视区域加载->只渲染可见部分，不可见部分不渲染。

  • 有点类似于js实现无缝轮播的效果,在可视区域显示数据,在非可视区域提取渲染好即将展示的内容,但无缝轮播的dom还会在,虚拟列表的dom会被替换更新掉

虚拟列表的实现

1. 把列表分为三个区域,上缓冲区,可视区,下缓冲区
2. 计算可视区域最多能展示多少项,并记录高度
3. 监听用户滚动事件/触摸事件,记录用户滚动的高度,以此来计算可视区域的起始索引和结束索引(如果不是整数则设置偏移量).
4. 创建一个函数,每当用户滚动时重新渲染可视区域的dom和偏移量,可以缩减到16ms执行一次
5. 函数执行会获取最新的数据生成dom结构去替换之前可视区域的dom列表.

设计模式之观察者模式

观察者模式

Vue插件发布流程

1. 封装一个高复用组件(一定要设置name)

2. 创建文件夹把组件放进去并创建入口文件index.js

3. 创建install方法并把它暴露出去, 方法里面实现环境判断以及组件全局注册.

4. package.json设置打包命令压缩打包,然后设置插件信息(备注,协议,main文件路径,是否私有)

5. npm login 登录 -- npm publish 发布插件

Vue的性能优化

• 函数式组件,正常组件有template模板,有生命周期函数等等,在虚拟dom里会被递归,但函数式组件就是正常的真实dom,没有多余的东西,所以提示js渲染性能,在vue3中不推荐使用.

• 缓存组件,被keep-alive包裹的组件不会因为切换路由而销毁实例和数据.

• 非响应式数据,对于不需要响应式的对象或数组,进行手动标识(Object.freeze)不需要响应式,vue3里面已经实现

• 异步组件(component：() => import('./component/helloworld'))如dialog框表单.

单页面应用首屏优化

• 路由懒加载

• 插件按需加载或cdn引入

• 模块按需加载

• 骨架屏

• webpack压缩代码gzip

• 首屏添加缓存