优化图片
- 使用现代图片格式（如WebP）。
- 图片压缩（如使用ImageOptim）。
- 控制图片尺寸，避免加载过大的图片。
字体子集化处理
- Fontmin 字体子集化处理。
懒加载资源
- 仅加载首屏需要的资源，其余资源在用户滚动时按需加载。
- 使用 loading="lazy" 属性延迟图片加载。
优化CSS和JavaScript
- 压缩代码 ：通过工具（如Terser、CSSNano）移除多余字符。
- 合并文件 ：减少HTTP请求。
- Tree Shaking ：移除未使用的代码。
- 动态加载非关键CSS和JS，首屏只加载必要资源。
使用CDN加速
- 将静态资源存放于全球分布的CDN，提高传输速度。
移除冗余第三方库
- 分析依赖，移除未使用或过大的库，采用更轻量级的替代方案（如Lodash -> Lodash按需加载）。
启用浏览器缓存
- 配置缓存头（如 Cache-Control 和 ETag ）提高资源复用。
启用Gzip或Brotli压缩
- 减少HTML、CSS、JS文件的体积。
服务端渲染（SSR）和静态生成（SSG）
- 使用框架（如Next.js）提前生成HTML，降低客户端渲染压力。

预加载关键内容

预加载关键资源
- 使用 <link rel="preload"> 提前加载字体、图片、CSS和JavaScript。
- 示例：

<link rel="preload" href="styles/main.css" as="style">
<link rel="preload" href="scripts/main.js" as="script">
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2">

嵌入关键CSS
- 将关键CSS直接写入HTML <style> 中，避免阻塞渲染。
异步加载JavaScript
- 使用 async 和 defer 属性，延迟非关键脚本加载。

<script src="scripts/main.js" defer></script>

预加载字体和关键图片
- 确保关键字体和首屏图片尽早加载，避免FOIT和闪烁。
使用HTTP/2 Server Push
- 配置HTTP/2服务器，在响应HTML时主动推送关键资源。

预渲染和静态生成

使用工具如 @prerenderer/webpack-plugin 和 @prerenderer/renderer-puppeteer ，提前生成静态HTML内容，提高加载速度。
配置示例：

const PrerenderSPAPlugin = require('@prerenderer/webpack-plugin');
const PuppeteerRenderer = require('@prerenderer/renderer-puppeteer');
module.exports = {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/home', '/about'],
      renderer: new PuppeteerRenderer({
        renderAfterDocumentEvent: 'custom-render-trigger',
      }),
    }),
  ],
};

动画卡顿优化

动画流畅性直接影响用户体验，我采取了以下优化措施：

减少主线程阻塞
- 优化JavaScript执行，减少长任务。
- 将耗时操作移至Web Worker。
GPU加速
- 使用CSS属性（如 transform 和 opacity ）触发GPU加速。
- 避免使用 left/top 等触发重排的属性。
合适的帧率
- 确保动画运行在60帧/秒（FPS），通过 requestAnimationFrame 控制动画。
压缩动画帧渲染时间
- 减少每帧渲染的计算，避免阻塞绘制。
节流和防抖
- 优化滚动事件、窗口调整大小事件，减少不必要的频繁触发。

应用状态管理优化

React 状态管理

减少全局状态的依赖
- 将状态尽可能局部化，避免使用全局状态（如 Redux 或 Context）管理所有数据。
- 示例：对于仅用于某些组件的状态，可以使用组件的 useState 或 useReducer 。
优化 Context 的性能
- Context 的更新会重新渲染所有订阅的组件。
- 解决方案：拆分 Context，将不同的逻辑存储在多个 Context 中，降低重新渲染范围。
使用高效的状态管理库
- 使用轻量、高性能的状态管理工具，如 Zustand 、 Jotai 或 Recoil ，它们具备更细粒度的状态更新机制。
- 示例（Zustand）：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const Counter = () => {
  const count = useStore((state) => state.count); // 仅订阅 count
  const increment = useStore((state) => state.increment);
  return <button onClick={increment}>Count: {count}</button>;
};

避免不必要的状态更新
- 使用不可变数据结构（如 immer ）管理状态，减少对数据的直接修改。
- 示例：

import produce from 'immer';

const nextState = produce(baseState, (draft) => {
  draft.value = newValue; // 修改 draft 而不是原始 state
});

Vue 状态管理

精简 Vuex 或 Pinia 的全局状态
- 将不需要全局共享的状态移至组件内部，减少全局状态更新的开销。
- 示例：使用 reactive 管理局部状态，而不是在全局 store 中存储。
模块化和按需加载
- 将 Vuex 或 Pinia 的状态模块化，按需加载，提高性能。
避免多余的 Getter 重计算
- 将计算密集型的逻辑放入组件的 computed 或 watch 中，而不是在 store 的 getter 中。

应用视图层更新优化

React 的视图更新优化

使用 React.memo 防止不必要的重新渲染
- 对函数组件进行包裹，只有 props 变化时才重新渲染。
- 示例：

const MyComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

useMemo 和 useCallback 的优化
- 使用 useMemo 缓存复杂计算的结果，使用 useCallback 缓存函数实例。
- 示例：

const computedValue = useMemo(() => heavyComputation(data), [data]);
const handleClick = useCallback(() => doSomething(), []);

拆分组件
- 将页面拆分为更小的组件，只更新必要的部分，避免整体重新渲染。
使用虚拟滚动
- 对于长列表渲染，使用虚拟滚动技术（如 React-Virtualized 或 React-Window）只渲染可见区域的内容。
适当使用批处理更新
- 确保多个状态变更可以批量处理，减少渲染次数。

Vue 的视图更新优化

避免多余的响应式数据
- 只对需要响应式的数据使用 reactive 或 ref ，静态数据不需要响应式。
使用 v-once 和 v-memo
- 对于不需要更新的静态内容，可以使用 v-once 渲染一次。
- 示例：

<div v-once>静态内容</div>

拆分组件和局部更新
- 将大组件拆分为多个子组件，使用 keep-alive 缓存不活跃的组件，减少重新渲染的开销。
避免 watch 的过度使用
- 优化 watch 的逻辑，仅对必要的依赖进行监听，减少副作用执行。
使用虚拟滚动
- 对长列表使用虚拟滚动库（如 vue-virtual-scroller）进行优化。

事件和渲染细节优化

节流和防抖
- 对频繁触发的事件（如滚动、输入）进行节流或防抖处理，避免多次触发重渲染。
- 示例（防抖实现）：

const debounce = (func, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
};

const handleInput = debounce((value) => console.log(value), 300);

事件绑定
- 在 Vue 中使用 .native 修饰符直接绑定 DOM 事件。
- 在 React 中，避免在子组件上过多传递回调函数。
避免不必要的 DOM 操作
- 减少直接操作 DOM 的次数，尽量通过框架的响应式机制处理更新。
异步加载和懒加载
- 对于路由组件、图片等使用懒加载技术，降低首次加载压力。
使用请求合并
- 在需要多次请求时，合并请求以减少多余的网络开销。

【中高级】你们的前端项目性能有重点关注过吗，是如何评估的，有做具体的性能指标体系和评估策略吗

性能优化不仅仅是代码层面的工作，更需要一套完善的 性能评估指标体系 和 评估策略 作为基础支持。以下将从 评估性能的重要性 、 如何得到性能指标 和 评估策略的落地 三个方面详细展开。

性能评估是前端性能优化的起点。通过准确的评估，能够帮助团队识别性能瓶颈，优先解决关键问题，从而优化用户体验。以下是需要关注的几个原因：

用户期望响应速度越来越快，直接影响留存率和转化率。
不同设备、网络环境下的性能表现需要监控和优化。
确保团队的优化工作有明确目标和验证依据。

前端性能指标体系

核心性能指标

加载性能

FP (First Paint) - 首次绘制
- 定义：页面任何像素被渲染所花费的时间。
- 评估工具：Chrome DevTools Performance 面板。
FCP (First Contentful Paint) - 首次内容绘制
- 定义：页面开始渲染任何文本、图片、SVG 的时间。
- 评估工具：Performance 面板、web-vitals 或 Lighthouse。
LCP (Largest Contentful Paint) - 最大内容绘制
- 定义：页面中最大的文本块或图片呈现所花费的时间。
- 理想值：< 2.5秒。
TTFB (Time to First Byte) - 首字节到达时间
- 定义：用户发起请求到接收服务器响应第一个字节的时间。
- 评估工具：Network 面板。

交互性能

INP (Interaction to Next Paint) - 交互到下一次绘制
- 定义：用户交互（如点击按钮）到界面响应的时间。
- 理想值：< 200ms。
TBT (Total Blocking Time) - 总阻塞时间
- 定义：从 FCP 到 TTI（Time to Interactive）之间，主线程被阻塞的时间总和。
- 理想值：< 200ms。
CLS (Cumulative Layout Shift) - 累计布局偏移
- 定义：页面意外的布局移动得分，影响用户体验。
- 理想值：< 0.1。

补充性能指标

DNS 查询时间
- 定义：从发起请求到 DNS 查询完成的时间。
- 评估工具：Network 面板。
资源加载时间
- 定义：所有静态资源（如图片、CSS、JS）的下载时长。
长任务（Long Task）
- 定义：主线程运行超过 50ms 的任务。

性能指标的获取

开发阶段工具
- Chrome DevTools : Performance 面板用于捕获 FP、FCP、LCP 等指标。
- Lighthouse : 生成页面性能报告，提供优化建议。
- web-vitals : 监控 FCP、LCP、CLS 等核心 Web Vitals 指标。
生产环境监控
- 前端性能监控工具 :
  - Google Analytics : 配置自定义事件记录指标。
  - Web Performance API : 直接从浏览器获取性能数据。
```
const { timing } = performance;
console.log('TTFB:', timing.responseStart - timing.requestStart);
```
- 性能监控平台 :
  - 使用开源平台（如 Prometheus + Grafana）或第三方服务（如 New Relic、Datadog）。
用户行为数据
- 埋点记录页面加载时间、交互延迟等关键性能指标，结合用户行为分析优化方向。

性能评估策略

基准测试

确定目标设备和网络环境
- 测试覆盖范围包括：高端、中端、低端设备，4G、3G、弱网环境等。
- 模拟弱网：使用 Chrome DevTools 的网络调节功能。
基准值定义
- 根据行业标准和历史数据定义性能基准（如 LCP < 2.5 秒，CLS < 0.1）。

实时监控和预警

监控工具
- 实时采集生产环境用户的性能数据，形成可视化仪表盘。
- 自动化报警：当性能指标超出设定阈值时触发预警。
定期性能报告
- 周期性生成性能分析报告（如每周/月），跟踪优化进展。

问题定位

数据采集
- 对比不同设备、浏览器、地理位置的数据，定位性能瓶颈。
分析阻塞任务
- 使用 Chrome DevTools 找出阻塞主线程的长任务，优化代码。

持续优化和回归测试

构建性能优化 CI/CD 流程

在每次代码提交时，使用工具（如 Lighthouse CI）检测性能，阻止性能下降的代码合并。

回归测试

对优化后的功能进行回归测试，确保性能未受影响。

实践中的性能优化

结合上述指标和策略，以下是优化的实际举措：

减少资源体积 : 压缩 CSS/JS，使用 Tree Shaking 和代码分割。
懒加载与预加载 : 延迟加载非关键资源，优先加载关键 CSS 和 JS。
优化图片 : 使用 WebP 格式，结合 CDN。
服务端渲染（SSR） : 提升首屏渲染速度。
长列表优化 : 实现虚拟滚动。

【专家级】看你之前带了十几个人的前端团队，能详细说说你是如何落实应用优化这部分工作的，团队代码质量和整体管理怎么落实

作为一个前端团队的架构师，性能优化是团队技术能力的重要体现。以下从 指标设计与计算 、 数据上报 、 数据清洗与汇总 到 数据分析与优化反馈 ，详细阐述整个性能优化流程。

性能优化指标设计与计算

指标设计

在性能优化中，指标的合理设计是核心。以下是设计的主要原则：

清晰且可量化 ：指标必须直观且易于理解，例如 LCP 、 CLS 、 INP 等。
与业务目标挂钩 ：例如关键页面的加载时间（LCP）直接影响用户留存率。
覆盖加载、交互、稳定性 ：确保监控全面，不遗漏关键用户体验。

常用的性能指标设计：

加载性能
- FP ：首次绘制。
- FCP ：首次内容绘制。
- LCP ：最大内容绘制。
- TTFB ：首字节到达时间。
交互性能
- INP ：用户交互到下一次绘制时间。
- TBT ：总阻塞时间。
稳定性
- CLS ：页面布局偏移。
业务自定义指标
- 页面中某些功能模块的加载时间。
- 特定的用户行为路径完成时间。

指标计算（客户端采集）

通过 Performance API 和 web-vitals 库采集核心指标：

import { getLCP, getCLS, getINP } from 'web-vitals';
// 采集 LCP
getLCP((metric) => {
  console.log('LCP:', metric.value);
  reportMetricToServer('lcp', metric.value);
});
// 采集 CLS
getCLS((metric) => {
  console.log('CLS:', metric.value);
  reportMetricToServer('cls', metric.value);
});
// 采集 INP
getINP((metric) => {
  console.log('INP:', metric.value);
  reportMetricToServer('inp', metric.value);
});
// 上报指标
function reportMetricToServer(name, value) {
  fetch('/api/report-metric', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, value, timestamp: Date.now() }),
  });
}

此外，还可以通过 PerformanceObserver 捕获更细粒度的指标（如 LCP、CLS 的变化过程）。

首屏性能相关

TTFB (Time to First Byte)

获取首字节到达时间：

const { timing } = performance;
const ttfb = timing.responseStart - timing.requestStart;
console.log('TTFB:', ttfb, 'ms');

FP (First Paint) 和 FCP (First Contentful Paint)

通过 PerformancePaintTiming 获取：

const paintEntries = performance.getEntriesByType('paint');
paintEntries.forEach((entry) => {
  console.log(
${entry.name}: ${entry.startTime} ms
);
});
// 输出：
// First Paint: xxx ms
// First Contentful Paint: xxx ms

LCP (Largest Contentful Paint)

通过 PerformanceObserver 获取 LCP：

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    console.log('LCP:', entry.startTime, 'ms');
  });
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

CLS (Cumulative Layout Shift)

通过 PerformanceObserver 监听 CLS：

let clsValue = 0;
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  });
});
observer.observe({ type: 'layout-shift', buffered: true });
window.addEventListener('beforeunload', () => {
  console.log('CLS:', clsValue);
});

交互性能相关

TBT (Total Blocking Time)

获取长任务：

const observer = new PerformanceObserver((list) => {
  const longTasks = list.getEntries();
  longTasks.forEach((task) => {
    const blockingTime = task.duration - 50; // 超过50ms才算阻塞
    if (blockingTime > 0) {
      console.log('Blocking time:', blockingTime, 'ms');
    }
  });
});
observer.observe({ type: 'longtask', buffered: true });

INP (Interaction to Next Paint)

监听用户交互并计算延迟时间：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Interaction delay:', entry.processingStart - entry.startTime, 'ms');
  });
});
observer.observe({ type: 'event', buffered: true });

数据上报

上报方式设计

实时上报 ：关键指标（如 LCP、CLS）需要实时上报，确保及时监控。
批量上报 ：对非关键指标，利用定时任务进行批量上报，减少网络开销。

示例：批量上报实现

const metricsBuffer = [];
function addMetricToBuffer(name, value) {
  metricsBuffer.push({ name, value, timestamp: Date.now() });
  if (metricsBuffer.length >= 10) {
    flushMetrics();
  }
}
function flushMetrics() {
  fetch('/api/report-metrics', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metricsBuffer),
  });
  metricsBuffer.length = 0; // 清空缓冲区
}

上报通道

HTTP ：通过 RESTful API 上报。
日志埋点 ：将性能指标写入日志，后续通过数据分析管道处理。
Kafka ：在大型分布式系统中，使用 Kafka 提高消息处理效率。

数据清洗与汇总

在性能优化中，原始数据可能存在异常值或冗余数据，因此数据清洗是必要的一步。

数据清洗

利用 Flink 实现流式数据清洗：

过滤异常值
- 删除超出合理范围的值（如 LCP > 10s）。
- 过滤不完整的日志。
去重
- 对同一用户的重复上报数据进行去重。

示例：Flink 过滤清洗代码

DataStream<String> rawStream = env.addSource(new FlinkKafkaConsumer<>("metrics", new SimpleStringSchema(), properties));
DataStream<Metric> cleanStream = rawStream
    .map(json -> parseMetric(json)) // 转换为 Metric 对象
    .filter(metric -> metric.getValue() > 0 && metric.getValue() < 10000) // 过滤异常值
    .keyBy(Metric::getUserId)
    .distinct(); // 去重

数据汇总与存储

使用 ClickHouse 存储清洗后的数据，方便高效查询和统计：

数据表设计

CREATE TABLE performance_metrics (
    timestamp DateTime,
    user_id String,
    metric_name String,
    metric_value Float32
) ENGINE = MergeTree()
PARTITION BY toDate(timestamp)
ORDER BY (metric_name, timestamp);

写入数据 Flink 通过 JDBC 将数据写入 ClickHouse：

cleanStream.addSink(new JdbcSink<>(
    "INSERT INTO performance_metrics (timestamp, user_id, metric_name, metric_value) VALUES (?, ?, ?, ?)",
    (ps, metric) -> {
        ps.setTimestamp(1, metric.getTimestamp());
        ps.setString(2, metric.getUserId());
        ps.setString(3, metric.getMetricName());
        ps.setFloat(4, metric.getMetricValue());
    }
));

数据分析与反馈

数据统计

利用 ClickHouse 提供的高性能查询能力，统计关键指标的分布：

-- 查询 LCP 的 P90 和 P95 分布
SELECT
    quantile(0.90)(metric_value) AS P90,
    quantile(0.95)(metric_value) AS P95
FROM performance_metrics
WHERE metric_name = 'lcp';

结果可视化

使用 Grafana 创建性能监控面板，展示关键指标的实时变化。
按设备类型、网络条件等维度进行数据分组分析。
或者自定义数据服务，通过 API 获取后绘制可视化仪表盘进行数据展示

专家简历优化指南（目标 35K+ ）

核心技能

熟练掌握 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）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

自身短板与补益

项目简单，管理后台一做就是大半年，天天 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
协同编辑器（文档类、画板类）
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

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

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

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

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

微前端在分拆原子应用场景下的落地与实践
类飞书文档协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化平台架构设计与实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

前端阶段性能力与冲刺目标

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

1~3 年

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

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

3~5 年

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

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

5年+

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

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

前端前沿技术爱好者

前端性能优化核心点全面解析，高级前端专家传授涨薪高分面能力

【 初中级 】看你之前项目中都有做过性能优化相关的，请说说你都做了哪些性能优化相关的工作

首屏加载优化

首屏性能指标

减少首屏加载资源体积