前端面试题汇总

前端基础

数组方法

跳转到 /frontend/jsarray/

事件循环

宏任务和微任务

• 宏任务是相对较大的任务，在每次事件循环中依次执行。

  • 定时器
  • I/O
  • 用户交互
  • 渲染
  • 请求动画帧

• 微任务是相对较小的任务，在当前宏任务执行完毕后立即执行，不会加入事件队列。所以微任务优先级较高。

  • Promise 中 resolve 和 reject 回调
  • Promise.then 回调
  • MutationObserver 回调（当 DOM 变化会触发的回调）
  • async/await 函数的后续操作

Vue

reactive 的局限性

• 只能用于集合类型：数组、对象、Map、Set

• 对解构不友好，会丢失响应式。

• 不能整体赋值，会丢失响应式。

Vue3 中移除了 Vue2 的哪些 API

• v-on 不支持 keycode 作为修饰符
• 实例方法 $on, $off, $once, $destory 移除，实例属性 $children。
• 不再支持过滤器，可以使用计算属性或方法代替。

组件间通信

• 本质：单项数据流

• 父向子使用 props 传数据，子向父使用 emit 调用方法。

• 子孙祖先间传值：

  • 使用 props 和 emit 逐层透传，效率低，维护成本高。
  • 使用状态库：Vuex 或 Pinia。
  • 使用 event bus，适合简单场景。项目复杂了难以溯源，不易维护。
  • Vue 3 中使用 provide 和 inject。
  • 使用 Teleport：不易维护。

页面级权限控制

• 静态路由控制
  • 使用 beforeEach 导航守卫来检查权限，没有权限则重定向到错误页面或登录页面，有权限则 next()。
• 动态路由控制
  • 静态定义基础路由：登录页面和错误信息页面等
  • 从后端获取权限，使用 addRoute 动态生成路由表

组件级权限控制

• 使用 v-if

适用于少数组件需要进行权限控制且权限单一的场景。

• 使用自定义指令

  • 权限信息存在状态库中。
  • 定义一个自定义指令 v-permission 来处理权限。

webpack

优化项

• 代码压缩 terser-webpack-plugin
• 代码分割 optimization.splitChunks
• 摇树优化 optimization.usedExports
• 构建优化：
  • 并行构建 thread-loader, happypack
  • 缓存 babel-loader
• 预加载懒加载：使用懒加载来按需加载非关键资源，使用预加载提前加载关键资源。
• 优化图片资源 url-loader, file-loader
• 提取 CSS 代码 MiniCssExtraPlugin

跨域

• 服务端配置 Access-Control-Allow-xxx Headers

Access-Control-Allow-Origin

Access-Control-Allow-Methods

Access-Control-Allow-Headers

Access-Control-Allow-Credentials

• JSONP：动态获取一段 JS 然后放在 script 标签中加载，本质上是 script 标签支持跨域。

• 使用代理服务器，通常开发过程中使用。本质是因为服务端不看跨域。