面试题速刷 - 实战会碰到的一些问题

1. 页面如何进行首屏优化？

• 路由懒加载
  
• 服务端渲染SSR
  
  只获取HTML就可以，里面包含data。
• APP预取（啥东西）
  
  APP结合H5、结合JS bridge
• 分页
  
• 图片懒加载 lazyload
  
• Hybrid
  
  总结：
  

2. 后端一次性返回10w条数据，你会如何渲染？
   本身后端设计方案的设计就不合理！非要的话......

• 自定义中间层：
  
• 虚拟列表：很复杂，借助第三方lib。快速滚动会频繁创建、频繁销毁DOM。
  
  
  

3. 前端常用的设计模式并说明使用场景？
   优秀的程序员并需要了解设计模式！好。

• 设计原则：组件结构、API、数据结构...
  开放封闭原则，对扩展开放（可扩展新功能的，），对修改封闭（对现有功能保持原子性不要动了）。
• 工厂模式
  
  在工厂函数内部写逻辑。
• 单例模式 一个类只能有一个实例。
  
  
  
• 代理模式
  
  
• 观察者模式
  
• 发布订阅：自定义事件
  
  
• 装饰器模式 @testable 在不改变自身对象的基础上，在程序运行期间给对象动态地添加方法。了解一下nest.js
  

4. 观察者模式和发布订阅模式的区别？
   
   观察者模式的 Subject和Observer不需要中间媒介。如addEventListner
   发布订阅模式Publisher和Observer互不认识，需要中间媒介。如EvenBus自定义事件。

5. ❗实际工作中对Vue做过哪些优化？

• v-if和v-show
  
• v-for使用key（其实一定要用）
  
• computed
  缓存未读消息列表
  
• keep-alive缓存组件
  
• 异步组件：import引入体积比较大的组件
  defineAsyncComponent
  
  
• 路由懒加载；项目比较大的情况下拆分路由，保证首页先加载。
  
• 服务端SSR
  可使用Nuxt.js; 按需优化，使用SSR成本比较高。
  重点：性能优化要按需进行，不要为了优化而优化。

6. 使用Vue的过程遇到哪些坑？

• 内存泄漏
  组件内的全局变量、全局事件、全局定时器、自定义事件绑定之后没有及时销毁导致。

• Vue2响应式的缺陷（Vue3解决了）
  
  ☝无法直接修改数组。push pop是ok的但是直接arr[index]修改不了。

• 路由切换时 scroll 到顶部
  
  问题：比如某个新闻列表页，一开始是第一页内容，往上滑就加载第二页，再往上滑加载第三页。点进一条新闻详情页面，SPA页面其实是路由的切换，此时左边的的列表页已经销毁了。当从详情页返回到刚才的列表页时，列表页又会重新刷新渲染第一页，第二页，第三页...
  
  解决办法： 缓存下来
  

7. 如何统一监听Vue组件报错？

• window.onerror (JS)
  
  在App.vue中，mounted内写。但是try catch捕获的错误不会上报给window.onerror。、
  

• errorCaptured生命周期
  vm：组件信息
  
  

• errorHandler：在main.js中进行配置,一旦监听到错误会阻止向window.onerror传播。
  
  还有warnHandler(警告)

-异步错误：Vue自己监听不了。
总结：

• 如果一个H5很慢，如何排查性能问题？（面sf被问到过类似的）
  访问慢？操作慢？
  首先我们要知道前端性能指标👇❗
  First Paint(FP) 第一次渲染
  First Contentful Paint(FCP) 第一次有内容的渲染
  First Meaningful Paint(FMP)已弃用 改用LCP
  Largsest Contentful Paint(LCP)
  DomCotentLoaded(DCL)
  Load(L)
  
  👏有用的工具：1. Chrome devTool 2. lighthouse
  1. Chrome devTool
  
  2. lighthouse 谷歌浏览器已经自带了？
  加载慢的对策：
  
  渲染慢的对策：
  
  持续跟进：
  
  总结：