前端二面项目面试准备1. 通过对webpack进行配置优化，提升项目构建速度和减少项目打包体积，提高开发效率，提升页面加

0.通过并行构建、并行压缩、缩小范围、启用缓存等方法，webpack构建速度提升 80%。

1. 通过对webpack进行配置优化，提升项目构建速度和减少项目打包体积，提高开发效率，提升页面加载体验。

2.大数据上传，通过Blob 大文件切片上传，async-pool 实现请求并发限制

asnyc-pool是一个库，用来实现并发控制。参数

表示限制的并发数
表示任务数组
迭代函数

3.统一封装Axios通用请求，实现公用参数携带、请求响应拦截、全局loading自动化配置、统一文件下载处理等功能

公用参数携带利用axios.creact()实现一个axios实例，里面可以配置一些变量
全局loading自动化配置：根据自定义变量loading变量入参来判断是否设置全局loading。设一个变量a=0,请求拦截时a+1，弹出全局loading，响应拦截时，如果loading存在，a-1,就消失loading
统一文件下载处理：如果请求状态码不为200的时候，报错，如果成功则利用Blob下载文档流的方式封装下载方法。大概步骤为使用new Blob(返回的二进制流)使用creactObjectURL转换成a标签的href，然后利用a标签下载。

4.设计并实现前端权限管理方案，实现登录权限、页面权限和内容权限的控制，可以更加细粒度对页面进行管理

菜单权限：

后台返回菜单路由信息，前端去动态路由里面匹配，从里面过滤可以访问的路由，然后在添加到动态路由实例里面
路由直接配置到后台，在登陆项目里面先登录拿到菜单，在main项目里面调用router包的方法，生成路由
如果存在跳转到某个错误页，可以根据判断生成一个路由实例去重定向到某个固定页面（登录权限）

内容/按钮权限：

根据后端返回的权限编码展示

5.通过减小入口文件体积、静态资源本地缓存和图片资源的压缩等方案，实现首屏 FCP 从 5s 减少到 1.5s

减小入口文件体积：通过cdn引入静态资源路由懒加载vue:import+箭头函数 React:React.Lazy
静态资源本地缓存

图片.png

图片资源的压缩

6.通过选择合适图片格式、图片懒加载和预加载方案，提升多图页面加载速度，

图片优化：进行图片压缩/缩放和选择正确的图片格式。
网络传输优化：使用 HTTP/2 和 CDN 服务。
使用 HTTP/1.X 协议时，浏览器有同源最大并发连接数的限制，且 HTTP/1.X 不支持多路复用，因此一个多图站点想要获得较完整的视觉呈现，会有一定程度的延迟：所有的资源请求（包括图片资源）会进入先进先出（FIFO）队列等待被下载。
使用 HTTP/2 前的常见优化方案包括：
- 使用精灵图 / 雪碧图，减少 HTTP 请求数。
- 10kb 大小以内的图片资源使用 base64 编码，减少 HTTP 请求数。
- 通过使用多个域名，开启多个 TCP 连接，突破浏览器同源最大并发连接数的限制。
由于 HTTP/2 支持多路复用，因此使用 HTTP/2 可以进一步减少网络延迟，更加快速的加载图片资源。
图片加载策略优化：按需使用懒加载、预加载，响应式图片加载等策略。
- 图片懒加载：
  - 使用 img 标签的 loading 属性。
  - 使用 Intersection Observer API。
  - 使用 scroll、resize 和 orientationchange 事件。
- 预加载：
  - link：<link rel="preload"> 允许开发者在 HTML 的 head 标签中声明资源请求，指定页面需要预加载的资源，并且在浏览器的主要渲染机制启动之前加载，避免阻塞页面渲染且保证资源尽早可用。
  - 动态场景：一般常见方案是动态创建 Image 标签或者是 Ajax 请求。使用 Ajax 时需要注意可能存在跨域问题。
```
// 动态创建 Image
function preloadImage(url) {
  var img = new Image();
  img.src = url;
}
```
- 响应式图片加载
  - 一般可以通过使用 picture 标签来定义零或多个 source 节点和一个 img 节点，用于提供图片在不同设备/显示场景下对应的内容展示。

7.由于首页列表数据量大，长时间滑动加载会卡顿，使用虚拟列表优化性能

原理：虚拟列表就是只加载显示可视化区域的dom，往上滚动或者往下滚动更新可视化区域的dom

图片.png

8.引⼊ ESLint 和 Prettier规范代码，使⽤ commitizen 规范化提交信息

9.一套代码编译到小程序端和H5端，解决跨端兼容问题

uni-app 已将常用的组件、API封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

10.设计并实现小程序数据缓存方案，通过在不同网络状态下对静态和动态数据缓存，提升页面加载速度

数据缓存

静态数据 --- 类似省市区
- 接口获取后storage 缓存数据每次缓存取
动态数据网络状态监听 --- 简易的中间层拦截网络状态判断缓存判断转发请求返回数据更新数据
1. 接口http请求
  1. 正常网络
    - 设计过期时间 --- 可配置哪些接口需要
      - storage存在并且没有过期使用
      - 否则http请求并更新数据
  2. 弱网情况的熔断-降级-恢复机制 --- 可配置哪些接口需要
    - 通过配置一些接口在正常网络下每次缓存数据
    - 弱网直接使用缓存数据
      - 请求进入 taskQueue
      - 网络恢复执行taskQueue 更新缓存数据

11.封装常用业务组件，包含常见表单、人脸识别等

12.通过canvas生成海报，方便用户分享

性能优化：
离屏渲染技术

原理：将静态或重复绘制的内容预先渲染到不可见的画布上，后续直接复用已渲染结果，避免重复计算和绘制。

// 创建隐藏Canvas预渲染 
const offscreenCanvas = uni.createOffscreenCanvas({ type: '2d' }); 
// 预渲染二维码等静态内容 
renderStaticParts(offscreenCanvas);

异步分步渲染

sequenceDiagram 
    participant UI 
    participant Renderer 
    UI->>Renderer: 启动渲染 
    Renderer->>Renderer: 阶段1: 绘制背景（同步） 
    Renderer-->>UI: 更新进度(30%) 
    Renderer->>Renderer: 阶段2: 加载图片（异步Promise） 
    Renderer-->>UI: 更新进度(50%) Renderer->>Renderer: 阶段3: 生成二维码（Web Worker） 
    Renderer-->>UI: 更新进度(80%) Renderer->>Renderer: 阶段4: 合成最终图像
    Renderer-->>UI: 完成(100%)

async function renderStepByStep() {
  // 阶段1：同步绘制背景
  const ctx = uni.createCanvasContext('poster');
  drawBackground(ctx);
  await ctx.draw(true);
  updateProgress(30);

  // 阶段2：异步加载动态图片
  const images = await Promise.all([
    loadImage('flower.png'),
    loadImage('qrcode.png')
  ]);
  updateProgress(50);

  // 阶段3：Worker线程生成复杂内容
  const qrCodeData = await worker.generateQRCode('https://example.com');
  ctx.drawImage(qrCodeData, 100, 100);
  updateProgress(80);

  // 阶段4：最终合成
  await ctx.draw(true);
  updateProgress(100);
}

// Web Worker任务分配
worker.onMessage(async (res) => {
  if (res.type === 'qrcode') {
    const data = await generateQRCode(res.text);
    worker.postMessage({ type: 'qrcode', data });
  }
});
//Worker线程 ：在后台执行耗时操作（如计算、I/O、网络请求），完成后将结果返回主线程