问题

毕欧外
71 阅读13分钟

技能

  • 严格的规范性，eslint 规范，stylelint 规范，ts 类型规范，git 提交规范，包括打包上线体积分析，性能分析，以及何如做项目的性能优化

  • prettier格式化代码统一性

    • Stylelint -styleLint 是『一个强大的、现代化的 CSS 检测工具』, 与 ESLint 类似, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误.
    • css样式的书写顺序及原理——很重要！很重要！很重要！概括讲就是，它涉及了浏览器的渲染原理：reflow和repaint

  • 逻辑简化

    • 1.利于维护
    • 2.减少bug出现

To b 和 To c 的经验总结 不要用toB的心态去做toc，

  • 发现的问题，产品亲和力，例如tob前端设计缺陷，采用单页面应用，应用组件造成用户体验差，后期维护难

  • Iframe embed

  • hydrogen-js-sdk 插件

  • 抖音小程序根据短剧类小程序运营规范接入原生video-player组件,抖音提供第三方

小程序自定义组件

难点

  • 实现飘屏效果
  • 通过js 定时器控制css animetion动画，Ws链接返回实时数据展示，只有一个dom元素解决性能问题
  • 通过uniapp解决跨段问题，兼容性
  • 视频轮播问题
  • 虚拟列表

问题

  • umi-request header 变量需要在拦截器 request 重写

  • useEffect 中为啥不能使用 async

  • ios 不支持正则常用零宽断言：?<=、?<!、?!、?=

  • vue 发布包缓存问题？ 文件打包添加时间戳拼接

  • img加上 crossOrigin="anonymous"之后导致图片无法显示 -> 每次加上随机数 在 getImage 的 url 后拼上随机数，以避开缓存：image.src = imageUrl + '?time=' + new Date().valueOf()

  • redux 是同步的 异步：中间件 redux-thunk

  • npm 解析异常的的问题 npm set registry registry.npmjs.org/ don't use taobao mirror

  • JS Array.map 方法内异步方法无法同步执行 解决：blog.csdn.net/m0_67393342…

  • 抖音小程序和微信小程序播放问题，watch在promise之后执行

  • 个人感觉项目中最困难的是如何设计和架构，如果前期没有设计好，你会发现后续开发会非常痛苦

分析

前端开发在技术迭代、工程实践、用户体验等层面存在诸多细节痛点，以下从技术细节、工程效率、体验优化、团队协作四大维度展开，结合具体场景与解决方案进行深度剖析：

一、技术细节痛点：框架与底层实现的复杂性

1. 框架特性的深度理解与陷阱

  • React 并发模式下的渲染中断

    • 痛点：React 18 的 startTransition 需手动标记非紧急更新，否则可能因高优先级任务（如输入框实时响应）中断低优先级渲染（如列表加载），导致状态不一致。
    • 案例：列表滚动时触发搜索请求，若未用 startTransition 包裹列表更新，输入框输入会中断列表渲染，出现 “输入卡顿 + 列表闪烁”。
    • 方案：用 import { startTransition } from 'react' 包裹非紧急更新，或使用 useTransition 钩子管理过渡状态。

  • Vue 3 Composition API 的响应式边界

    • 痛点：ref 创建的响应式数据需通过 .value 访问，但若在 setup 中返回对象时遗漏 .value，模板中无法响应更新。
    • 案例：const count = ref(0); return { count }，模板中 {{ count }} 始终显示 0，需改为 {{ count.value }}。
    • 方案：用 toRefs 自动解包 ref 对象，或在返回时统一用 { count: count.value }。
2. 浏览器底层机制的隐藏坑

  • 事件循环与微任务队列

    • 痛点：Promise.then() 与 setTimeout 的执行顺序易混淆，导致异步操作时序错误。

    • 案例：

      js

      console.log('1');
Promise.resolve().then(() => console.log('2'));
setTimeout(() => console.log('3'), 0);
console.log('4');
// 输出顺序：1 → 4 → 2 → 3（微任务先于宏任务）

    • 方案：用 JS 事件循环可视化工具 理解机制，关键流程用 async/await 替代回调。

  • CSS 渲染阻塞与层合成

    • 痛点：position: fixed 元素若频繁触发 top/left 动画，会导致浏览器重排重绘，卡顿明显。
    • 方案：用 transform: translateZ(0) 强制开启 GPU 加速，将元素提升为独立图层，避免影响其他元素渲染。
3.状态管理
*  **痛点**：组件通信混乱：多层嵌套组件的状态传递（如 React 的 props 钻透）、兄弟组件数据同步复杂。
*   **方案**：状态管理库：
    *   轻量级：React 用 Context + useReducer，Vue 用 Composition API + ref/reactive。
    *   复杂场景：Redux（搭配 Redux Toolkit）、Vuex，规范状态更新流程。
4.移动端与跨端开发

难点表现

  • 触摸交互适配：移动端点击事件延迟（300ms）、手势操作（滑动、缩放）的兼容性。
  • 跨端框架学习成本：uni-app/Taro 等跨端框架需同时兼容微信 / 支付宝小程序、H5、App 等多端差异。

应对方案

  • 事件处理：用 touchstart/touchend 替代点击事件，或使用 FastClick 库消除延迟。
  • 跨端框架：优先掌握框架的 “条件编译” 语法（如 uni-app 的 #ifdef H5），针对不同端单独适配样式与逻辑。
5.跨浏览器兼容性与适配

难点表现

  • 浏览器差异：IE 11 对 ES6+、Flexbox 的支持有限，Safari 的 WebKit 内核与 Chrome 存在渲染细节差异（如滚动条样式）。
  • 移动端适配：iOS 与 Android 浏览器的事件机制（如点击延迟）、字体渲染规则不同，微信小程序 / 支付宝小程序等端侧环境需单独适配。

应对方案

  • 使用 Polyfill 与工具：通过 Babel Polyfill、core-js 兼容旧语法，用 Autoprefixer 处理 CSS 前缀，借助 CanIUse 查询特性支持度。
  • 自动化测试：用 Selenium 或 Playwright 编写跨浏览器测试用例，确保关键功能在不同环境下一致。
6.技术栈与框架的快速迭代

难点表现

  • 框架选型与学习成本：React/Vue/Angular 等主流框架更新频繁（如 React 18 的并发模式、Vue 3 的 Composition API），第三方库（如状态管理、路由）也需同步跟进。
  • 工具链复杂性：Webpack/Vite 配置、Babel 插件、TypeScript 类型推导等工具链知识碎片化，新手易陷入 “配置地狱”。

应对方案

  • 关注官方文档与社区：通过框架官网、技术博客（如掘金、SegmentFault）跟踪核心特性，优先学习稳定版本。
  • 模块化学习：按 “基础语法→核心概念→工程实践” 分步掌握，例如先学 Vue 组件化，再深入 Composition API。

二、工程效率痛点：构建、调试与维护成本

1. 大型项目的构建性能瓶颈

  • Webpack 多入口打包优化

    • 痛点：多页面应用（如后台管理系统）打包时，公共依赖（如 React、Ant Design）未抽离，导致每个 chunk 体积过大。

    • 案例：未配置 optimization.splitChunks 时，每个页面的 JS 都包含完整的 React 库，总打包体积增加 300%+。

    • 方案：

      js

      // webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[/]node_modules[/]/,
        name: 'vendor',
        enforce: true
      }
    }
  }
}

  • TypeScript 类型推导的性能损耗

    • 痛点：复杂类型（如嵌套泛型、条件类型）会导致 TS 编译速度下降，大型项目中增量编译仍需数十秒。
    • 方案：用 tsc --watch 开启监听模式，或配置 tsconfig.json 中的 incremental: true（默认开启），并避免过度使用 never、unknown 等模糊类型。
2. 调试复杂状态与异常

  • React 组件重渲染追踪

    • 痛点：多层嵌套组件中，某个 props 更新导致无关组件重复渲染，难以定位性能瓶颈。
    • 方案：用 React DevTools 的 “Profiler” 标签记录渲染耗时，或给组件添加 React.memo 并配合 useMemo/useCallback 缓存依赖。

  • 异步请求的错误边界处理

    • 痛点：多个 API 请求并行时，某一请求失败导致全局状态混乱，且错误堆栈难以追踪。
    • 案例：同时请求用户信息和订单列表，若订单请求失败未捕获，可能导致用户信息渲染中断。
    • 方案：用 try/catch 包裹每个异步函数，或使用 Promise.allSettled 处理并行请求，确保单个失败不影响整体流程。
3.测试与调试效率

难点表现

  • 前端测试覆盖不足：单元测试（如 Jest + RTL）、集成测试（Cypress）的编写成本高。
  • 调试困难：复杂组件的状态难以追踪，异步操作报错定位耗时。

应对方案

  • 测试工具链：

    • 单元测试：React 用 Jest + React Testing Library，Vue 用 Vitest + Vue Test Utils。
    • 调试：利用 Chrome DevTools 的断点调试、性能面板分析渲染瓶颈，或使用 React DevTools 追踪组件更新。

三、体验优化痛点：性能指标与交互细节

1. 首屏加载与视觉体验优化

  • LCP（最大内容绘制）指标优化

    • 痛点：图片未懒加载、JS 阻塞渲染，导致 LCP 超过 2.5 秒（Google 推荐阈值）。

    • 案例：首页轮播图使用 3MB 原图，未压缩且未设置 loading="lazy"，导致首屏白屏时间过长。

    • 方案：

      • 图片：用 Cloudinary 等服务自动生成 WebP 格式，添加 loading="lazy" 属性。
      • JS：将非关键脚本标记为 defer 或 async，关键 CSS 内联到 HTML 头部。

  • 移动端触控反馈的流畅性

    • 痛点：列表滑动时触发 touchmove 事件处理复杂逻辑（如实时计算位置），导致滑动卡顿。

    • 方案：用 requestAnimationFrame 优化动画循环，或使用 passive: true 提升滚动性能：

      js

      element.addEventListener('touchmove', handleMove, { passive: true });
2. 无障碍（Accessibility）适配

  • 屏幕阅读器与语义化标签

    • 痛点：未使用 aria-label、role 等属性，导致视障用户无法通过屏幕阅读器理解页面结构。

    • 案例：按钮未添加 aria-label，屏幕阅读器只能读出 “按钮”，无法告知具体功能。

    • 方案：

      • 表单元素用 label 标签关联 for 属性。
      • 复杂组件（如下拉菜单）添加 role="combobox" 和 aria-expanded 状态。
3. 运行时卡顿：复杂动画（如大量 DOM 操作）、长列表渲染未优化，引发 FPS 下降。

  • 渲染优化：

    • 长列表：使用虚拟列表库（如 React Virtualized、Vue Virtual Scroll）。
    • 动画：用 CSS Transition/Transform 替代 JS 操作 DOM，避免重排重绘。
4. 首屏加载为什么慢？

性能优化：juejin.cn/post/750205…

四、团队协作痛点：规范、维护与技术债

1. 多人协作中的代码规范冲突

  • ESLint 与 Prettier 配置冲突

    • 痛点：不同开发者的编辑器配置不同，导致提交代码时出现缩进、分号等格式错误，CI 构建失败。

    • 方案：

      • 统一配置 .eslintrc.js 和 .prettierrc.json，并通过 husky + lint-staged 在提交前自动修复：

        js

        // package.json
"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
  "prettier": "prettier --write ."
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx,json,css,md}": ["prettier --write", "eslint --fix", "git add"]
}
2. 历史项目技术债重构风险

  • 回调地狱与 Promise 化改造

    • 痛点：旧项目中大量使用 Node.js 风格的回调函数（如 fs.readFile），嵌套超过 3 层后难以维护。

    • 方案：用 util.promisify 转换回调函数，或使用 async/await 重构：

      js

      const { promisify } = require('util');
const readFile = promisify(fs.readFile);

async function readJsonFile(path) {
  try {
    const data = await readFile(path, 'utf-8');
    return JSON.parse(data);
  } catch (error) {
    console.error('读取文件失败', error);
  }
}

  • 全局变量

    • 痛点：项目结构不清晰，全局变量污染，冗余过多。

    • 方案：模块化设计：按功能域拆分组件（如 components/Header、services/api），编写清晰的文档（如用 Storybook 展示组件）

3. 前后端接口变更的兼容性问题

  • 接口字段变更导致前端崩溃

    • 痛点：后端迭代时删除某一接口字段，前端未及时更新，导致渲染时报 Cannot read property 'xxx' of undefined。

    • 方案：

      • 接口字段用可选类型（如 TypeScript 中的 user?.name）。
      • 后端新增字段时保持向后兼容，前端用默认值处理：const name = user.name || '未命名'。

五、前沿技术落地痛点：新兴场景与兼容性

1. WebAssembly（WASM）集成挑战

  • JS 与 WASM 的数据传输开销

    • 痛点：WASM 与 JavaScript 之间传递大量数组数据时，内存拷贝会导致性能损耗（如处理 10MB 数据时耗时增加 50%）。
    • 方案：用 SharedArrayBuffer 共享内存，避免频繁数据拷贝，或使用 WebAssembly.Table 优化函数调用。
2. PWA（渐进式 Web 应用）的离线缓存策略

  • Service Worker 缓存更新导致页面异常

    • 痛点：SW 更新后未正确处理缓存版本，导致用户访问时仍显示旧资源，出现 “白屏” 或 “数据不一致”。

    • 方案：

      • 在 SW 中监听 install 和 activate 事件，通过版本号控制缓存更新：

        js

        const CACHE_VERSION = 'v1.0';
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_VERSION).then((cache) => 
      cache.addAll([/* 缓存列表 */])
    )
  );
});
3. WebGL/Canvas，SSR/SSG

难点表现

  • WebGL/Canvas 开发：3D 渲染、数据可视化（如 ECharts 自定义图表）需要图形学基础。
  • SSR/SSG 技术：Next.js/Nuxt.js 中服务端渲染与客户端交互的状态同步（如 hydration 过程）。

应对方案

  • 分阶段学习：先掌握基础 API（如 Canvas 2D 绘图），再深入 WebGL 着色器编程。
  • 官方示例与社区：参考 Next.js 的官方教程（如 Next.js 文档），通过 CodeSandbox 复现案例。

六、安全与合规痛点：防御性编程与数据保护

1. XSS 攻击的进阶防御

  • 富文本编辑器的输入过滤

    • 痛点：CKEditor 等编辑器未配置白名单，用户可插入 <script> 标签或恶意链接。

    • 方案：用 DOMPurify 库严格过滤输入内容，只允许白名单内的标签和属性：

      js

      const cleanHTML = DOMPurify.sanitize(dangerousHTML, {
  ALLOWED_TAGS: ['p', 'a', 'strong'],
  ALLOWED_ATTR: ['href', 'class']
});

    • XSS：设置 HTTP-only Cookie，避免通过 JS 操作 Cookie

2. Cookie 安全与 SameSite 属性

  • 跨站请求伪造（CSRF）的隐性风险

    • 痛点：未设置 SameSite: Strict 的 Cookie 可能被第三方站点利用，例如用户登录银行网站后，访问恶意网站时自动发送转账请求。

    • 方案：设置 Cookie 时添加：

      js

      res.cookie('token', 'xxx', {
  httpOnly: true,
  secure: true, // HTTPS 环境
  sameSite: 'Strict' // 仅允许同站请求携带
});

      转存失败，建议直接上传图片文件

    • CSRF：后端生成 Token 并通过 HTTP 头（如 X-CSRF-Token）验证。

痛点应对核心策略

  1. 建立技术债管理流程：用项目管理工具（如 Jira）标记待优化点，按 “影响面 + 紧急度” 排期重构。
  2. 自动化工具链覆盖：通过 CI/CD 流程强制代码规范、安全扫描（如 Snyk 检测依赖漏洞）。
  3. 前沿技术试点机制：先在非核心业务场景验证（如内部工具试用 WASM），再逐步推广到生产环境。

总结：突破难点的核心思路

  • 系统化学习：按 “基础→框架→工程→优化” 递进，避免碎片化知识堆积。
  • 实践驱动：通过开源项目（如仿写 GitHub 移动端）积累经验，直面真实场景问题。
  • 关注社区与生态：跟进技术趋势（如 WebAssembly、WebGPU），但优先解决业务实际需求。

  • 前端痛点的本质是 “技术演进速度与工程落地效率” 的矛盾，需通过系统化的知识体系、工程实践和团队协作流程持续优化。

  • 前端难点本质上是技术复杂度与业务需求的平衡，持续积累与刻意练习是突破的关键。

avatar
文章
阅读
粉丝