前端开发

Appearance

Web 端经验总结 ​

记录 Web 端开发中常见的问题和解决方案

兼容性问题 ​

CSS 兼容 ​

  1. Flex 布局：IE11 对 Flex 支持不完整，需要加 -ms- 前缀或使用 autoprefixer
  2. CSS 变量：IE 不支持 CSS 自定义属性（--var），如需兼容使用预处理器变量
  3. position: sticky：Safari 需加 -webkit-sticky，部分安卓浏览器不支持

JS 兼容 ​

  1. 可选链操作符（?.）：低版本浏览器不支持，确保 Babel 正确配置
  2. Promise.allSettled：需要 polyfill 或 Babel 插件支持
  3. globalThis：低版本浏览器需要 polyfill

性能优化经验 ​

首屏加载优化 ​

  1. 路由懒加载：使用动态 import() 实现按需加载
  2. 资源预加载：<link rel="preload"> 预加载关键资源
  3. 图片优化：使用 WebP 格式、懒加载、合适的尺寸
  4. 代码分割：利用 Webpack/Vite 的代码分割功能，减少单个 bundle 体积
  5. CDN 加速：将静态资源部署到 CDN

运行时优化 ​

  1. 防抖和节流：频繁触发的事件（scroll、resize、input）使用防抖/节流
  2. 虚拟列表：大数据量列表使用虚拟滚动（如 vue-virtual-scroller）
  3. Web Worker：耗时计算任务放到 Web Worker 执行，避免阻塞主线程

常见问题解决方案 ​

跨域问题 ​

  1. 开发环境：在 Vite/Webpack 中配置 proxy 代理
  2. 生产环境：Nginx 反向代理或后端配置 CORS
js
// vite.config.js
export default {
  server: {
    proxy: {
      "/api": {
        target: "http://backend-server.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
};

Token 过期处理 ​

  1. 请求拦截器中统一添加 Token
  2. 响应拦截器中检测 401 状态码
  3. Token 过期后自动跳转登录页或刷新 Token

大文件上传 ​

  1. 分片上传：将文件切割为固定大小的块，逐个上传
  2. 断点续传：记录已上传的分片，中断后从断点继续
  3. 进度展示：利用 onUploadProgress 展示上传进度

部署注意事项 ​

  1. 路由 history 模式：Nginx 需配置 try_files $uri $uri/ /index.html
  2. 缓存策略：HTML 文件不缓存，静态资源设置长期缓存（带 hash 文件名）
  3. HTTPS：生产环境必须使用 HTTPS
  4. Gzip 压缩：Nginx 开启 gzip 压缩，减少传输体积