一、基础技术栈（必考模块）

1. HTML/CSS 核心

语义化标签：header、nav、main、article、section的正确使用场景CSS 布局方案：

传统布局：Flexbox、Grid 的完整语法（如gap、grid-template-areas）现代布局：Sticky Position、Subgrid、Container Queries

CSS 新特性：

变量（--custom-prop）与作用域隔离混合模式（mix-blend-mode）与滤镜（filter）动画性能优化（will-change、GPU 加速）

响应式设计：

媒体查询（@media (min-width:)）与断点策略流体布局（clamp()、minmax()）移动端适配（viewport meta 标签、px-to-rem转换）

2. JavaScript 核心

数据类型与原型链：

基本类型与引用类型的本质区别（堆 / 栈存储）instanceof、typeof、Object.prototype.toString.call()的适用场景原型链继承的实现与 ES6 类语法的底层原理

异步编程：

Promise/async/await的完整用法（Promise.allSettled、try/catch处理）事件循环机制（宏任务 / 微任务队列）Generator与Iterator的实际应用场景

ES6 + 新特性：

模块系统（import/export与 CommonJS 的区别）解构赋值、剩余参数、展开运算符的高级用法Proxy与Reflect在响应式系统中的应用

性能优化：

函数防抖（debounce）与节流（throttle）的实现内存管理（闭包泄漏、WeakMap/WeakSet 应用）大数组处理（Web Workers、SharedArrayBuffer）

二、主流框架与库（占比 30%+）

1. React/Vue 核心对比

特性ReactVue状态管理useState+useReducerref/reactive+setup组件通信Context+useContextprovide/inject+event bus渲染机制虚拟 DOM（调和算法）编译模板（静态提升）生态系统Redux/MobXPinia最新特性Server Components（React 18+）Composition API（Vue 3）

2. 框架进阶考点

React Hooks：

useEffect依赖数组的正确设置（避免无限循环）自定义 Hook 的设计原则（如useFetch、useWebSocket）useMemo/useCallback的性能优化场景

Vue 3 Composition API：

setup函数的生命周期钩子映射watch与watchEffect的区别组件逻辑复用（Composition API vs Mixin）

状态管理：

Redux 中间件原理（Thunk/Saga）Pinia 与 Vuex 的设计差异客户端与服务端状态同步方案

三、工程化与构建工具（高频考点）

1. 构建工具

Webpack 5：

模块打包原理（AST 解析、代码分割）性能优化（HappyPack、Thread-loader）自定义 Plugin/Loader 的实现

Vite 5：

ESBuild 预编译与 HMR 机制与 Webpack 在生产环境的差异插件生态（如vite-plugin-pwa）

构建优化：

分包策略（splitChunks）按需加载（import()动态导入）缓存策略（contenthash、长效缓存）

2. 工程化实践

Monorepo 架构：

Lerna/Yarn Workspaces 的使用场景跨包依赖管理与版本同步

CI/CD 流程：

GitHub Actions/GitLab CI 的配置自动化测试（Jest/Cypress）与部署流程

代码规范：

ESLint+Prettier 的集成配置TypeScript 类型推导与泛型应用

四、性能优化与 Web 标准（重点模块）

1. 加载与渲染优化

首屏优化：

Critical CSS提取与内联async/defer脚本加载策略Intersection Observer实现懒加载

渲染性能：

重排（Reflow）与重绘（Repaint）的触发条件requestAnimationFrame与requestIdleCallback合成层（will-change: transform）的应用

Web Vitals 指标：

LCP（最大内容绘制）、FID（首次输入延迟）CLS（累积布局偏移）的优化手段

2. 现代 Web 技术

WebAssembly：

与 JavaScript 的性能对比（计算密集型场景）.wasm文件的加载与实例化流程

Web Components：

自定义元素（customElements.define）Shadow DOM 与样式隔离

PWA 应用：

Service Worker 的生命周期（安装 / 激活 / 更新）离线缓存策略（Cache API）

五、跨端与移动端开发（新兴考点）

1. 跨端框架

React Native/Flutter：

渲染原理对比（JS 桥接 vs 自绘引擎）原生模块与 JavaScript 的通信机制

小程序开发：

双线程架构（逻辑层 / 视图层分离）组件化开发（WXML/WXSS 与原生组件混合）

2. 移动端优化

触摸事件：

touchstart/touchmove/touchend的性能问题手势库（如 Hammer.js）的封装思路

网络优化：

图片压缩（WebP/AVIF 格式）数据缓存（LocalStorage/SessionStorage）首屏加载骨架屏（Skeleton Screen）实现

六、安全与调试（必问场景题）

1. 安全防护

XSS 防护：

前端转义（DOMPurify库）CSP（内容安全策略）的配置

CSRF 防护：

SameSite Cookie设置Token验证与Referer检查

其他安全：

HTTPS与HTTP/2的安全特性Subresource Integrity（SRI）的应用

2. 调试与监控

浏览器 DevTools：

性能面板（火焰图分析）内存分析（堆快照与泄漏检测）

错误监控：

window.onerror与unhandledrejection捕获Sentry 等监控平台的接入流程

七、前沿技术与趋势（加分项）

微前端：

框架对比（Single-SPA/qiankun）沙箱隔离与状态管理

AI 与前端：

代码生成（如 GitHub Copilot 辅助开发）智能 UI 组件（动态布局生成）

WebGL/Three.js：

3D 场景渲染基础性能优化（LOD 层级细节）

八、面试高频场景题示例

性能优化场景：

"如何优化一个首屏加载时间超过 3 秒的电商网站？"

（需结合资源压缩、懒加载、CDN 分发、SSR 等维度回答）

框架原理题：

"React 的 useState 为什么不能在条件语句中调用？"

（考察 Hook 链表的底层实现原理）

跨端适配题：

"如何设计一个同时支持 Web、iOS、Android 的表单组件？"

（需考虑跨平台 UI 库、原生组件桥接等方案）

工程化设计：

"团队项目中如何实现组件的版本管理与按需加载？"

（考察 Monorepo、Tree Shaking、模块联邦等知识）