` 是 React 19 里新增的用于“隐藏 UI 但保留组件状态”的工具（把部分 UI 暂时‘冻结’/‘睡眠’而不卸载状态），与 Suspense 的目的不同：Suspense 是等待数据就绪，Activity 更多是关于界面活动/状态保留与按需唤醒。官方文档对 Activity 的用途与示例有说明。[react.dev+1](https://react.dev/reference/react/Activity?utm_source=chatgpt.com)
**代码 demo（伪示意）**：
```jsx
function Tabs() {
const [active, setActive] = React.useState('home');
return (
<>
);
}
// 注：上例为示意，具体 API 以官方文档为准。
```
### React19 中的 `use` Hook 如何简化异步数据处理？
**解释**：React 19 引入/标准化了 `use()`（或类似）用于直接在组件中读取 promise/异步资源：在服务端渲染或与 Suspense 结合时，`use()` 可以直接接受 Promise，并在渲染期处理等待逻辑，从而减少显式的 `useEffect`/loading state 管理。它使得组件可以更直接地“同步”读取异步数据（在并发渲染模型与 Suspense 配合下），简化代码结构。
**示意代码**：
```jsx
// 伪示例（以官方 use() 为准）
function Profile({ userId }) {
const user = use(fetchUser(userId)); // 如果未就绪，组件会 suspend 到 Suspense
return {user.name}
;
}
```
参见对 `use()` 的文章与示例（社区/官方解读）。[Medium](https://medium.com/%40ademyalcin27/the-new-use-hook-in-react-19-a-game-changer-for-simpler-data-fetching-and-context-management-cc45cc5ebd28?utm_source=chatgpt.com)
### 说一下 React19 对表单处理的改进：`useActionState` 和 `useFormState`
**解释**：React 19 在表单与 actions 上引入了一系列 API（如 `useActionState`）来更好地描述服务器 action 的状态与表单交互：`useActionState` 帮助追踪 action 的当前状态、返回 action 可作为 `
);
}
```
### React19 中如何直接在组件中渲染 meta 标签和样式表？
**解释**：React 19 引入了对文档级 metadata 与 stylesheet 的更简单内联支持，允许在组件树中声明 ``/`<meta>`/`<link rel="stylesheet">` 等并由 React 在 render 时把它们“提升”到 `<head>` 中（hoist）。这简化了 SSR/组件化页面对 meta 信息和样式加载的管理。社区与官方教程给出具体示例。[egghead.io+1](https://egghead.io/hoist-title-and-meta-tags-in-react-19~h6z5l?utm_source=chatgpt.com)
**代码 demo（示意）**：
```jsx
function Page() {
return (
<>
<title>My Page
content
);
}
```
### React19 的 ref 作为 prop 传递有什么优势？
**解释**：React 19 开始允许在函数组件中直接使用 `ref` 作为 prop（不再必须 `forwardRef`），简化了常见场景下的 ref 转发，减少模板样板代码并提高可读性。未来版本会逐步淘汰强制 `forwardRef` 的样式（官方会提供 codemod 帮助迁移）。优点：更少的 boilerplate、更直接的 API、更易读的代码。[react.dev+1](https://react.dev/blog/2024/12/05/react-19?utm_source=chatgpt.com)
**代码 demo（React 19 风格）**：
```jsx
// React 19 允许直接接收 ref prop（示例
function MyInput({ placeholder, ref }) {
return ;
}
function Parent() {
const r = React.useRef();
return ;
}
// 说明：在老版本仍需 forwardRef；在 React 19 中该用法被支持。
```
## 各大互联网大厂工程化相关面试真题&答案
### 同一个页面三个组件请求同一个 API
**面试要点/答案要点**
- 避免重复请求：使用共享状态或请求去重（dedupe）。
- 可用方案：全局缓存（Redux/Pinia/Zustand）、请求级缓存（axios cache）、请求队列 + Promise 复用、SSR/预取。
- 细节：请求参数相同才复用，考虑缓存失效、并发冲突、错误重试、取消请求（AbortController）。
**示例代码（用 Promise 去重 + 简单缓存，适用于 fetch/axios）**
```javascript
// requestPool.js
const pool = new Map(); // key -> Promise
const cache = new Map(); // key -> { data, expire }
function genKey(url, params) {
return url + '::' + JSON.stringify(params || {});
}
export async function request(url, params = {}, opts = {}) {
const key = genKey(url, params);
const now = Date.now();
const ttl = opts.ttl || 0;
if (cache.has(key)) {
const { data, expire } = cache.get(key);
if (!expire || expire > now) return data;
cache.delete(key);
}
if (pool.has(key)) {
// 有正在进行的请求，直接复用 Promise
return pool.get(key);
}
const p = fetch(url, {
method: opts.method || 'GET',
headers: opts.headers,
body: opts.body ? JSON.stringify(opts.body) : undefined,
signal: opts.signal,
})
.then(res => {
if (!res.ok) throw new Error('Network error');
return res.json();
})
.then(data => {
if (ttl > 0) cache.set(key, { data, expire: now + ttl });
return data;
})
.finally(() => {
pool.delete(key);
});
pool.set(key, p);
return p;
}
// ExampleComponent.jsx (React)
import React, { useEffect, useState } from 'react';
import { request } from './requestPool';
function Item() {
const [data, setData] = useState(null);
useEffect(() => {
let ac = new AbortController();
request('/api/items', {}, { ttl: 5000, signal: ac.signal })
.then(setData)
.catch(err => { if (err.name !== 'AbortError') console.error(err);});
return () => ac.abort();
}, []);
return {data ? JSON.stringify(data) : 'loading'}
;
}
export default function Page() {
return (
);
}
```
面试话术：*“我们采用请求复用（Promise pooling）+ 可配置 TTL 缓存，避免同一时刻的重复网络请求，同时支持 AbortController 取消与错误边界处理。”*
### cjs / esm / umd 等区别是什么
**面试要点**
- **CJS (CommonJS)**：Node.js 传统模块（`require/module.exports`），同步加载，适用于服务器。
- **ESM (ES Modules)**：`import/export`，静态分析、支持 tree-shaking、可以异步加载，浏览器/现代打包器优先。
- **UMD (Universal Module Definition)**：兼容 AMD、CJS、全局变量，常用于发布兼容包（CDN）。
- 选型原则：库发布 -> 提供 ESM + CJS + UMD（兼容旧环境）；应用中优先 ESM。
**示例：输出多格式（Rollup 配置）**
```javascript
// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
export default [
{
input: 'src/index.js',
output: { file: 'dist/bundle.cjs.js', format: 'cjs' },
plugins: [nodeResolve(), commonjs()],
},
{
input: 'src/index.js',
output: { file: 'dist/bundle.esm.js', format: 'es' },
plugins: [nodeResolve()],
},
{
input: 'src/index.js',
output: { file: 'dist/bundle.umd.js', format: 'umd', name: 'MyLib' },
plugins: [nodeResolve(), commonjs(), terser()],
},
];
```
面试话术：*“库通常提供 ESM 以便 tree-shaking，CJS 保持 Node 兼容，UMD 提供浏览器直接引入支持。”*
### 前端权限管理的模型
**要点**
- **权限维度**：认证（AuthN） vs 授权（AuthZ）。
- **模型**：
- - RBAC（基于角色 Role-Based）—— 角色映射权限集合（常见）。
- ABAC（基于属性 Attribute-Based）—— 基于资源/用户/环境属性判断（更灵活）。
- PBAC / ACL（基于策略或访问控制列表）。
- **前端实践**：最小权限展示、路由守卫、组件级权限指令、后端返回可授权菜单/按钮、策略中心化（策略服务）。
- **防御性设计**：前端只做 UI 隐藏，关键权限必须在后端校验。
**代码示例：简单 RBAC（React + route guard）**
```java
// auth.js
export const currentUser = { roles: ['editor'] };
export const hasPermission = (permission) => {
const rolePerm = {
admin: ['read','write','delete'],
editor: ['read','write'],
guest: ['read']
};
return currentUser.roles.some(r => (rolePerm[r] || []).includes(permission));
};
// ProtectedButton.jsx
import React from 'react';
import { hasPermission } from './auth';
export default function ProtectedButton({ permission, children, ...rest }) {
if (!hasPermission(permission)) return null; // 或者disabled
return ;
}
```
面试话术：*“前端以 RBAC 做展示权限，后端做强校验；复杂场景可用 ABAC 实现细粒度策略。”*
### peerDependencies
**要点**
- `peerDependencies` 表示包需要宿主（项目）安装的依赖版本（通常用于插件/库与宿主共享同一份依赖，如 React）。
- 作用：避免库自带多份 React（避免版本冲突），让宿主控制依赖版本。
- 注意事项：发布时声明 peerDeps，配合 `peerDependenciesMeta` 标注可选项；在开发时 use `npm/yarn/pnpm` 的 `--legacy-peer-deps`/workspace 管理。
**示例 package.json**
```json
{
"name": "my-component-lib",
"version": "1.0.0",
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"peerDependenciesMeta": {
"react": { "optional": false }
}
}
```
面试话术：*“peerDependencies 用在插件/组件库，确保宿主项目安装并统一控制依赖的版本，防止重复打包与运行时冲突。”*
### pnpm 有什么优势
**要点**
- 磁盘节省：内容寻址存储（store）+ 硬链接，避免重复依赖。
- 安装速度快、严格的 node_modules 布局（避免“幽灵依赖”），workspace 支持好，适合 monorepo。
- 对包管理策略（如 `pnpmfile`、`hooks`）与锁文件健壮。
- 面试可补充：需处理 Node resolution 的某些老工具兼容问题，但现代工具兼容良好。
**示例：pnpm workspace 配置**
```bash
// pnpm-workspace.yaml
packages:
- 'packages/*'
// package.json (root)
{
"name": "monorepo",
"private": true,
"devDependencies": {}
}
```
面试话术：*“pnpm 在 monorepo 环境下能显著节省磁盘并提高安装速度，同时强制依赖声明，减少运行时问题。”*
### eslint 作用
**要点**
- 静态代码检查，保持代码风格一致、捕捉潜在错误（未使用变量、语法错误）。
- 支持自定义规则、插件（React、TypeScript、Security）。
- 在工程化中：作为 CI 门槛、pre-commit（husky + lint-staged）环节、IDE 即时反馈。
**示例：ESLint + Prettier 配置**
```javascript
// .eslintrc.js
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'react'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
rules: {
'no-unused-vars': 'warn',
'react/prop-types': 'off'
},
};
```
面试话术：*“ESLint 是代码质量第一道防线，结合 CI 和 pre-commit 能有效控制代码回退成本。”*
### browserslist
**要点**
- `browserslist` 用来声明支持的浏览器范围，影响 Babel、Autoprefixer、PostCSS、webpack/bundler 的目标转译与 polyfill。
- 写法：`"> 1%, last 2 versions, not dead"` 或针对不同环境（production/development）。
**示例：package.json 中配置**
```json
{
"browserslist": {
"production": [">0.2%", "not dead", "not op_mini all"],
"development": ["last 1 chrome version", "last 1 firefox version"]
}
}
```
面试话术：*“通过 browserslist 明确目标环境，减小 polyfill 与转译体积，同时提升性能。”*
------
### minify 代码压缩
**要点**
- 目的是减小 JS/CSS 体积、提高首屏加载速度。通常使用 terser/uglify/esbuild/terser-webpack-plugin。
- 注意：不要混淆压缩与混淆，压缩保留逻辑，混淆改变变量名；需要处理 source map、console 去除、产物调试。
**示例（webpack production 使用 terser）**
```javascript
// webpack.config.prod.js (片段)
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
terserOptions: { compress: { drop_console: true } }
})],
},
};
```
面试话术：*“生产构建使用 terser/esbuild 来压缩，同时配置去掉 console 并保留 source map 以便排查。”*
### package-lock.json
**要点**
- `package-lock.json`（npm）锁定依赖树、保证安装一致性。`pnpm-lock.yaml` / `yarn.lock` 同理。
- 不应手动编辑，CI/CD 中应提交锁文件；在库项目中可有不同策略（应用必须提交，库可视发布策略）。
**示例检查命令**
```bash
# 查看被锁定版本
npm ci # 保证使用 lockfile 安装，适合 CI
npm audit # 安全审计
```
面试话术：*“锁文件保证环境可复现，CI 用* `*npm ci*` *强制严格安装。”*
### serverless
**要点**
- Serverless：按需计算（函数）平台（AWS Lambda、Vercel、Netlify、Cloud Functions），免运维，按调用付费。
- 适用场景：事件驱动、API 后端、轻量短时任务；不适合长时任务（需要注意冷启动、资源上限、并发限制）。
- 工程要点：无状态、快速启动、合理冷启动优化、并发与超时、监控与本地调试（serverless-offline）。
**示例：简单 AWS Lambda handler（Node）**
```javascript
// handler.js
exports.handler = async (event) => {
const name = event.queryStringParameters?.name || 'world';
return {
statusCode: 200,
body: JSON.stringify({ msg: `hello ${name}` }),
};
};
```
**Vercel Serverless（api/hello.js）**
```javascript
// api/hello.js
export default function handler(req, res) {
res.status(200).json({ hello: 'world' });
}
```
面试话术：*“Serverless 省运维成本，但需要设计无状态、短时任务和冷启动优化策略，CI/CD 与本地模拟是关键。”*
### 常见的 Loader（你用过哪些）
**要点**
- Webpack Loader 用于对模块进行转换：`babel-loader`, `ts-loader`, `css-loader`, `style-loader`, `sass-loader`, `file-loader`（v5 推荐 asset modules）, `url-loader`（已废弃），`vue-loader`。
- 使用场景举例：把 TS 转为 JS，编译 SASS，处理图片、字体。
**示例 webpack loader 配置**
```javascript
module.exports = {
module: {
rules: [
{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|jpg|svg)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 8192 } } }
]
}
};
```
面试话术：*“Loader 是文件到模块的转换器，我常用 babel-loader/ts-loader/vue-loader/css-loader/sass-loader 处理编译与资源。”*
### 常见的 Plugin（见过哪些）
**要点**
- Webpack 插件用于扩展构建流程：`HtmlWebpackPlugin`, `MiniCssExtractPlugin`, `DefinePlugin`, `HotModuleReplacementPlugin`, `TerserPlugin`, `CopyWebpackPlugin`, `ForkTsCheckerWebpackPlugin`。
- 插件职责更广：影响构建生命周期、产物、输出等。
**示例（常见插件配置）**
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }),
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
new (require('webpack')).DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) })
]
};
```
面试话术：*“Plugin 能干预打包生命周期，常见插件用于 HTML 注入、提取 CSS、并行类型校验、代码压缩等。”*
### Loader 和 Plugin 的区别
**要点**
- **Loader**：用于把文件转换为模块（链式、针对单个模块），例如把 SASS -> CSS -> JS。
- **Plugin**：扩展打包器生命周期（全局影响），可以处理多个文件、控制输出、做优化、注入行为。
- 面试总结句子：*Loader = 文件级转换，Plugin = 构建流程级别扩展。*
**简要示例**：想把 `.foo` 文件转换为 JS 用 Loader；想在每次构建后生成报告用 Plugin。
### Webpack 构建流程简单说一下
**要点：六大阶段**
1. 解析配置（Configuration）
2. 初始化 Compiler（Compiler）并注册插件
3. 从 entry 开始构建模块依赖图（Compilation）
4. 对模块应用 loader 转换，收集依赖
5. 进行优化（tree-shaking、code splitting、minify）
6. 输出 assets（emit）
- 插件可以 tap 到这些钩子影响流程。
**面试话术**：*“Webpack 从配置出发创建 Compiler，遍历入口文件构建依赖图、对模块应用 Loader、使用 Plugin 做优化与打包，最后 emit 产物。”*
### 使用 webpack 开发时可以提高效率的插件
**常用插件**
- `HtmlWebpackPlugin`（自动注入）
- `ForkTsCheckerWebpackPlugin`（TS 类型校验异步）
- `HotModuleReplacementPlugin`（HMR）
- `webpack-dev-server` / `webpack-dev-middleware`（本地开发）
- `eslint-webpack-plugin`（开发时即时 lint）
- `SpeedMeasurePlugin`（构建性能分析）
**示例：dev config**
```javascript
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
plugins: [
new ForkTsCheckerWebpackPlugin(),
new (require('webpack')).HotModuleReplacementPlugin()
],
devServer: { hot: true, port: 3000 }
};
```
面试话术：*“结合 HMR、异步类型检查和 lint 插件可以保持开发流畅且保证质量。”*
### 文件指纹是什么？怎么用？
**要点**
- 文件指纹（hash）用于静态资源长缓存（Cache busting）。常见：`[contenthash]`、`[chunkhash]`、`[hash]`。
- 实践：生成带 hash 的文件名并在 HTML 中引用，CDN 缓存策略使用长缓存，变更时更新文件名。
**示例 webpack output**
```javascript
output: {
filename: '[name].[contenthash:8].js',
assetModuleFilename: 'assets/[name].[contenthash:8][ext]'
}
```
面试话术：*“用 contenthash 保证只在内容变化时文件名变化，配合缓存策略大幅提升前端性能。”*
### 如何优化 Webpack 构建速度？
**要点（实战清单）**
- 使用 `cache`（filesystem cache）
- 使用 `thread-loader` / `esbuild-loader` 或 `swc-loader` 替代 babel 在非复杂转译下加速
- 开启 `parallel`（terser 的并行）
- 使用 `include/exclude` 精准匹配 loader 范围
- 按需编译（DLL、模块联邦、持久化缓存）
- 使用 `source-map` 选择（开发 cheaper map）
- 减少 polyfills、合理拆分 vendor
**示例：开启 filesystem cache 与 esbuild-loader**
```javascript
module.exports = {
cache: { type: 'filesystem', buildDependencies: { config: [__filename] } },
module: {
rules: [
{ test: /\.tsx?$/, loader: 'esbuild-loader', options: { loader: 'tsx', target: 'es2017' } }
]
}
};
```
面试话术：*“优先开启 filesystem cache 和用更快的编译器（esbuild/swc），再结合按需 loader 配置与并行化即可显著降构建时间。”*
### 写过 Loader 吗？缩写 loader 思路
**要点**
- Loader 是一个导出函数：接收源内容，返回转换后的内容（或异步回调）。
- 思路：解析输入 -> 进行 transform（babel transform / regex / parse AST）-> 返回 JS module（module.exports / export default）。
- 注意 sourceMap 支持、异步处理、cacheable 声明。
**示例：一个简单的 loader（把** `**// @upper**` **标记的字符串转为大写）**
```javascript
// loaders/upper-loader.js
module.exports = function (source, map) {
this.cacheable && this.cacheable();
const result = source.replace(/\/\/\s*@upper\n([\s\S]*?)\n\/\/\s*@end/gi, (_, txt) => txt.toUpperCase());
this.callback(null, result, map);
};
// webpack config
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: [{ loader: require.resolve('./loaders/upper-loader') }] }]
}
};
```
面试话术：*“写 loader 的关键是处理输入输出与 sourceMap，通常结合 AST（babel/parser）进行复杂转换。”*
------
### 写过 Plugin 吗？编写 Plugin 思路
**要点**
- Plugin 是一个类/函数，`apply(compiler)` 内注册钩子（compiler.hooks）。
- 思路：识别希望插手的阶段（比如 compilation, emit），使用同步/异步 tap 方法，并处理 assets 或信息。
**示例：简单插件 — 在 emit 时注入 banner 文件**
```javascript
// plugins/banner-plugin.js
class BannerPlugin {
constructor(options = {}) { this.options = options; }
apply(compiler) {
compiler.hooks.emit.tapAsync('BannerPlugin', (compilation, callback) => {
const banner = this.options.banner || 'Built by BannerPlugin';
compilation.assets['banner.txt'] = {
source: () => banner,
size: () => banner.length
};
callback();
});
}
}
module.exports = BannerPlugin;
// webpack.config.js
const BannerPlugin = require('./plugins/banner-plugin');
module.exports = { plugins: [new BannerPlugin({ banner: 'Hello from build' })] };
```
面试话术：*“Plugin 本质是订阅 webpack 钩子，能全局影响流程，适合跨模块或构建产物级别的操作。”*
### Babel 原理
**要点**
- Babel 工作流程：parse -> AST -> transform（plugin/transpiler，使用 visitor 修改 AST）-> generate（输出代码 & sourceMap）。
- 插件结构：visitor（节点访问器）对 AST 节点进行替换/插入，preset 是一组插件的集合。
- Babel 的目标：把现代 JS 转为目标环境兼容的 JS（polyfill 与 transform 分开）。
**示例：自定义 Babel plugin（把** `**log('x')**` **->** `**console.log('x')**`**）**
```javascript
// babel-plugin-to-console.js
module.exports = function ({ types: t }) {
return {
visitor: {
CallExpression(path) {
if (t.isIdentifier(path.node.callee, { name: 'log' })) {
path.node.callee = t.memberExpression(t.identifier('console'), t.identifier('log'));
}
}
}
};
};
```
使用：
```javascript
// .babelrc
{ "plugins": ["./babel-plugin-to-console.js"] }
```
面试话术：*“Babel 是 AST 转换器，插件通过访问器模式在 AST 上做变换，最后再生成代码与 sourcemap。”*
### source map 是什么？生产环境怎么用？
**要点**
- source map 映射编译/压缩后的代码到源代码，便于调试。
- 生产使用策略：
- - 选用合适的映射类型（`source-map` / `hidden-source-map` / `nosources-source-map`）。
- 若担心源码泄露，使用 `hidden-source-map` 并只在 Sentry/错误收集工具上上传 map，不在浏览器可直接访问。
- 注意：公开 source map 可能泄露源码或注入安全风险。
**示例（webpack）**
```javascript
// dev
devtool: 'eval-cheap-module-source-map'
// prod (不公开，但上传到错误收集)
devtool: 'hidden-source-map'
```
面试话术：*“生产可使用 hidden-source-map 上传到错误监控（Sentry），避免直接暴露源码同时保留可追踪性。”*
### 文件监听原理
**要点**
- 两种方式：**轮询(polling)** 与 **文件系统事件**（inotify on Linux, fsevents on macOS, ReadDirectoryChangesW on Windows）。
- Node.js 使用 `fs.watch` 或 `fs.watchFile`（后者是轮询），工具如 webpack-dev-server / chokidar 使用更稳定的跨平台库 chokidar。
- 面试补充：大量文件时轮询耗资源，inotify 有文件数上限 (可调整 `fs.inotify.max_user_watches`)。
**示例（chokidar）**
```javascript
const chokidar = require('chokidar');
const watcher = chokidar.watch('./src', { ignored: /node_modules/ });
watcher.on('change', path => console.log('changed', path));
```
面试话术：*“一般用 chokidar 做跨平台监听，优先使用文件事件，轮询仅作 fallback 或 CI 环境下使用。”*
### Webpack 热更新（HMR）原理
**要点**
- HMR：在不刷新页面的情况下替换、添加或删除模块。
- 流程：Dev server 通过 websocket 通知客户端有更新 -> 客户端获取更新模块 -> 运行模块的 accept 回调（module.hot.accept） -> 局部替换模块并执行更新逻辑 -> 若不能处理则触发全页 reload。
- HMR 能保持应用状态（在组件层面实现），适合 UI 开发。
**示例（React + webpack HMR）**
```jsx
// index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render();
if (module.hot) {
module.hot.accept('./App', () => {
const NextApp = require('./App').default;
root.render();
});
}
```
面试话术：*“HMR 将模块热替换并调用模块的 accept 回调，能保留应用内状态，提升开发效率。”*
### Webpack 事件机制了解吗？
**要点**
- Webpack 使用 Tapable（类似事件/钩子系统），提供同步/异步钩子（tap/tapAsync/tapPromise）。
- 常见钩子：`compiler.hooks.beforeRun`, `compiler.hooks.emit`, `compilation.hooks.optimizeChunks` 等。
- Plugin 利用这些钩子改变构建流程或产物。
**示例（插件内 tap）**
```javascript
compiler.hooks.emit.tapAsync('MyPlugin', (compilation, cb) => {
// 修改 compilation.assets
cb();
});
```
面试话术：*“Webpack 钩子基于 Tapable，Plugin 通过 tap 注册不同阶段的逻辑。”*
### 了解 Webpack5 吗，相比 Webpack4 有哪些提升？
**要点**
- 主要提升：
- - 更好的持久化 cache（filesystem cache）提升构建速度。
- 内置 Module Federation（实验/插件生态），改善微前端。
- 更现代的 asset modules（替代 file/url loaders）。
- 更严格的默认性能/Tree shaking 改进。
- 更小的 runtime 与优化机制。
- 面试话术：*“Webpack5 将性能与模块共享作为核心改进，尤其是持久化 cache 与 Module Federation 对大型项目受益显著。”*
### 模块联邦（Module Federation）理解
**要点**
- Module Federation：Webpack5 特性，允许在运行时动态加载并共享多个独立构建的模块（micro-frontends）。
- 优点：独立部署、共享 runtime/库，按需加载远程模块。
- 注意事项：共享依赖版本协调、跨域/运行时加载策略、安全（验证远端模块来源）。
**示例（host & remote 简要）**
```javascript
// remote webpack config
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: { './Button': './src/Button' },
shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true } }
});
// host webpack config
new ModuleFederationPlugin({
name: 'host',
remotes: { remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js' },
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
});
// host usage
const RemoteButton = React.lazy(() => import('remoteApp/Button'));
```
面试话术：*“Module Federation 支持运行时共享模块，便于团队独立部署子应用并共享核心库。”*
### 什么是 Webpack？它的作用是什么？
**要点**
- Webpack 是模块打包器（module bundler），从入口构建依赖图并输出静态资源（JS/CSS/图片）。
- 作用：模块化、资源处理（loader）、构建优化（plugin）、代码分割、tree-shaking、生产构建。
面试话术：*“Webpack 把前端项目的各种资源当模块来处理并生成优化后的静态资源，以支持现代前端开发流程。”*
------
### Webpack 中有哪些核心概念？
**要点列表**
- Entry：应用入口
- Output：构建输出
- Module & Rules（Loader）：模块及如何转换它
- Plugins：扩展构建流程
- Chunk：按需加载单元
- Asset：静态资源
- Dependency Graph：依赖图
- Mode：production/development
面试话术：*“理解 entry/module/plugin/chunk/output 这些基本概念能帮助掌握 webpack 的整体构建模型。”*
### Webpack 的 mode 是什么
**要点**
- `mode` = `'development' | 'production' | 'none'`，配置默认优化项（如 uglify、tree shaking）。
- `development`：更快构建、保留调试信息；`production`：启用优化、压缩、性能优化。
**示例**
```javascript
module.exports = { mode: process.env.NODE_ENV || 'development' };
```
面试话术：*“mode 决定内置优化集合，CI 中请显式指定 production 以获得体积与性能优化。”*
------
### 什么是代码分割（Code Splitting）？如何在 Webpack 中实现？
**要点**
- 代码分割：将包拆成多个 bundle，按需加载（减少首屏体积）。
- 实现方式：
- - 静态：entry 分割（multiple entries）
- 动态：`import()`（动态 import）实现懒加载
- CommonsChunk / SplitChunksPlugin（提取 vendor）
- 场景：路由懒加载、按需组件、按功能拆包。
**示例：React 路由懒加载 + webpack splitChunks**
```jsx
// App.jsx
import React, { Suspense } from 'react';
const Home = React.lazy(() => import('./Home'));
const Admin = React.lazy(() => import('./Admin'));
function App(){
return (
Loading...}>
{/* 假设基于路由 */}
);
}
export default App;
// webpack optimization
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' }
}
}
}
```
面试话术：*“首屏加载最小化、路由/组件按需加载和 vendor 提取是代码分割的三大常见策略。”*
## 各大互联网大厂性能优化相关面试真题&答案
### 性能优化之项目初始化
**说明 / 关键点**
- 项目初始化决定了运行时 & 打包基线：选择构建工具（Vite/webpack/Rollup）、模块系统（ESM/CJS）、语言（TS）、按需加载策略、第三方库替换（例如 lodash -> lodash-es / dayjs 替代 moment）。
- 约定：开启 ESModule、tree-shakeable 包、按需引入 UI 库、开 dev/prod config 分离。
- 初始工程需包含性能可观测点（Lighthouse、Sourcemap、bundle analyzer）及 CI 流程检查体积阈值。
**建议步骤**
1. 选择 Vite（开发启动快）或 modern webpack（如果需要复杂插件）。
2. 使用 ESM 包与 `sideEffects` 在 package.json。
3. 初始引入 bundle 分析、HMR、缓存策略（esbuild / terser）、压缩。
4. 将可选大型依赖列为外部（CDN/动态加载）。
5. 配置 CI 下的体积检测（比如 `size-limit`）。
**代码 demo（Vite + React + TypeScript）**
```js
package.json
{
"name": "perf-starter",
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"analyze": "vite build --watch --mode analyze"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"vite": "^5.0.0",
"typescript": "^5.0.0",
"esbuild": "^0.18.0",
"rollup-plugin-visualizer": "^5.5.0"
}
}
vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig(({ mode }) => ({
plugins: [
react(),
// 在 analyze 模式下开启可视化
...(mode === 'analyze' ? [visualizer({ open: true, gzipSize: true })] : [])
],
build: {
target: 'es2018',
sourcemap: mode === 'development',
// chunkSizeWarningLimit 可调整
chunkSizeWarningLimit: 1000,
rollupOptions: {
output: {
manualChunks: {
// 初始公共chunk示例
vendor: ['react', 'react-dom']
}
}
}
}
}));
```
示例 CI 检查（`size-limit`）:
```bash
npm i -D size-limit @size-limit/preset-small-lib
```
`package.json` 加入：
```json
"size-limit": [
{
"path": "dist/index.js",
"limit": "200 KB"
}
]
```
### 性能优化之辅助分析插件
**说明 / 关键点**
- 分析工具用于定位体积热点与慢点：`webpack-bundle-analyzer`、`rollup-plugin-visualizer`、`source-map-explorer`、`esbuild --metafile`、Chrome DevTools Performance、Lighthouse。
- 结合 sourcemaps 能把 bundle 中的代码映射回源代码，找出大体积依赖、重复模块、未 tree-shaken 代码。
**代码 demo（Webpack & Vite 两个常见例）**
Vite（使用 rollup visualizer）—— 已在上题 `vite.config.ts` 演示。
Webpack:
```bash
npm i -D webpack-bundle-analyzer
```
`webpack.config.js`:
```javascript
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
// ...entry/output
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'report.html',
openAnalyzer: false
})
]
};
```
使用 `source-map-explorer`：
```bash
npm i -D source-map-explorer
# 构建之后：
npx source-map-explorer dist/assets/*.js
```
Chrome DevTools/Lighthouse：在真实设备/模拟慢网下跑 Lighthouse，并结合 Performance Trace 来找 First Contentful Paint / Long Tasks。
### 性能优化之缩小范围(上)
**说明 / 关键点**
- “缩小范围” 的上层策略是从宏观定位到微观：先用 Lighthouse / bundle analyzer 定位是网络 / bundle 体积 / 渲染 / JS 执行问题，再逐步聚焦到具体页面或模块。
- 上层方法：全量采样 -> 选定“慢页面” -> 打开 DevTools（Network/Performance/Memory）抓取 trace。
**步骤**
1. 收集数据：用户热力图、页面访问量、性能埋点（RUM）。
2. 使用 Lighthouse 报表找出症状（如 TTFB / LCP / CLS / FCP）。
3. 根据访问量和影响度确定优化优先级（hot path 优先）。
**代码 demo — 采集与分析示例（简单 RUM）**
`src/rum.ts`
```javascript
// 简单 RUM 上报示例，仅用于采样
export function reportPerf() {
if (!('performance' in window) || Math.random() > 0.05) return; // 5% 采样
window.addEventListener('load', () => {
requestAnimationFrame(() => {
const timing = performance.timing as any;
const data = {
// 注意：Navigation Timing Level 2 推荐使用 PerformanceNavigationTiming
loadTime: timing.loadEventEnd - timing.navigationStart,
fcp: performance.getEntriesByType('paint').find(p=>p.name==='first-contentful-paint')?.startTime
};
navigator.sendBeacon('/rum', JSON.stringify(data));
});
});
}
```
后台只需简单接收并汇总慢页面。
### 性能优化之缩小范围（中）
**说明 / 关键点**
- 中层技术：用 Performance Profiling 的 flame chart 定位 Long Tasks、用 Coverage（Coverage Tab）定位未使用代码/样式、用 Lighthouse 的 “Largest Contentful Paint element” 找到关键渲染资源。
- 热点聚焦后可以用 `--inspect` / `DevTools Profiler` 结合 CPU profile 来找函数占用。
**步骤 & 命令**
1. DevTools → Performance 录制页面加载（选择“Capture DevTools Timeline”），分析 Long Tasks。
2. DevTools → Coverage，Reload with Coverage，查看未使用的 JS/CSS。
3. 若使用 React，开启 Profiler 并在开发环境定位频繁 re-render 的组件。
**示例：在 React 中用 Profiler**
```jsx
import React, { Profiler } from 'react';
function onRenderCallback(id, phase, actualDuration) {
// 将数据上报用于分析
console.log({ id, phase, actualDuration });
}
export default function App() {
return (
{/* ... */}
);
}
```
### 性能优化之缩小范围（下）
**说明 / 关键点**
- 下层细化：拿到具体模块后，拆分检查依赖链（import graph）、重复依赖（多版本的 lodash）、第三方大包（charts、i18n、date libs）。
- 常用工具：`npm ls `、`depcruise`（dependency-cruiser）来检视依赖图，手动替换或将大库外部化（CDN 或动态 import）。
**示例脚本：检查多版本**
```bash
# 检查 lodash 多版本
npm ls lodash
# 或 pnpm why lodash
pnpm why lodash
```
**替换示例**
- 将 `moment` 替换为 `dayjs`：
```javascript
// before
import moment from 'moment';
console.log(moment().format());
// after
import dayjs from 'dayjs';
console.log(dayjs().format());
```
### 性能优化之忽略模块
**说明 / 关键点**
- 忽略（exclude/ignore）不需要打包的模块：例如测试工具、dev-only 模块、大型 polyfills（按需加载）或 server-only 代码。
- Webpack: `IgnorePlugin`；Rollup / Vite: `external` config；也可以在 `package.json` 的 `browser` 字段或条件导出中排除平台不适用模块。
**代码 demo（webpack IgnorePlugin）**
```javascript
const webpack = require('webpack');
module.exports = {
plugins: [
// 忽略 moment 的 locales（常见优化）
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
})
]
};
```
**Vite / Rollup 外部化**
`vite.config.ts`
```javascript
export default defineConfig({
build: {
rollupOptions: {
external: ['some-node-only-lib']
}
}
});
```
------
### 性能优化之缓存与线程（上下）
**说明 / 关键点**
- 缓存：浏览器端（长缓存策略 + content-hash）、Service Worker（Cache API）、HTTP cache headers（Cache-Control, ETag）、构建缓存（esbuild/webpack persistent cache）。
- 线程：将 CPU 密集型任务移到 Web Worker；使用线程池（worker pool）或 node side 的 worker_threads；在构建工具中使用多线程 loader（thread-loader / esbuild 并行）。
- 上下（上）：构建时缓存（faster incremental builds）；（下）：运行时缓存（静态资源 & SW & localStorage）。
**代码 demo — Web Worker 计算 hash（避免主线程卡顿）**
`src/hash.worker.ts`（使用 Vite 支持 worker）
```javascript
// hash.worker.ts
self.onmessage = async (e) => {
const file = e.data as ArrayBuffer;
// 在 worker 中计算（示例使用 SubtleCrypto）
const digest = await crypto.subtle.digest('SHA-256', file);
const hex = Array.from(new Uint8Array(digest)).map(b => b.toString(16).padStart(2,'0')).join('');
postMessage(hex);
};
```
在主线程中使用：
```javascript
const worker = new Worker(new URL('./hash.worker.ts', import.meta.url));
worker.onmessage = (e) => console.log('hash', e.data);
worker.postMessage(arrayBuffer);
```
**构建缓存（Vite）**
`vite.config.ts`
```javascript
export default defineConfig({
cacheDir: 'node_modules/.vite_cache',
build: {
// 开启 esbuild 的 incremental/incremental 默认行为或使用 vite 内建缓存
}
});
```
**thread-loader（webpack）**
```javascript
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
use: [
'thread-loader',
'babel-loader'
],
exclude: /node_modules/
}
]
}
}
```
### 性能优化之压缩
**说明 / 关键点**
- 代码压缩（JS/CSS）：Terser/Esbuild（esbuild 更快但 terser 在某些场景有更细腻压缩选项）。开启 `drop_console`、`pure_funcs`。
- 传输压缩：gzip / brotli（服务器在构建时预压缩静态资源可提升性能）；HTTP/2+ 更有利于多个小文件传输。
- 压缩图片：用 WebP、AVIF，并在构建或上传管道压缩（sharp、imagemin）。
- 体积对比：构建后产生 `.br` / `.gz` 文件，配合 nginx 配置。
**代码 demo — Vite 插件预压缩 & nginx 配置**
安装预压缩插件：
```bash
npm i -D vite-plugin-compress
vite.config.ts
import compress from 'vite-plugin-compress';
export default defineConfig({
plugins: [
compress({ brotli: true, gzip: true })
],
build: { /* ... */ }
});
```
`nginx` 示例（启用 pre-compressed 文件）
```nginx
server {
location / {
root /var/www/dist;
gzip on;
gzip_static on; # 使用预压缩 .gz
brotli on;
brotli_static on; # 如果有预压缩 .br
add_header Cache-Control "public, max-age=31536000, immutable";
}
}
```
### 性能优化之样式
**说明 / 关键点**
- CSS 优化包含：Critical CSS（抽取关键首屏样式内联）、按需加载样式、移除未用样式（PurgeCSS / uncss）、CSS 分割（按路由拆分）、避免大范围选择器与深层嵌套（影响渲染性能）。
- 用 CSS-in-JS 或 CSS Modules 可以 scope 样式，减少全局覆盖查找成本；但要注意运行时开销。
- 减少使用 `:root` 过多变量、避免 expensive CSS（box-shadow、大量复杂选择器）、减少 layout-triggering 属性变更（width/height -> transform）。
**代码 demo — Critical CSS 与 Purge（Tailwind 示例）**
Tailwind + purge（tailwind.config）
```javascript
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
// ...
}
```
抽取 Critical CSS（构建后用 `critters` 或 `critical`）
```bash
npm i -D critters-webpack-plugin
```
`webpack.config.js`:
```javascript
const Critters = require('critters-webpack-plugin');
module.exports = {
plugins: [
new Critters({
// inline: true,
preload: 'swap'
})
]
}
```
按路由加载样式（React + dynamic import）
```javascript
const LazyPage = React.lazy(() => import('./page-with-big-css'));
```
该页面的 CSS 会随 chunk 被加载。
------
### 性能优化之环境变量（上）
**说明 / 关键点**
- 环境变量影响构建行为与打包结果（如是否启用 mock、是否开启 source map、API 域名等）。
- 在构建时通过 define 插件（Vite 的 `define` / webpack 的 DefinePlugin）注入常量，允许构建器做 Dead Code Elimination（DCE）。
- 使用 `process.env.NODE_ENV === 'production'` 作为分支可被 tree-shaking 删除不需要的代码块。
**示例（Vite define）**
`vite.config.ts`
```javascript
export default defineConfig(({ mode }) => ({
define: {
__BUILD_TIME__: JSON.stringify(new Date().toISOString()),
__APP_ENV__: JSON.stringify(process.env.APP_ENV || mode)
}
}));
```
**在代码中使用**
```javascript
if (process.env.NODE_ENV !== 'production') {
console.log('debug only');
}
// 或者使用 define 常量
if (__APP_ENV__ === 'development') {
// dev only
}
```
这样生产构建会把分支去掉，减少体积。
### 性能优化之环境变量（下）
**细节与实战：条件导入 / 条件打包**
- 利用条件编译（Define + dead code elimination）避免引入大型 dev-only lib（例如：只在 dev 引入 `why-did-you-render`）。
- 使用 `import()` 在运行时按需加载环境相关模块。
- 对第三方库采用 externals/CDN 在生产构建时替换。
**代码 demo — dev-only 包**
```javascript
if (process.env.NODE_ENV === 'development') {
// 这里使用 dynamic import，生产构建下该分支被去掉
import('why-did-you-render').then(wdyr => {
// init
});
}
```
在 webpack/Vite 中开启 Terser/Esbuild 的 DCE 会消除掉这些分支。
### 性能优化之treeshaking
**说明 / 关键点**
- Treeshaking 的前提：使用 ES module（`import`/`export`）与支持 treeshake 的打包器（Rollup/Vite/webpack 在 production 模式）。
- package.json 的 `sideEffects` 字段需正确标识模块是否有副作用（false 或列出有副作用的文件）。
- 避免使用会阻止 tree-shaking 的语法（例如：`require()`、动态构建的大量 `export *`、对整个库做 `import * as` 然后引用属性会阻碍某些优化）。
- 优化第三方库：优先选择提供 ESM 的包（`lodash-es` 而非 `lodash`）。
**代码 demo**
`package.json`
```json
{
"sideEffects": [
"*.css",
"src/some-global-polyfill.js"
]
}
```
使用 `lodash-es`：
```javascript
import { debounce } from 'lodash-es';
```
避免 `import * as _ from 'lodash'`，会导致无法去掉没用的函数。
### 性能优化之代码分割（上）
**说明 / 关键点**
- 代码分割分为路由级分割、组件级分割、库分割（vendor）三类。
- 动态 import（`import()` / React.lazy）是最常用方式；手动设置 `manualChunks` 进行长期缓存优化。
- 把首次渲染所需的最少代码放在第一页，其它通过懒加载按需拉取。
**示例（React + Vite）**
```javascript
// route-based lazy
import React, { Suspense } from 'react';
const Home = React.lazy(() => import('./pages/Home'));
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
function App() {
return (
loading}>
{/* 根据路由加载 */}
);
}
```
`vite.config.ts` 手工分割：
```javascript
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
if (id.includes('react')) return 'vendor_react';
return 'vendor';
}
}
}
}
}
});
```
### 性能优化之代码分割（下）
**更深入：预加载、预取、优先级控制**
- 使用 `` 或 `` 控制资源优先级。
- React Router 等可以在空闲时间提前加载下一个页面的 chunk（link prefetch 或 `requestIdleCallback`）。
- 注意：过度预加载会浪费带宽，应基于访问概率做智能预取。
**代码 demo — 在路由改变前预fetch**
```javascript
// 简单的 prefetch util
export function prefetchComponent(loader: () => Promise) {
if ('requestIdleCallback' in window) {
(window as any).requestIdleCallback(() => {
loader();
});
} else {
setTimeout(() => loader(), 2000);
}
}
// 用法：在 hover 或导航预测时调用
button.addEventListener('mouseover', () => prefetchComponent(() => import('./Dashboard')));
```
### 性能优化之提取公共组件（上）
**说明 / 关键点**
- 公共组件提取分为代码级（common chunk / shared library）和组件库（monorepo 的 shared 包）。
- 好处：减少重复代码、便于缓存和复用。缺点：过度共享会增加首屏体积（如果把不常用组件放公共 chunk）。
- 方式：手动 `manualChunks`、使用 monorepo + pnpm workspace 抽出 `@company/ui` 包、或在运行时 CDN 加载公共 UI 库。
**代码 demo — monorepo shared package（pnpm workspace）**
仓库结构：
```javascript
/packages
/ui (shared components)
/app (main app depends on @company/ui)
packages/ui/package.json
{
"name": "@company/ui",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"sideEffects": false
}
```
组件示例：
```tsx
// packages/ui/src/Button.tsx
import React from 'react';
export const Button = (props) => ;
```
主应用直接 `import { Button } from '@company/ui'`，构建工具会把它作为单独包处理，利于复用与缓存。
### 性能优化之提取公共组件（中）
**策略 & 实践**
- 按需打包共享组件（shared chunk），把稳定且常用的组件放到 vendor/chunk，减少多次重复加载。
- 做「按需导出」：不要把整个 component 库以一个巨型 bundle 导出，支持按文件导入（`import { Button } from '@company/ui'` 或 `import Button from '@company/ui/Button'`）。
- 在构建时利用 `splitChunks`（webpack）或 `manualChunks`（rollup/vite）把常用组件单独分离。
**webpack splitChunks 示例**
```javascript
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
commons: {
name: 'commons',
test: /[\\/]src[\\/]components[\\/]/,
minChunks: 2,
priority: 10
}
}
}
}
```
### 性能优化之提取公共组件（下）
**进阶：运行时共享（Module Federation / microfrontends）**
- 对于大型多团队项目，可使用 Module Federation（webpack 5）或微前端框架（single-spa/Wujie）实现运行时共享组件、按需加载并互相复用。
- 好处：团队独立部署、减小单体包；坏处：复杂度高、版本兼容挑战。
**Module Federation 简单示例（host/remote）**
remote `webpack.config.js`:
```javascript
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
]
};
```
host:
```javascript
new ModuleFederationPlugin({
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
});
```
Host 可直接动态加载 remote 的 Button 组件。
## 各大互联网大厂小程序相关面试真题&答案
### 微信小程序的实现原理
**要点（概念层面）**
- 小程序是一个运行在微信容器（WeChat runtime）内的轻量级应用。它由两部分组成：
- - **视图层（View）**：WXML + WXSS（类似 HTML/CSS）在微信内置渲染引擎里渲染，是受限的 DOM。
- **逻辑层（Logic）**：JS 运行在 V8/C++ 等环境里，与视图层通过**消息机制（异步桥）**交互（通过 setData / 事件回传等）。
- **组件化 + 沙箱**：每个小程序被沙箱化运行，权限受限制（API 由微信提供），资源使用受限（包体、API 调用等）。
- **网络/存储**：网络请求走 wx.request（有域名白名单），本地有缓存（wx.setStorageSync）、文件系统（wx.getFileSystemManager）。
- **分包/按需加载**：支持分包加载（主包 + 分包 + 子包），可优化首包体积。
- **生命周期与页面栈**：小程序维护页面栈（最多10层），路由 API 在容器层实现（navigateTo、redirectTo 等）。
**简短图示（文字）**
用户操作 → 微信容器 → 视图层渲染 + 逻辑层 JS 处理 → 通过异步消息桥修改视图（setData）或调用原生 API（支付、定位等）
**代码演示（最小运行示例）**
项目结构：
```bash
/minapp-demo
/pages/index/index.wxml
/pages/index/index.js
/app.json
/app.js
/app.wxss
app.json
{
"pages": ["pages/index/index"],
"window": {
"navigationBarTitleText": "示例"
}
}
app.js
App({
onLaunch() {
console.log('App onLaunch');
// 初始化逻辑，例如获取用户授权、读取本地缓存等
}
});
pages/index/index.wxml
{{msg}}
pages/index/index.js
Page({
data: { msg: 'Hello 小程序' },
onTap() {
// 逻辑层修改数据后，视图层刷新
this.setData({ msg: '数据已更新：' + Date.now() });
}
});
app.wxss
.container { padding: 20px; }
```
### 微信小程序的支付流程
**要点（高层流程）**
1. 小程序调用 `wx.login` 获取 `code`（临时登录凭证），或直接走支付流程时先登录拿到 user info（非必需）。
2. 小程序向自己后端发起“创建支付订单”请求（包含订单信息、用户标识等）。
3. 后端使用微信商户平台的 API（统一下单 API：`/pay/unifiedorder`）向微信服务器申请生成 `prepay_id`。后端需要签名（商户 key）、商户号、appId、notify_url 等。
4. 微信返回 `prepay_id` 给后端，后端将所需参数（nonceStr、timeStamp、package=prepay_id、signType、paySign）签名后返回给小程序。
5. 小程序调用 `wx.requestPayment({...})` 使用后端返回的参数拉起支付界面。
6. 支付完成后，微信服务器异步回调商户后端的 `notify_url`（需校验签名并处理订单状态）。
7. 后端更新订单状态并通知小程序/前端（可通过轮询/推送/消息）。
**关键点与注意事项**
- 所有与商户密钥相关的签名必须在后端完成（不能在客户端做），商户 key 不能暴露。
- `notify_url` 必须可公网访问且可校验签名。
- 小程序 prepay 流程需要在微信商户平台配置小程序 appId、商户号、API key、证书（部分接口）。
- 调试时使用沙箱或真机环境，微信开发者工具支持模拟 `wx.requestPayment` 但真实支付需真机。
**示例代码（后端 Node + 小程序端）**
后端：`server.js`（Express + axios + xml2js）
这是最简示例，真实项目要做签名、错误处理、幂等、证书、回调验证等更严谨的实现。
```javascript
// server.js
const express = require('express');
const axios = require('axios');
const xml2js = require('xml2js');
const crypto = require('crypto');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.text({ type: '*/xml' }));
app.use(express.json());
const MCH_ID = 'your_mch_id';
const APP_ID = 'your_appid';
const API_KEY = 'your_api_key';
const UNIFIED_ORDER_URL = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
// util: build sign (MD5 uppercase)
function buildSign(params) {
const ordered = Object.keys(params).sort().map(k => `${k}=${params[k]}`).join('&');
return crypto.createHash('md5').update(ordered + `&key=${API_KEY}`).digest('hex').toUpperCase();
}
function toXml(obj) {
const builder = new xml2js.Builder({ headless: true, rootName: 'xml' });
return builder.buildObject(obj);
}
function parseXml(xml) {
return xml2js.parseStringPromise(xml, { explicitArray: false, trim: true });
}
// 创建预支付订单
app.post('/create-unified-order', async (req, res) => {
const { openid, out_trade_no, total_fee, body } = req.body;
const nonce_str = crypto.randomBytes(16).toString('hex');
const params = {
appid: APP_ID,
mch_id: MCH_ID,
nonce_str,
body,
out_trade_no,
total_fee: String(total_fee), // 分
spbill_create_ip: req.ip.replace('::ffff:', ''),
notify_url: 'https://yourdomain.com/pay/notify',
trade_type: 'JSAPI',
openid
};
params.sign = buildSign(params);
const xml = toXml(params);
try {
const r = await axios.post(UNIFIED_ORDER_URL, xml, { headers: { 'Content-Type': 'text/xml' } });
const parsed = await parseXml(r.data);
const result = parsed.xml;
if (result.return_code === 'SUCCESS' && result.result_code === 'SUCCESS') {
// 返回 prepay_id 给小程序（后端需再生成签名给前端）
const prepay_id = result.prepay_id;
const timeStamp = String(Math.floor(Date.now() / 1000));
const paySignParams = {
appId: APP_ID,
timeStamp,
nonceStr: nonce_str,
package: `prepay_id=${prepay_id}`,
signType: 'MD5'
};
const paySign = buildSign(paySignParams);
res.json({ success: true, data: { ...paySignParams, paySign } });
} else {
res.json({ success: false, error: result });
}
} catch (err) {
console.error(err);
res.status(500).json({ success: false, error: err.message });
}
});
// 支付结果通知（微信回调）
app.post('/pay/notify', async (req, res) => {
// req.body is xml
try {
const parsed = await parseXml(req.body);
const data = parsed.xml;
// TODO: 校验签名，更新订单状态
// 返回给微信 SUCCESS
const ok = { return_code: 'SUCCESS', return_msg: 'OK' };
res.set('Content-Type', 'text/xml').send(toXml(ok));
} catch (e) {
res.status(500).send('error');
}
});
app.listen(3000, () => console.log('server listening 3000'));
```
小程序端：
`pages/pay/pay.js`
```javascript
// 调用后端创建订单并拉起支付
Page({
async createOrderAndPay() {
try {
const openid = wx.getStorageSync('openid'); // 事先登录并保存
const resp = await wx.request({
url: 'https://yourdomain.com/create-unified-order',
method: 'POST',
data: {
openid,
body: '商品描述',
out_trade_no: 'order' + Date.now(),
total_fee: 1 // 分
}
});
const data = resp.data.data;
wx.requestPayment({
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
success(res) { console.log('支付成功', res); },
fail(err) { console.error('支付失败', err); }
});
} catch (err) {
console.error(err);
}
}
});
```
### 提高微信小程序应用速度的手段（性能优化）
按“启动/渲染/网络/运行时”分类列出常用手段，并给代码/配置示例。
**启动/包体与分包**
- **主包最小化**：把非首屏资源放到分包、子包、异步组件里。
- - `app.json` 中配置 `subPackages`。
```javascript
{
"subPackages": [
{
"root": "packageA",
"pages": ["pages/a/index"]
}
]
}
```
- **使用插件 & 云函数按需加载**：将耗时逻辑放到后端/云函数。
**渲染优化**
- **尽量减少 setData 的数据量与频繁调用**：只更新必要字段，批量更新。
```javascript
// 不建议：每项单独 setData
this.setData({ a: 1 });
this.setData({ b: 2 });
// 建议：
this.setData({ a: 1, b: 2 });
```
- **组件化/纯数据组件**：避免把大量无关数据放在父组件导致不必要重渲染。
- **WXS 用于小量计算/模板逻辑**：在视图层做少量处理，减少逻辑层通信。
```javascript
// utils.wxs
module.exports = {
format: function(s) { return s + '!' }
}
```
**网络/请求**
- **开启 gzip，使用 CDN**：后端返回静态资源使用 CDN；接口响应体支持 gzip。
- **缓存策略**：使用 `wx.setStorageSync` 缓存列表/静态数据，利用 ETag/If-Modified-Since。
- **合并请求与接口分页**：接口聚合或多路合并减少网络多次往返。
**列表渲染**
- **虚拟列表**（长列表不可一次渲染）：用第三方或手写虚拟滚动（只渲染可视区）。
- **分段渲染**：首屏先渲染必要项，非关键延后。
**主线程/计算密集**
- **使用 Worker（小程序支持 Worker）**：把 hash、图片压缩等放到 Worker，避免卡 UI。
```javascript
// main.js
const worker = wx.createWorker('workers/task.js');
worker.postMessage({ cmd: 'hash', filePath: '/tmp/x' });
worker.onMessage(res => console.log(res));
workers/task.js
// worker script
onMessage((msg) => {
if (msg.cmd === 'hash') {
// 假装计算
postMessage({ result: 'done' });
}
});
```
**渲染性能工具与监控**
- 使用小程序性能面板（微信开发者工具）查看 FPS、页面渲染耗时；在产品中埋点采集首屏时间、接口耗时等。
**代码示例：分包 + 延迟加载组件**
`app.json`
```javascript
{
"pages": ["pages/index/index"],
"subPackages": [
{ "root": "packageLarge", "pages": ["pages/large/index"] }
]
}
```
在首页点击跳转时再加载：
```javascript
wx.navigateTo({ url: '/packageLarge/pages/large/index' });
```
### 微信小程序中路由跳转方式与区别
微信提供 5 种主要路由 API：
1. `wx.navigateTo({url})`
- - 向页面栈添加一页（保留当前页面），最多 10 层。用于非 tab 页面之间的跳转。
- 返回后页面保持状态（未卸载）。
1. `wx.redirectTo({url})`
- - 替换当前页面（不保留当前页面），不会增加页面栈深度。用于不需要返回的场景（例如登录后跳转）。
1. `wx.switchTab({url})`
- - 切换到 tabBar 页面（tab 必须在 app.json 的 tabBar 中配置）。会关闭所有非 tab 页面。用于底部导航切换。
1. `wx.reLaunch({url})`
- - 关闭所有页面并打开到指定页面。通常用于重大流程后重置栈（如登出后回到登录页）。
1. `wx.navigateBack({delta})`
- - 回退到上一个页面或指定层级。不能用于打开新页面。
**区别总结**
- 保留与否：`navigateTo` 保留当前，`redirectTo` 不保留，`reLaunch` 全部清空。
- 目标类型：`switchTab` 只能跳 tabBar 页面。
- 场景：`navigateTo` 用于细节页，`redirectTo` 用于替换页面（如一步完成跳转），`reLaunch` 用于重置整个 app 流程。
**示例代码**
```javascript
// 从首页 navigateTo 详情页
wx.navigateTo({ url: '/pages/detail/index?id=123' });
// 登录后替换到主页（不需要后退）
wx.redirectTo({ url: '/pages/home/index' });
// 切换底部 tab
wx.switchTab({ url: '/pages/tab/home' });
// 完成结账后重启到成功页
wx.reLaunch({ url: '/pages/success/index' });
// 返回两级页面
wx.navigateBack({ delta: 2 });
```
### 微信小程序的登录流程
**要点（标准流程）**
1. **小程序端**：调用 `wx.login()` 获得 `code`（有效期短）。
2. **小程序端**：把 `code` 发给**自己后端**（不要直接把 code 发给微信）。
3. **后端** 调用微信服务器的 `code2session` 接口（`https://api.weixin.qq.com/sns/jscode2session`），传 `appId`、`secret`、`js_code`，获取 `openid`、`session_key`（以及 `unionid` 可选）。
4. **后端** 使用 `session_key` 进行后续数据解密（如解密 `getUserInfo` 的 encryptedData），或者基于 `openid` 创造自家用户体系并发放自签名 Token（例如 JWT）。
5. **小程序端** 存储后端返回的 token（wx.setStorageSync），后续接口携带 token 做鉴权。
**注意点**
- `code` 要在后端换取 `session_key`，并且不要把 `session_key` 或 `secret` 踢到客户端。
- 如果需要解密用户信息（encryptedData + iv），必须在后端用 `session_key` 解密以确保安全。
- `session_key` 有效期，后端需要设计登录态续期（刷新或重新 login）。
**示例代码（小程序 + 后端 Node）**
小程序端：
```javascript
// login.js
async function loginToServer() {
const res = await new Promise((resolve, reject) => {
wx.login({ success: resolve, fail: reject });
});
const code = res.code;
// 调用自己服务端
const r = await wx.request({ url: 'https://yourdomain.com/auth/login', method: 'POST', data: { code } });
// 后端返回 token
wx.setStorageSync('token', r.data.token);
}
```
后端（Node + axios）：
```javascript
// auth.js
const express = require('express');
const axios = require('axios');
const jwt = require('jsonwebtoken');
const APPID = 'your_appid';
const SECRET = 'your_secret';
const router = express.Router();
router.post('/login', async (req, res) => {
const { code } = req.body;
const r = await axios.get('https://api.weixin.qq.com/sns/jscode2session', {
params: { appid: APPID, secret: SECRET, js_code: code, grant_type: 'authorization_code' }
});
const data = r.data;
if (data.errcode) return res.status(500).json({ error: data });
const openid = data.openid;
// 查库/创建用户
const user = { id: openid };
const token = jwt.sign({ uid: user.id }, 'your_jwt_key', { expiresIn: '7d' });
res.json({ token });
});
module.exports = router;
```
### 微信小程序的生命周期函数有哪些
分两类：**App 生命周期** 与 **Page（页面）生命周期**。
**App 生命周期（在** `**app.js**`**）**
- `onLaunch(options)`：小程序初始化时触发，且只触发一次。可做全局初始化、获取系统信息、登录等。
- `onShow(options)`：小程序启动，或从后台进入前台时触发。`options` 包含 `scene`、`query` 等。
- `onHide()`：小程序从前台进入后台时触发。
- `onError(msg)`：脚本错误/API 调用报错时触发。
- `onPageNotFound(res)`：页面不存在时触发（可重定向）。
**Page 生命周期（在** `**pages/.../index.js**`**）**
- `onLoad(options)`：页面加载时触发（只触发一次），可接收路由参数 `options`。
- `onShow()`：页面显示/切到前台时触发（每次显示都会触发）。
- `onReady()`：页面第一次渲染完成后触发（只触发一次）。
- `onHide()`：页面被遮挡或切到后台时触发。
- `onUnload()`：页面被关闭时触发（navigateBack 或 redirectTo 替换会触发）。
- 页面相关事件：
- - `onPullDownRefresh()`：下拉刷新触发（需在 page config 打开）。
- `onReachBottom()`：滚动到底部触发。
- `onShareAppMessage()`：用户点击右上角转发时触发（返回转发信息）。
- `onResize()`：窗口尺寸变化时触发（部分平台）。
- 组件也有生命周期（如 `lifetimes` / `attached` / `detached` 等）。
**示例**
```javascript
Page({
onLoad(options) { console.log('onLoad', options); },
onShow() { console.log('onShow'); },
onReady() { console.log('onReady'); },
onHide() { console.log('onHide'); },
onUnload() { console.log('onUnload'); },
onPullDownRefresh() { console.log('refresh'); wx.stopPullDownRefresh(); },
onReachBottom() { console.log('reach bottom'); }
});
```
### 你对微信小程序的理解？优缺点？
**理解（一句话）**：
微信小程序是“在微信生态内可快速触达、低门槛发布、受限容器环境下运行”的轻量级应用形态，适合轻量业务、入口导流、工具型场景。
**优点**
- **低门槛分发**：用户无需安装即可使用，强大的流量入口（公众号、社群、扫一扫、分享等）。
- **统一平台 SDK**：微信提供支付、授权、位置、开放能力、模板消息等一站式能力。
- **快速迭代**：发布流程简单，上线速度快。
- **跨平台（近）**：在微信生态内能覆盖 iOS/Android，同时对开发者门槛友好。
**缺点 / 局限**
- **受限的能力**：沙箱限制、API 受限（如复杂 native 能力弱），不能随意访问设备底层。
- **包体与性能限制**：首包体积限制、页面栈限制（10 层），渲染能力不及原生应用，在复杂可视化、高性能场景下受限。
- **平台依赖**：依赖微信生态，商业规则与审核可能限制某些功能。
- **调试与兼容性**：微信版本差异、真机差异、不同手机厂商表现差异等。
**面试展示角度（建议回答模板）**
- 说明应用场景（适合电商轻量成交页、工具、活动页、SaaS 轻量客户端等），并给出优缺点，最后给出一个 mitigation 策略，例如在高性能场景用原生小程序或 H5 + 原生容器，或把复杂计算放服务端/Worker。
------
### 代码合集（附更多实用示例）
### A. setData 性能优化示例（批量更新/最小化更新）
```javascript
// 误用：每次都 setData
for (let i = 0; i < 100; i++) {
this.setData({ ['items[' + i + '].value']: i });
}
// 优化：先构建对象，再一次 setData
const update = {};
for (let i = 0; i < 100; i++) update['items[' + i + '].value'] = i;
this.setData(update);
```
### B. 分包示例（app.json）
```json
{
"pages":["pages/index/index"],
"subPackages":[
{
"root":"packageA",
"pages":["pages/a/index","pages/a/detail"]
}
],
"tabBar": {
"list": [{ "pagePath": "pages/index/index", "text": "首页" }]
}
}
```
------
### 面试答题小策略（如何包装回答）
- 给出**定义 → 原理 → 场景 → 注意点 → 代码示例** 五段式回答，既有理论又能展示工程实践。
- 遇到开放题（性能/优缺点），用“分层/分类”方式列举（启动/渲染/网络/运算），并至少给 2 个真实项目中可落地的优化措施。
- 代码 demo 要能直接运行（可脱敏），并标注“关键安全点（签名/密钥在后端）”。
## 各大互联网大厂场景题面试真题&答案
### 01 场景题 — 小程序双线程模型（微信小程序 / 类似平台）
**目标**：解释小程序“双线程/双进程”模型（主线程/UI 线程 + 后台逻辑线程 / Worker）与实现注意点。
#### 说明（面试要点）
- 小程序通常存在 `主线程`（渲染 & UI 调度）和 `逻辑线程`（JS 引擎运行）——不同平台细节不同（微信、支付宝等实现差异）。
- 小程序支持 `Web Worker`/子线程（后端运行 heavy 任务，如 hash、压缩、计算），避免阻塞 UI/渲染。
- 跨线程通讯通过 `postMessage`（序列化）进行，注意不能直接共享 DOM、复杂引用。
- 可利用 `Worker` 做：图片压缩、文件切片、hash 计算、长耗时计算。
- 注意：资源限制（Worker 数量限制、内存限制），序列化成本（大量数据可用 Transferable objects）。
#### 示例（微信小程序 Worker）
```js
// main.js
if (wx.canIUse('createWorker')) {
const worker = wx.createWorker('workers/task.js');
worker.postMessage({ cmd: 'hash', filePath: '/path/to/file' });
worker.onMessage(function(res) {
console.log('worker result', res);
});
}
// workers/task.js
onMessage(function(msg) {
if (msg.cmd === 'hash') {
// do heavy work
const result = doHash(msg.filePath);
postMessage({ result });
}
});
```
### 02 场景面试 — 大文件上传（分片、断点续传、失败重试、hash 校验、Web Worker 切片）
**目标**：实现稳定的大文件上传方案，支持断点续传、分片重试、并发上传、校验（MD5/SHA1）、避免主线程卡顿（Worker 做 hash 切片）。
#### 关键点
- 切片（chunkSize，例如 2MB）
- 每片带索引、hash、size
- 后端提供 `/upload/init` (创建任务)、`/upload/chunk` (单片上传)、`/upload/complete` (合并)
- 客户端保存上传进度（localStorage/IndexedDB）
- Worker 计算文件 hash，且负责切片准备
- 并发上传（PromisePool）
- 单片失败重试（指数退避、最大重试次数）
- 断点续传：init 返回已经接收的 chunk 列表
#### 前端（核心）代码（包含 Worker）
// worker.js（Web Worker: 负责计算 hash 与切片元数据）
```javascript
// worker.js
self.onmessage = async (e) => {
const { file, chunkSize } = e.data;
const total = Math.ceil(file.size / chunkSize);
const chunks = [];
for (let i = 0; i < total; i++) {
const start = i * chunkSize;
const end = Math.min(file.size, start + chunkSize);
const blob = file.slice(start, end);
// 可以额外计算分片的简单 hash（如md5），这里示例不引入库，使用 size+index
chunks.push({ index: i, start, end, size: blob.size });
// 为避免一次加载太多，可 postProgress
if (i % 50 === 0) self.postMessage({ progress: i / total });
}
// 计算文件简单 fingerprint（注意：真实md5需引入spark-md5等）
const fingerprint = `${file.name}-${file.size}-${file.lastModified}`;
self.postMessage({ done: true, chunks, fingerprint });
};
```
// upload.tsx（前端主逻辑）
```tsx
// upload.ts (React + TS, 关键函数）
type InitResp = { uploadId: string; uploaded?: number[] };
async function initUpload(apiBase: string, filename: string, totalChunks: number, fingerprint: string): Promise {
const res = await fetch(`${apiBase}/upload/init`, {
method: "POST",
headers: {"Content-Type":"application/json"},
body: JSON.stringify({ filename, totalChunks, fingerprint })
});
return res.json();
}
async function uploadChunk(apiBase: string, uploadId: string, chunkIndex: number, chunkBlob: Blob, retry=3) {
const form = new FormData();
form.append("uploadId", uploadId);
form.append("index", String(chunkIndex));
form.append("file", chunkBlob);
for (let attempt=0; attempt setTimeout(r, wait));
}
}
throw new Error(`Chunk ${chunkIndex} upload failed`);
}
export async function uploadFileWithWorker(file: File, apiBase: string) {
const chunkSize = 2 * 1024 * 1024; // 2MB
const worker = new Worker("/worker.js");
const chunksMeta: any[] = await new Promise((resolve) => {
worker.onmessage = (e) => {
if (e.data.done) {
resolve(e.data.chunks.map((c)=>({...c})));
}
};
worker.postMessage({ file, chunkSize });
});
const fingerprint = `${file.name}-${file.size}-${file.lastModified}`;
const totalChunks = chunksMeta.length;
const init = await initUpload(apiBase, file.name, totalChunks, fingerprint);
const uploadId = init.uploadId;
const uploadedSet = new Set(init.uploaded || []);
// 并发池
const concurrency = 4;
const queue = chunksMeta.map((meta, idx) => ({ ...meta, index: idx }));
let active = 0;
let i = 0;
return new Promise((resolve, reject) => {
const runNext = async () => {
if (i >= queue.length && active === 0) {
// 请求合并
await fetch(`${apiBase}/upload/complete`, { method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify({ uploadId }) });
resolve();
return;
}
while (active < concurrency && i < queue.length) {
const chunk = queue[i++];
if (uploadedSet.has(chunk.index)) continue;
active++;
(async () => {
const blob = file.slice(chunk.start, chunk.end);
try {
await uploadChunk(apiBase, uploadId, chunk.index, blob);
// 可更新本地进度
} catch (err) {
reject(err);
return;
} finally {
active--;
runNext();
}
})();
}
};
runNext();
});
}
```
#### 后端（伪代码 Node/Express）
```javascript
// /upload/init
// 接收 fingerprint, totalChunks, filename
// 如果已存在 unfinished record, 返回已接收的 chunk 索引列表
// 否则创建 uploadId = uuid(), 存 db (uploadId, fingerprint, totalChunks, uploaded:[])
// /upload/chunk
// 接收 uploadId, index, file
// 将 chunk 存储到临时目录 /uploads/{uploadId}/{index}
// 标记 DB: push index
// /upload/complete
// 合并文件（按 index 读取文件流 concat），保存为目标文件；验证大小/hash；清理临时
```
#### 面试亮点要点（说给面试官听）
- 说明为什么用 Worker（避免主线程卡顿：hash、切片），为什么要并发限制（避免服务器/网络拥塞），为什么要断点续传（网络不稳定），如何保证幂等（uploadId+index）、安全（token、签名）、如何处理碎片合并的内存优化（流式合并避免把所有片读到内存）。
### 03 场景面试 — 页面截图（前端实现网页截屏/保存/导出：整页、可视区、带滚动）
**目标**：实现页面截图（可视区 / 整页），并支持导出 PNG/PDF。
**关键点**：Canvas 渲染（html2canvas）、整页滚动截图（分段拼接）、处理跨域图片（CORS 或 proxy）、高 DPI（devicePixelRatio），性能与内存限制。
#### 方案
- 使用成熟库 html2canvas 或 puppeteer（后端无头浏览器）；
- 前端：html2canvas 支持大部分用例；整页利用 `window.scrollTo` + 分片截图拼接到 canvas；
- 特殊：如果页面中有跨域图片，需要确保图片有 CORS header 或通过后端代理。
#### 前端示例（使用 html2canvas，整页分片）
```javascript
import html2canvas from "html2canvas";
async function captureVisible(element: HTMLElement) {
const canvas = await html2canvas(element, { useCORS: true, scale: window.devicePixelRatio || 1 });
return canvas.toDataURL("image/png");
}
// 整页截图（分段拼接）
async function captureFullPage() {
const body = document.body;
const totalHeight = Math.max(body.scrollHeight, document.documentElement.scrollHeight);
const viewportHeight = window.innerHeight;
const canvases = [];
for (let y = 0; y < totalHeight; y += viewportHeight) {
window.scrollTo(0, y);
// 等待重排
await new Promise(r => setTimeout(r, 200));
const base = await html2canvas(document.documentElement, { useCORS: true, scale: 1 });
canvases.push(base);
}
// 拼接
const finalCanvas = document.createElement("canvas");
finalCanvas.width = canvases[0].width;
finalCanvas.height = totalHeight;
const ctx = finalCanvas.getContext("2d")!;
let offset = 0;
canvases.forEach(c => {
ctx.drawImage(c, 0, offset);
offset += c.height;
});
return finalCanvas.toDataURL("image/png");
}
```
#### 后端无头浏览器（面试高分项）
- 用 Puppeteer 做后端渲染截图，更稳定，适合生成 PDF、定时抓取。
### 场景面试 — 移动端适配
**目标**：从 UI / 性能 / 体验角度实现兼容各种屏幕（安卓/iOS、机型差异）。
**关键点**：视口 meta、弹性布局、响应式单位（rem / vw）、媒体查询、图片/资源按需加载、触控优化（点击延迟、滚动节流）、高 DPI 资源、字体和行高、可访问性。
#### 推荐策略（实战）
1. 视口 ``
2. 使用 REM：根字体动态根据设备宽度设置（如 375px 对应 1rem = 16px）
3. CSS Grid / Flexbox + 断点设计（mobile-first）
4. 图片：`srcset` + `picture` 或按 DPR 提供 @1x,@2x
5. 性能：懒加载（IntersectionObserver）、长列表虚拟化
6. 触控：`touch-action` 与避免 `300ms` 点击问题（现代浏览器已解决）
7. 软键盘：输入框聚焦时避免布局跳动（监听 `visualViewport`）
#### 示例：动态 root font-size（适配）
```javascript
/* index.css */
html { font-size: 16px; } /* fallback */
// adapt.js
function setRem(baseWidth = 375, baseRem = 16) {
const dpr = Math.min(window.devicePixelRatio || 1, 3);
const clientWidth = document.documentElement.clientWidth || window.innerWidth;
const rem = (clientWidth / baseWidth) * baseRem;
document.documentElement.style.fontSize = rem + "px";
document.documentElement.setAttribute("data-dpr", String(dpr));
}
window.addEventListener("resize", () => setRem());
setRem();
```
### 场景题 — 如何修改第三方 npm 包（例如：修改 bug / 定制化需求）
**目标**：在不直接修改 node_modules 的前提下安全地修改第三方包并可维护地使用。
**方法**：
1. Fork + Patch + Publish to private registry（公司内 npm 私服 / GitHub Packages）；
2. 使用 `patch-package`：在项目中对 node_modules 修改后，运行 `npx patch-package pkg-name`，并把 patch 提交到仓库，安装后 `postinstall` 自动应用；
3. 提交 PR 给原作者（长期方案）；
4. 使用 alias/替换（pnpm / webpack alias / vite resolve.alias）重定向到本地修改版本。
#### 示例：使用 patch-package（推荐面试答案）
```shell
# 安装 patch-package
npm install patch-package --save-dev
# 修改 node_modules/some-lib/index.js
# 生成补丁
npx patch-package some-lib
# package.json
{
"scripts": {
"postinstall": "patch-package"
}
}
```
#### 复杂方案（Fork & private publish）
- Fork 到自己 org，修改代码，维护版本号，发布到私服 `npm publish --registry http://your-registry`，package.json 指向该私服版本。
### 场景题 — 一个链接两应用（同一链接/按钮在两个不同应用中打开/路由）
**场景解释**：单一 URL 同时被多个子应用/入口使用（微前端场景），或一个链接在不同应用中打开（主应用/子应用共享跳转）。
#### 解决思路
- 统一路由策略（例如：hash / path）并通过 query 参数或 fragment 指明目标 app。
- 主入口处理：当链接进入主应用，根据 path 或参数决定 mount 哪个子应用（微前端框架如 qiankun/Wujie/micro-app）。
- 如果需要在两个应用中同时打开（一个新窗口打开另一个），使用 target + window.open with URL + params。
#### 示例（微前端 qiankun 路由策略）
```javascript
// link: https://host/app?app=react-demo#/pageA
// 主应用读取 app 参数，决定 mount 子应用并将路由传递
const url = new URL(location.href);
const targetApp = url.searchParams.get("app"); // react-demo 或 vue-demo
// 主应用加载对应子应用并传入生命周期 props（例如 initialPath）
registerMicroApps([
{
name: 'react-demo',
entry: '//localhost:7100',
container: '#subapp',
activeRule: (location) => location.search.includes('app=react-demo')
},
// ...
]);
```
### 场景题 — 实现网页加载进度条
**目标**：页面加载时（首屏/路由切换/资源加载）展示进度条（类似 NProgress），并尽量模拟真实进度。
#### 实现要点
- 对静态资源：使用 `window.fetch` / XHR 拦截或 Resource Timing API 来估计进度（有限）。
- 对路由切换：在路由开始时 start(), 在请求成功/页面渲染完成时 done()。
- 模拟进度策略：快速到 80%-95%，等待真实事件完成再到 100%，并加上缓慢推进（decay）避免瞬间跳满。
- 使用 CSS 动画 + requestAnimationFrame 做平滑。
#### 简单实现（NProgress 风格）
```javascript
// progress.ts
let progress = 0;
let rafId: number | null = null;
function start() {
progress = 0;
tick();
document.body.classList.add('show-progress');
}
function tick() {
progress += Math.random() * 6; // 随机推进
if (progress >= 95) progress = 95;
update(progress);
rafId = requestAnimationFrame(() => setTimeout(tick, 200));
}
function done() {
if (rafId) cancelAnimationFrame(rafId);
progress = 100;
update(100);
setTimeout(() => {
document.body.classList.remove('show-progress');
update(0);
}, 300);
}
function update(val:number){ const el=document.getElementById('top-progress')!; el.style.width=val+'%'; }
export { start, done };
```
### 场景题 — web 应用中静态资源加载失败的降级处理
**目标**：当静态资源（JS/CSS/图片/字体）加载失败时优雅降级，保证核心功能和可用性。
#### 策略
1. **资源重试**（指数退避，最多 N 次）；
2. **备用 CDN / 本地备份**（先尝试主 CDN，失败后切换备选）；
3. **功能降级**：按优先级分离关键/非关键资源（critical CSS/JS 内联/延迟加载可选功能）；
4. **图片占位/矢量占位**：使用 `![]()
` 替换为占位图或 SSG 的 Base64 占位；
5. **字体回退**：CSS 中定义备选字体，使用 `font-display: swap;`；
6. **监控/上报**：捕获 `window.onerror`, `resource timing`, 上报失败日志。
#### 代码 demo：资源加载重试与备用 URL
```javascript
async function loadScriptWithRetry(urls: string[], maxRetry = 3) {
for (let u of urls) {
for (let attempt = 0; attempt < maxRetry; attempt++) {
try {
await new Promise((resolve, reject) => {
const s = document.createElement('script');
s.src = u;
s.onload = () => resolve();
s.onerror = () => reject(new Error('load fail'));
document.head.appendChild(s);
});
return;
} catch (e) {
await new Promise(r => setTimeout(r, Math.pow(2, attempt) * 200));
}
}
}
throw new Error("All script urls failed");
}
// 使用：优先 CDN1, CDN2, 本地
loadScriptWithRetry(["//cdn1/lib.js","//cdn2/lib.js","/static/lib.js"]).catch(err => {
console.error("lib load failed", err);
// 进入降级方案：隐藏相关功能、显示提示等
});
```
### 场景面试 — 前端水印功能（图片/页面/导出到 PDF 的水印）
**目标**：实现抗篡改、可配置的文本/图片水印，能在导出/截图中保留。
#### 思路
- 页面水印：使用 fixed/flexible 的重复背景层（CSS + Canvas 生成图片，设置 `pointer-events:none`）。
- 防移除：用多层水印或定期校正（定时检查 DOM）。
- 导出（PDF/截图）：在导出前把水印绘制到 canvas/PDF。
#### 示例（Canvas 生成图像作为背景）
```javascript
function createWatermarkDataURL(text: string) {
const canvas = document.createElement('canvas');
canvas.width = 300; canvas.height = 200;
const ctx = canvas.getContext('2d')!;
ctx.fillStyle = 'rgba(0,0,0,0.08)';
ctx.font = '16px sans-serif';
ctx.translate(150,100);
ctx.rotate(-Math.PI/12);
ctx.fillText(text, -50, 0);
return canvas.toDataURL('image/png');
}
function applyWatermark(text: string) {
const url = createWatermarkDataURL(text);
const div = document.createElement('div');
div.id = 'app-watermark';
Object.assign(div.style, {
position: 'fixed', left:0, top:0, right:0, bottom:0,
pointerEvents:'none', backgroundImage:`url(${url})`, opacity:'0.8', zIndex: 999999
});
document.body.appendChild(div);
}
```
### 场景面试 — 大数运算（JS 精度问题、实现大整数/高精度浮点）
**目标**：处理精度丢失（JS Number）场景，支持加减乘除/四舍五入/大整数、任意精度小数。
#### 做法
- 使用 BigInt（原生）处理整数（但不支持小数）。
- 使用高精度库 `decimal.js`、`big.js`、`bignumber.js` 来处理小数场景。
- 或者实现字符串算术（手写大数加减乘），适合面试考题实现。
#### 简单字符串大整数加法（面试算法题）
```javascript
function addBigIntStr(a, b) {
let carry = 0, res = [];
a = a.split('').reverse(); b = b.split('').reverse();
const n = Math.max(a.length, b.length);
for (let i=0;i x => fns.reduceRight((v,f)=>f(v), x);
const add = a => b => a + b;
const double = x => x*2;
const incThenDouble = compose(double, add(1));
console.log(incThenDouble(2)); // (2+1)*2 = 6
```
#### 在前端的应用示例
- 数据转换流水线（normalize -> enrich -> filter）
- 事件处理链（pure handlers -> side-effect at edge）
- 状态管理策略（不可变 reducers）
### 场景面试 — 电影票选座功能（座位布局、并发抢占、锁座、支付完成释放）
**目标**：设计票选座功能，解决并发冲突、锁定、超时释放、支付一致性。
#### 关键设计
- 座位模型：`seat { id, status: available|locked|sold, lockedBy, lockedAt }`
- 锁座机制（短期锁，例如 5 分钟）：通过接口 `POST /seat/lock` 返回 lockId 或失败
- 乐观/悲观策略：悲观锁适合高并发（直接写 DB 标记 locked），乐观通过 compare-and-swap（version 或 SQL where status = available）
- 支付与最终确认：支付成功后 `POST /seat/confirm` 把 locked -> sold；如果超时或取消，自动解锁（后台定时任务或延迟队列）
- 并发策略：数据库事务或 Redis 分布式锁；使用消息队列确保幂等
#### 前端交互（示例）
```javascript
async function tryLockSeat(seatId) {
const resp = await fetch(`/api/seat/lock`, { method:'POST', body: JSON.stringify({ seatId }), headers:{'Content-Type':'application/json'}});
const data = await resp.json();
return data; // { success: true/false, lockId, expiresAt }
}
```
#### 后端示例（伪代码）
```plsql
-- 悲观 SQL (Postgres)
BEGIN;
UPDATE seats SET status='locked', locked_by=$1, locked_at=now()
WHERE id=$2 AND status='available';
-- check affected rows == 1 then commit else rollback
COMMIT;
```
或 Redis：
```java
SETNX seat:{id} {lockInfo} EX 300
```
------
### 场景面试 — 图片性能优化方案
**目标**：降低页面图片的加载成本和渲染成本，提高 UX 和 CLS。
#### 关键措施
- 图片格式：WebP/AVIF > JPEG/PNG（按浏览器支持）。
- 响应式：`srcset` / `sizes` / ``。
- Lazy loading (`loading="lazy"` 或 IntersectionObserver)。
- 占位（LQIP / SVG 占位 / blur-up）。
- CDN + 缩放/裁剪服务：根据 breakpoints 生成合适尺寸。
- 图片压缩（lossy/lossless）、按需惰性解码 `decoding="async"`。
- 使用 `prefetch` 或 `preload` 关键图（首屏 hero）。
- 避免 layout shift：为图片预留宽高（或使用 aspect-ratio）。
- 精细处理背景图片和 icon（SVG sprite 或 icon font）。
#### 简单示例（picture + srcset + lazy）
```html
```
### 场景题 — 移动端上拉加载 / 下拉刷新
**目标**：实现移动端上拉加载更多与下拉刷新体验（带阻尼效果、节流、避免冲突）。
#### 要点
- 用 touch 事件或 pointer events 实现下拉；要兼容浏览器默认下拉（在 WebView 中常禁用默认）。
- 下拉刷新：拖拽距离阈值（e.g. 60px）+ 回弹动画 + 状态机（idle -> pulling -> ready -> refreshing -> done）。
- 上拉加载：监听滚动到接近底部 `scroll` 或 IntersectionObserver（更优）。
- 避免冲突：在下拉时禁用滚动或在顶部检测才启下拉。
#### 简单实现（下拉刷新）
```javascript
let startY = 0, pulling = false;
const threshold = 60;
const el = document.getElementById('scrollWrap');
el.addEventListener('touchstart', (e) => {
if (el.scrollTop === 0) { startY = e.touches[0].clientY; pulling = true; }
});
el.addEventListener('touchmove', (e) => {
if (!pulling) return;
const delta = e.touches[0].clientY - startY;
if (delta > 0) {
e.preventDefault();
const dist = Math.min(delta / 2, 120);
document.getElementById('ptr').style.transform = `translateY(${dist}px)`;
// update UI status if > threshold
}
});
el.addEventListener('touchend', async (e) => {
if (!pulling) return;
pulling = false;
const endY = e.changedTouches[0].clientY;
if (endY - startY > threshold) {
// 执行刷新
document.getElementById('ptr').classList.add('refreshing');
await doRefresh();
document.getElementById('ptr').classList.remove('refreshing');
}
document.getElementById('ptr').style.transform = '';
});
```
上拉加载用 IntersectionObserver 监听底部 sentinel 元素即可（节省资源，避免频繁 scroll 事件）。
### 场景面试 — 深度 SEO 优化（前端可做的 SEO）
**目标**：提高搜索引擎抓取和排名（技术和内容层面的结合）。
#### 前端可做项（面试重点）
- 服务端渲染（SSR）或预渲染（SSG）以确保搜索引擎抓取到完整 HTML（尤其是动态内容）。
- 语义化 HTML（正确 H1-H6，article, nav, main），结构化数据（schema.org JSON-LD）。
- 优化 meta（title/description）、Open Graph、canonical 链接、hreflang（多语言）。
- 页面性能（首屏速度、LCP、CLS）直接影响 SEO；使用 Lighthouse 指标优化。
- URL 设计：静态、友好、避免参数过多。
- robots.txt、sitemap.xml、XML sitemap 动态生成并提交到搜索引擎。
- 图片 lazy + `alt` 属性+ 图片 sitemap。
- 使用 `rel="next/prev"`、分页优化、避免重复内容（canonical）。
- 移动优先（移动端友好）和安全 (HTTPS)。
#### 代码示例：JSON-LD schema
```javascript
```
### 无感刷新Token：如何做到让用户“永不掉线”
没有什么比在用户操作得正嗨时，突然提示“登录已过期，请重新登录”的提示更让人沮丧的了。这种突兀的中断不仅破坏了用户体验，甚至可能导致未保存的数据丢失。
然而，我们都知道，出于安全考虑，用于身份验证的 `Token`（通常是 `Access Token`）必须有较短的有效期。那么，我们如何在保证安全的前提下，创造一种“永不掉线”的丝滑体验呢？
#### **问题的根源：Access Token 的“天生矛盾”**
首先，我们要理解为什么需要刷新 Token。
我们通常使用 `Access Token` 来验证用户的每一次 API 请求。为了安全，`Access Token` 的生命周期被设计得很短（例如 30 分钟或 1 小时）。如果有效期太长，一旦泄露，攻击者就能在很长一段时间内冒充用户进行操作，风险极高。
这就产生了一个矛盾：
- **安全性要求**：`Access Token` 有效期要短。
- **用户体验要求**：用户不想频繁地被强制重新登录。
为了解决这个矛盾，**`Refresh Token`** 应运而生。
#### **核心理念：双 Token 认证系统**
无感刷新机制的核心在于引入了两种类型的 Token：
1. **`Access Token`（访问令牌）**
2. - **用途**：用于访问受保护的 API 资源，附加在每个请求的 `Header` 中。
- **特点**：生命周期短（如 1 小时），无状态，服务器无需存储。
- **存储**：通常存储在客户端内存中（如 Vuex/Redux），因为需要频繁读取。
3. **`Refresh Token`（刷新令牌）**
4. - **用途**：当 `Access Token` 过期时，专门用于获取一个新的 `Access Token`。
- **特点**：生命周期长（如 7 天或 30 天），与特定用户绑定，服务器需要安全存储其有效性记录。
- **存储**：必须安全存储。**最佳实践是存储在 `HttpOnly` Cookie 中**，这样可以防止客户端 JavaScript 脚本（如 XSS 攻击）读取它。
既然如此，为何不直接使用 `Refresh Token` 呢？
`Access Token` 通常是无状态的，服务器无需记录它，也导致 JWT 无法主动吊销，而 `Refresh Token` 是**有状态的**，服务器需要一个列表（数据库中的“白名单”或“吊销列表”）来记录哪些 `Refresh Token` 是有效的，当用户更改密码、或从某个设备上“主动登出”时，服务器端可以主动将对应的 `Refresh Token` 设为无效。
#### **无感刷新的详细工作流**
下面是这个“魔法”发生的具体步骤：
1. **首次登录**：用户使用用户名和密码登录。服务器验证成功后，返回一个 `Access Token` 和一个 `Refresh Token`。
2. **正常请求**：客户端将 `Access Token` 存储起来，并在后续的每次 API 请求中，通过 `Authorization` 请求头将其发送给服务器。
3. **Token 过期**：当 `Access Token` 过期后，客户端再次用它请求 API。服务器会拒绝该请求，并返回一个特定的状态码，通常是 `401 Unauthorized`。
4. **拦截 401 错误**：客户端的请求层（如 Axios 拦截器）会捕获这个 `401` 错误。此时，它不会立即通知用户“你已掉线”，而是**暂停**这个失败的请求。
5. **发起刷新请求**：拦截器使用 `Refresh Token` 去调用一个专门的刷新接口（例如 `/api/auth/refresh`）。
6. **处理刷新结果**：
7. - **刷新成功**：服务器验证 `Refresh Token` 有效，生成一个新的 `Access Token`（有时也会返回一个新的 `Refresh Token`，这被称为“刷新令牌旋转”策略，可以提高安全性），并将其返回给客户端。
- **刷新失败**：如果 `Refresh Token` 也过期了或无效，服务器会返回错误（如 `403 Forbidden`）。这意味着用户的登录会话彻底结束。
8. **重试与终结**：
9. - **若刷新成功**：客户端用新的 `Access Token` **自动重发**刚才失败的那个 API 请求。用户完全感觉不到任何中断，数据操作无缝衔接。
- **若刷新失败**：客户端清除所有认证信息，强制用户登出，并重定向到登录页面。
#### **实战演练：使用 Axios 拦截器实现无感刷新**
`Axios` 的拦截器是实现这一流程的完美工具。下面是一个完整且考虑了并发问题的实现方案。
**1. 创建 Axios 实例**
首先，我们创建一个单独的 Axios 实例，方便统一管理。
```js
// a-pi/request.js
import axios from 'axios';
const service = axios.create({
baseURL: '/api',
timeout: 10000,
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前，从 state management (e.g., Vuex/Pinia/Redux) 获取 token
const accessToken = getAccessTokenFromStore();
if (accessToken) {
config.headers['Authorization'] = `Bearer ${accessToken}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
```
**2. 核心：响应拦截器**
这是实现无感刷新的关键。
```js
// a-pi/request.js (续)
// 用于刷新 token 的 API
import { refreshTokenApi } from './auth';
let isRefreshing = false; // 控制刷新状态的标志
let requests = []; // 存储因 token 过期而挂起的请求
service.interceptors.response.use(
response => response, // 对成功响应直接返回
async error => {
const { config, response: { status } } = error;
// 1. 如果不是 401 错误，直接返回错误
if (status !== 401) {
return Promise.reject(error);
}
// 2. 避免重复刷新：如果正在刷新 token，将后续请求暂存
if (isRefreshing) {
return new Promise(resolve => {
requests.push(() => resolve(service(config)));
});
}
isRefreshing = true;
try {
// 3. 调用刷新 token 的 API
const { newAccessToken } = await refreshTokenApi(); // 假设 refresh token 通过 HttpOnly cookie 自动发送
// 4. 更新本地存储的 access token
setAccessTokenInStore(newAccessToken);
// 5. 重试刚才失败的请求
config.headers['Authorization'] = `Bearer ${newAccessToken}`;
// 6. 重新执行所有被挂起的请求
requests.forEach(cb => cb());
requests = []; // 清空队列
return service(config); // 返回重试请求的结果
} catch (refreshError) {
// 7. 如果刷新 token 也失败了，则执行登出操作
console.error('Unable to refresh token.', refreshError);
logoutUser(); // 清除 token，重定向到登录页
return Promise.reject(refreshError);
} finally {
isRefreshing = false;
}
}
);
export default service;
```
**代码解析：**
- **并发处理**：`isRefreshing` 标志和 `requests` 数组是关键。当第一个 `401` 错误触发刷新时，`isRefreshing` 变为 `true`。后续在刷新完成前到达的 `401` 请求，都会被推进 `requests` 队列中挂起，而不是重复发起刷新请求。当刷新成功后，再遍历队列，依次执行这些被挂起的请求。
- **原子操作**：通过这种“加锁”机制，确保了刷新 Token 的操作是原子的，避免了资源浪费和潜在的竞态条件。
- **优雅降级**：当 `Refresh Token` 也失效时，系统会执行 `logoutUser()`，进行清理工作并引导用户重新登录，这是一个优雅的失败处理方案。
无感刷新 Token 机制是现代 Web 应用提升用户体验的“标配”。它将身份验证的复杂性隐藏在后台，为用户提供了一个流畅、不间断的操作环境。
实现这一机制，不仅仅是写几行代码，更是对认证流程、安全性和用户体验三者之间平衡的深刻理解。