⚠️温馨提示：文档中包含【1个】暂不支持的区域，请通过搜索关键字【暂不支持的文档区域】进行后续处理

react-performance-notes.zip

很多同学可能第一次来，我分享了那摩多干货公开课，不允许你不知道！都在这里，需要文档和配套视频找咨询老师领取~

【飞书文档】备战金九银十，进阶大前端，涨薪全突破！

【飞书文档】项目没有难点亮点？字节大佬带你前端项目弯道超车

【飞书文档】字节大佬带你弯道超车，深入剖析大厂面试真题~

【飞书文档】面试被算法干吐了？字节大佬带你突破极限，冲击 30K+ 必掌握算法与 WebAssembly 技术

【飞书文档】高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节【超详细内培版】

【飞书文档】高级前端专家如何做项目架构与工程化设计？特邀字节大佬细数字节开源项目架构细节【超详细内培版】

【飞书文档】小小微前端，轻松拿捏，特邀字节大佬开讲微前端架构与源码剖析【内部培训版】

上次性能优化课，我们着重讲解了 首屏优化 问题与相关解决方案，今天我们继续深入。在飞书文档开发过程中还有以下一些难点：飞书文档在开发过程中，遇到了很多性能挑战，我们挑一些同学们平常相对能接触到的点给大家讲解，但其实最具挑战的部分还是集中在：

在开发飞书文档和飞书云表格等复杂的协作工具时，会遇到许多技术和设计上的难点。以下是五个主要难点：

实时协作与同步
- 难点描述 ：实现多人实时协作编辑，确保所有参与者的视图保持同步是一个巨大的技术挑战。需要处理并发修改、冲突检测与解决，以及数据的一致性。
- 解决方案 ：通常采用 Operational Transformation (OT) 或 Conflict-free Replicated Data Types (CRDTs) 等算法来管理并发编辑和数据同步。
大规模数据处理与性能优化
- 难点描述 ：处理大型文档或表格时，需要确保系统性能不会因数据量增加而显著下降。这包括高效的渲染、大数据量的处理、快速的搜索和筛选功能。
- 解决方案 ：采用虚拟化技术，如使用 react-virtualized 来按需渲染数据。还需要优化数据库查询和前端数据处理逻辑，使用分块加载和懒加载技术，云表格采用 canvas 方案。
复杂的权限管理
- 难点描述 ：需要细粒度的权限控制，确保不同用户可以在同一个文档或表格中有不同的访问和编辑权限。同时还要确保权限变化能够及时生效且不影响用户体验。
- 解决方案 ：设计灵活且高效的权限管理系统，可能需要用到角色和权限模型（位运算），并结合实时同步机制，确保权限变化即时更新。
离线支持
- 难点描述 ：用户在离线状态下仍需要能够编辑文档和表格，并在恢复网络连接后自动同步更改。这需要处理离线状态下的数据存储和冲突合并。
- 解决方案 ：使用本地存储（如 IndexedDB）来缓存用户操作和数据变更，网络恢复后进行数据同步并处理冲突。利用 Service Worker 来管理离线缓存和同步逻辑。
丰富的功能集成
- 难点描述 ：飞书文档和云表格需要提供丰富的功能，如公式计算、图表生成、格式化工具、多媒体嵌入等。这些功能需要在保持系统简洁和高性能的前提下无缝集成。
- 解决方案 ：模块化设计，将各个功能独立成模块，按需加载。同时使用高效的算法和数据结构，确保复杂功能的计算和渲染性能。

飞书文档开发难点（一）—— 应用细节优化

在优化 React 应用时，有许多具体的细节可以关注，以提升性能、可维护性和用户体验。以下是一些关键的优化细节：

1. 使用 React.memo

对于纯组件（Pure Components），使用 React.memo 包装，防止不必要的重渲染。
示例：

const MyComponent = React.memo((props) => {
  // 组件代码
});

2. 使用 useCallback 和 useMemo

useCallback 用于缓存函数引用，避免子组件因为传入函数变化而重渲染。
useMemo 用于缓存计算结果，避免每次渲染时都重新计算。
示例：

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

3. 拆分组件

将大组件拆分为更小的可复用组件，提高代码可读性和性能（通过减少不必要的重渲染）。

4. 避免匿名函数和对象

在 JSX 中避免使用匿名函数和对象，因为每次渲染都会创建新的实例。
示例：

// 不推荐
<MyComponent onClick={() => handleClick()} style={{ color: 'red' }} />

// 推荐
const handleClick = useCallback(() => {
  // 点击处理逻辑
}, []);
const style = { color: 'red' };

<MyComponent onClick={handleClick} style={style} />

5. 优化列表渲染

使用 react-window 或 react-virtualized 进行虚拟化长列表，提高渲染性能。
示例：

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

6. 代码分割和懒加载

使用 React 的 React.lazy 和 Suspense 动态加载组件，减少初始加载时间。
示例：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

7. 使用性能优化工具

使用 React 开发者工具的 Profiler 分析和优化应用的渲染性能。
示例：在 Chrome 或 Firefox 中安装 React Developer Tools，然后在 Profiler 中查看各组件的渲染时间。

8. 减少 Redux 或 Context 重渲染

使用 useSelector 时，提供精确的选择器函数，避免整个状态变化导致的组件重渲染。
示例：

const selectedData = useSelector(state => state.someSpecificPart);

9. 避免不必要的副作用

确保 useEffect 中的依赖数组正确配置，避免不必要的副作用执行。
示例：

useEffect(() => {
  // 副作用逻辑
}, [specificDependency]);

10. 提升图片和资源加载

使用现代图片格式（如 WebP）和图像懒加载技术（如 loading="lazy" ）。
示例：

<img src="image.webp" alt="example" loading="lazy" />

11. 网络请求优化

合理使用缓存，避免重复请求。
使用 abortController 取消不再需要的请求。

12. 优化 CSS 和样式

使用 CSS-in-JS 库（如 styled-components 或 Emotion）提高样式管理的灵活性和性能。
避免全局样式污染，使用模块化样式。

飞书文档开发难点（二）—— 飞书表格 1000w 行数据流畅渲染的秘密

canvas 优化细节

白板方案，大部分同学第一反应，那肯定是 canvas 啊，没错，但是，可以很直接地告诉大家，canvas 方案在大家平常小数据量的可视化场景，没太大问题。

不过如果是大量数据的渲染，canvas 瓶颈也会凸显，为了进一步优化白板性能，还需要进行深入底层优化

表格开发，可能是大家平常开发过程中最常见的场景，表格的优化我们可以给出以下历程：

用库
初级：table dom
中级：虚拟表格
高级：canvas table
专家：canvas + tile 技术
高级专家：skia + Webassembly

结合给定的五个不同层级的实现方案，以下是详细说明如何在不同层次上实现高效的表格渲染方案：

1. 初级：table DOM

这是最基础的实现方式，直接使用 HTML 的 <table> 元素来渲染表格。

实现方案

简单实现 ：直接使用 HTML 和 JavaScript 渲染表格。
适用场景 ：适用于数据量较小的场景，当行数和列数有限时，直接使用 DOM 元素处理方便且直观。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Basic Table</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <!-- Rows will be inserted here by JavaScript -->
    </tbody>
  </table>

  <script>
    const tableBody = document.querySelector('#data-table tbody');
    const data = Array.from({ length: 100 }, (_, id) => ({
      id,
      name: `Name ${id}`,
      age: Math.floor(Math.random() * 100)
    }));

    data.forEach(row => {
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${row.id}</td><td>${row.name}</td><td>${row.age}</td>`;
      tableBody.appendChild(tr);
    });
  </script>
</body>
</html>

2. 中级：虚拟表格

使用虚拟化技术来渲染表格，只有视口中的行和列才会被渲染。

实现方案

库选择 ：使用 react-window 或 react-virtualized 来实现虚拟化表格。
适用场景 ：适用于数据量较大但需要浏览的行数有限的情况，通过虚拟化技术减少渲染的 DOM 数量。

示例代码

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const data = Array.from({ length: 10000 }, (_, id) => ({
  id,
  name: `Name ${id}`,
  age: Math.floor(Math.random() * 100)
}));

const Row = ({ index, style }) => (
  <div style={style}>
    {data[index].id} - {data[index].name} - {data[index].age}
  </div>
);

const VirtualizedTable = () => (
  <List
    height={600}
    itemCount={data.length}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

export default VirtualizedTable;

3. 高级：canvas table

使用 HTML5 Canvas 来绘制表格内容，避免大量 DOM 操作，提高渲染性能。

实现方案

使用 Canvas API ：通过 Canvas API 手动绘制表格的每个单元格。
适用场景 ：适用于需要更高效渲染和更灵活绘制能力的场景。

示例代码

import React, { useRef, useEffect } from 'react';

const CanvasTable = ({ data }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const rowHeight = 20;
    const columnWidths = [50, 150, 50];

    canvas.height = data.length * rowHeight;
    canvas.width = columnWidths.reduce((a, b) => a + b, 0);

    data.forEach((row, rowIndex) => {
      const y = rowIndex * rowHeight;
      ctx.fillText(row.id, 0, y + rowHeight / 2);
      ctx.fillText(row.name, columnWidths[0], y + rowHeight / 2);
      ctx.fillText(row.age, columnWidths[0] + columnWidths[1], y + rowHeight / 2);
      ctx.strokeRect(0, y, canvas.width, rowHeight);
    });
  }, [data]);

  return <canvas ref={canvasRef} />;
};

const data = Array.from({ length: 10000 }, (_, id) => ({
  id,
  name: `Name ${id}`,
  age: Math.floor(Math.random() * 100)
}));

export default function App() {
  return <CanvasTable data={data} />;
}

4. 专家：canvas + tile 技术

通过将表格划分为多个 tile（瓷砖）区域，只渲染当前视口及其周围的 tile，提高渲染性能和内存使用效率。

实现方案

Tile 分区 ：将表格划分为多个 tile 区域，每个 tile 只包含一定数量的单元格。
懒加载和预加载 ：仅在需要时加载和渲染特定的 tile，同时预加载用户视口附近的 tile。

示例代码

import React, { useRef, useEffect, useState } from 'react';

const tileSize = 100; // 每个 tile 包含的行数

const CanvasTileTable = ({ data }) => {
  const canvasRef = useRef(null);
  const [visibleTiles, setVisibleTiles] = useState([]);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const rowHeight = 20;
    const columnWidths = [50, 150, 50];

    canvas.height = window.innerHeight;
    canvas.width = columnWidths.reduce((a, b) => a + b, 0);

    const updateVisibleTiles = () => {
      const scrollTop = window.scrollY;
      const visibleStart = Math.floor(scrollTop / (tileSize * rowHeight));
      const visibleEnd = visibleStart + Math.ceil(canvas.height / (tileSize * rowHeight));
      const tiles = [];
      for (let i = visibleStart; i <= visibleEnd; i++) {
        tiles.push(i);
      }
      setVisibleTiles(tiles);
    };

    window.addEventListener('scroll', updateVisibleTiles);
    updateVisibleTiles();

    return () => {
      window.removeEventListener('scroll', updateVisibleTiles);
    };
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const rowHeight = 20;
    const columnWidths = [50, 150, 50];

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    visibleTiles.forEach(tileIndex => {
      const startRow = tileIndex * tileSize;
      const endRow = Math.min(data.length, startRow + tileSize);

      for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
        const row = data[rowIndex];
        const y = (rowIndex - startRow) * rowHeight;

        ctx.fillText(row.id, 0, y + rowHeight / 2);
        ctx.fillText(row.name, columnWidths[0], y + rowHeight / 2);
        ctx.fillText(row.age, columnWidths[0] + columnWidths[1], y + rowHeight / 2);
        ctx.strokeRect(0, y, canvas.width, rowHeight);
      }
    });
  }, [visibleTiles, data]);

  return <canvas ref={canvasRef} />;
};

const data = Array.from({ length: 100000 }, (_, id) => ({
  id,
  name: `Name ${id}`,
  age: Math.floor(Math.random() * 100)
}));

export default function App() {
  return <CanvasTileTable data={data} />;
}

5. 高级专家：skia + WebAssembly

使用 Skia 图形库结合 WebAssembly，实现高性能、跨平台的表格渲染。

实现方案

Skia 图形库 ：Skia 是一个跨平台的 2D 图形库，可以高效地绘制复杂图形。
WebAssembly ：通过 WebAssembly 将 Skia 集成到 Web 应用中，提升图形渲染性能。

示例代码

由于 Skia 和 WebAssembly 的集成涉及较为复杂的编译和绑定过程，以下提供的是一种基本思路：

准备 Skia 和 WebAssembly 环境 ：需要编译 Skia 库为 WebAssembly 模块，可以使用 emscripten 工具链。
编译 Skia ：
- 下载并编译 Skia 库，生成 WebAssembly 模块。
- 详细步骤可以参考 Skia 和 Emscripten 官方文档。
在 React 中使用 Skia ：
- 引入编译好的 Skia WebAssembly 模块。
- 使用 Skia 的 API 绘制表格内容。

import React, { useRef, useEffect } from 'react';

// 假设 skiaModule 是已经编译好的 Skia WebAssembly

如果还有同学没见识过 Webassembly，建议同学们去看看上次公开课内容：【飞书文档】面试被算法干吐了？字节大佬带你突破极限，冲击 30K+ 必掌握算法与 WebAssembly 技术

另外 Skia 这个技术可能很多同学都比较陌生，这个库是 C++ 编写的图形处理库，目前由 Google 公司维护。

其实，浏览器 canvas 底层就是 skia： https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/html/HTMLCanvasElement.cpp

可视区绘制

飞书文档开发难点（三）—— 构建与运行时优化 rspack 解密

rspack 设计之初，深度思考了以下几个问题，并在当下已经支持。

更彪悍的底层架构 : Rspack 使用 Rust 语言编写，得益于 Rust 的高性能编译器支持， Rust 编译生成的 Native Code 通常比 JavaScript 性能更为高效。
高度并行的架构 : Webpack 受限于 JavaScript 对多线程的羸弱支持，导致其很难进行高度的并行化计算，而得益于 Rust 语言的并行化的良好支持， Rspack 采用了高度并行化的架构，如模块图生成，代码生成等阶段，都是采用多线程并行执行，这使得其编译性能随着 CPU 核心数的增长而增长，充分挖掘 CPU 的多核优势。
内置大部分的功能 : 事实上 Webpack 本身的性能足够高效，但是因为 webpack 本身内置了较少的功能，这使得我们在使用 Webpack 做现代 Web App 开发时，通常需要配合很多的 plugin 和 loader 进行使用，而这些 loader 和 plugin 往往是性能的瓶颈，而 Rspack 虽然支持 loader 和 plugin，但是保证绝大部分常用功能都内置在 Rspack 内，从而减小 JS plugin | loader 导致的低性能和通信开销问题。
插件化机制 ：通过编写 rspack 插件，增强构建能力
增量编译 : 尽管 Rspack 的全量编译足够高效，但是当项目庞大时，全量的编译仍然难以满足 HMR 的性能要求，因此在 HMR 阶段，我们采用的是更为高效的增量编译策略，从而保证，无论你的项目多大，其 HMR 的开销总是控制在合理范围内。

1. Rspack 的基础配置

Rspack 提供了类似于 Webpack 的配置方式，便于开发者迁移和使用。以下是一个基本的 Rspack 配置示例：

// rspack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

2. 构建优化

快速构建

Rust 的高性能特性使得 Rspack 能够更快速地处理文件和依赖关系。相比于 JavaScript 实现的打包工具，Rspack 在处理大量文件和复杂依赖时，能够显著减少构建时间。

多线程编译

Rspack 利用 Rust 的并行处理能力，可以在多线程环境下高效编译代码。这种并行处理能够显著提高构建速度，特别是在大型项目中，优势更加明显。

增量构建

Rspack 支持增量构建，即只重新编译发生变化的部分代码，而不是全量编译。这种方式能够大幅度提高开发体验，使得开发者在代码修改后可以迅速看到效果。

3. 运行时优化

代码分割

Rspack 提供了类似于 Webpack 的代码分割功能，通过 optimization.splitChunks 配置，可以将代码分割成多个小块，从而优化浏览器加载和解析时间。

module.exports = {
  // ...other configurations
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Tree Shaking

Rspack 支持 Tree Shaking，可以在打包过程中移除未使用的代码，减少最终生成文件的大小。这通过分析代码中的 import 和 export 语句来实现，确保只包含实际用到的模块。

module.exports = {
  // ...other configurations
  optimization: {
    usedExports: true,
  },
};

懒加载与按需加载

通过动态 import() 语法，可以实现模块的懒加载和按需加载，从而减少初始加载时间，提升页面响应速度。

// src/index.js
import('./lazyModule').then(module => {
  module.default();
});

远程物料全生命周期管理

远程物料有通过 Module Federation 构建管理的，其好处有：

动态加载 ：模块联邦支持在运行时动态加载远程模块，而不是在编译时将所有代码打包在一起。
代码共享 ：不同应用之间可以共享模块，无需重复打包，提高了代码复用性和加载速度。
独立部署 ：各个应用可以独立开发、测试和部署，互不影响。
自动依赖处理 ：模块联邦自动处理依赖关系，确保加载的模块能够正常运行。

详细可看：【飞书文档】小小微前端，轻松拿捏，特邀字节大佬开讲微前端架构与源码剖析【内部培训版】

4. Rust 优势

性能与安全性

Rust 的性能接近于 C/C++，但同时提供了现代语言的安全性特性。Rust 的所有权系统和编译时检查可以有效避免常见的内存管理错误，如空指针解引用和数据竞争，从而提高代码的可靠性和安全性。

并发处理

Rust 的并发模型使其特别适合用于开发需要高性能并发处理的工具。Rspack 利用 Rust 的并发能力，实现了多线程编译和文件处理，使得构建过程更加高效。

生态系统

Rust 拥有丰富的生态系统，提供了许多高质量的库和工具，可以方便地集成到 Rspack 中，进一步提升其功能和性能。

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
数字孪生平台整体架构设计
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

简历优化（30K+ 简历样板）

技能描述

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

STAR

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

全面的技术储备
1. Vue 经验、React 经验，Vue3 + Typescript，React18（Hooks、Concurrent）【框架基础】
2. 框架原理，React 生态库原理（React-Router、Redux）、Vue 生态库原理
3. 工程化（构建工具：Webpack、Vite、Rspack、ESBuild、swc）
4. CI/CD 自动化，自动化构建、自动化部署
5. 基建能力（Node、命令行工具开发 Cli），UI 库、图表库、工具库
6. 业务方面（管理系统、图表类），衍生 -> 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
至少参加过两个以上大型项目，并主导过一个复杂项目
1. 管理系统，（项目搭建、方案、技术栈、CI/CD 等等）
2. 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
面试表现好
1. 个人介绍【 打个草稿 】，基本信息、技术栈、项目重难点
2. STAR：
  - 遇到了什么问题 question，需求
  - 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
  - 方案落地
  - 反思，优化
- 面试过程中，重点去复习只是重难点（v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型）
- 技术储备，由你的项目经验体验，技术怎样在你的项目中落地的
学历
1. 大专，尽快考一个本科证（年限去掉）
2. 民办
3. 内推，学历问题、工作经历的问题

补足短板

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）wangEditor、CKEditor
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】

前端前沿技术爱好者

高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节（二）【内部培训版】

飞书文档开发难点（一）—— 应用细节优化

1. 使用 React.memo

2. 使用 useCallback 和 useMemo

3. 拆分组件

4. 避免匿名函数和对象

5. 优化列表渲染

6. 代码分割和懒加载

7. 使用性能优化工具

8. 减少 Redux 或 Context 重渲染

9. 避免不必要的副作用

10. 提升图片和资源加载

11. 网络请求优化

12. 优化 CSS 和样式

飞书文档开发难点（二）—— 飞书表格 1000w 行数据流畅渲染的秘密

1. 初级：table DOM

实现方案

示例代码

2. 中级：虚拟表格

实现方案

示例代码

3. 高级：canvas table

实现方案

示例代码

4. 专家：canvas + tile 技术

实现方案

示例代码

5. 高级专家：skia + WebAssembly

实现方案

示例代码

可视区绘制

飞书文档开发难点（三）—— 构建与运行时优化 rspack 解密

1. Rspack 的基础配置

2. 构建优化

快速构建

多线程编译

增量构建

3. 运行时优化

代码分割

Tree Shaking

懒加载与按需加载

远程物料全生命周期管理

4. Rust 优势

性能与安全性

并发处理

生态系统

妙码学院全网独家项目实战矩阵

简历优化（30K+ 简历样板）

技能描述

项目描述

大家先看这段描述：

深度优化一下

STAR

其实还不够，这些项目才是求职香饽饽

年包 50W+ 薪资长线规划

核心要素

补足短板

妙码学院——全程陪跑、督学、内推

不同阶段对前端人的硬性要求

1~3年

3~5年

5年以上

职业规划指导