前端场景题笔记

学习视频链接：2024最新前端面试题/大厂真实面试场景，花3天刷完，面试通过率95%+知识量包含（Vue、React、CSS、工程化、JavaScript、ES6、Node）_哔哩哔哩_bilibili

一、应对方法

• 交代背景
• 调研方案（多个）
• 方案落地
• 反思，追求更优解

二、水印

• 背景：保密项目背景写上姓名、工号水印，防止员工随意截图发出。
• 方案：svg、canvas绘制水印，使用css背景图方式贴到body上。
• 反思：简单的水印用svg，复杂的或性能更好的用canvas。

css设置背景图

由于水印图片的内容是动态生成的，例如名字、工号之类的，所以需要使用svg、canvas

• svg绘制背景图

• canvas绘制背景图

三、静态资源加载失败的场景做降级处理

• 背景：常见静态资源加载失败场景：

  1. 图片
  2. css文件
  3. js文件
  4. CDN
  5. 字体文件
  6. 服务端渲染失败

• 方案：

  1. 图片：

     • 设置占位图，设置alt属性描述图片
     • 重试机制（404、无权限）
     • 上报

  2. css文件：

     • 关键性样式使用内联的方式
     • 加载备用样式
     • 上报

  3. js文件：

     • 内联脚本
     • 加载备用脚本
     • 上报

  4. CDN:

     • 使用本地备份
     • 动态切换到另一个CDN

  5. 字体：

     • 使用降级字体，系统自带：apple、微软雅黑
     • webfont处理字体

  6. 服务端

     • 降级的html用作渲染
     • 切换为客户端渲染

• 图片；占位图实现

• css文件：加载备用样式

• js文件：加载备用脚本

• CDN：切换到本地备份或另一个CDN

• 字体：

四、解决页面请求接口大规模并发问题

• 背景：

• 方案：

  1. 请求队列，大数据请求场景下
  2. 防抖、节流，用户交互层面上减少请求
  3. 分页加载，可视区绘制

• 反思：

• 请求队列

• 防抖

五、大文件上传

六、跨页面通信方式

七、axios如何区分浏览器环境还是node环境

八、SPA⾸屏加载速度慢的怎么解决

九、v-for和v-if的优先级

• 在vue2中，v-for的优先级更高，会对所有数据进行遍历和渲染，v-for的条件为false时，会重新销毁，会导致⼀些不必要的性能消耗。当v-for的数据项发生变化时，vue会使用具有相同key的元素，此时v-if的条件可能会影响之前的元素，导致⼀些不符合预期的⾏为。
• 在vue3中，v-if的优先级更高。
• 但都不推荐在同一个元素上使用，可能会有性能问题。