1.js

1.类型和值

• JavaScript 中有几种数据类型 ?
• 什么是原始类型和引用类型，有什么区别？
• 有哪些方法判断变量的类型
• null undefined 区别?
• 有用过 Symbol 么，说一下？
• 0.1 + 02 !== 0.3
• 如何判断一个数值是整数？
• 什么是 NaN ，它的类型，如何判断 NaN?
• BigInt 是如何实现的？
• js 中类型转换规则？

6.数组和集合对象

• 用过 Array 哪些方法
• 什么是伪数组和数组的区别是什么如何转换
• Iterator 的概念与作用
• 哪些数据结构原生支持 Iterator？如何自定义？
• Iterator 接口会在什么场合被自动调用？
• Set 和 Map 的底层实现及时间复杂度？
• Map 和 WeakMap、Set 和 WeakSet 有什么区别？
• 如何遍历 Map？有哪些常用 API？
• WeakMap/WeakSet 的典型应用场景？

9.异步编程

• js 中异步编程有哪些模式 ?
• 说一下 promise ？
• async 和 Promise 的区别
• await 的原理是什么, 如何工作？

12.ES6+

• 递归和尾递归是什么概念？
• JS 严格模式为什么禁用 with 语句？
• stage0、stage1、stage2、stage3 分别代表什么含义？
• 装饰器（Decorator）是什么？如何实现？

15.编码题 / 核心概念

• 下面代码中 a 在什么情况下会打印 1 ?
• 深拷贝和浅拷贝
• 实现一个 sum 函数，支持任意个参数的累加，在 console.log 时输出结果？
• 模拟new操作
• 实现链式调用 ？

16.编码题 / 工具函数

• 实现 lodash debounce ?
• 实现 lodash throttle
• 实现 dayjs format 函数
• 实现类似 dayjs [difference](https://day.js.org/docs/en/display/difference) 函数
• 实现 lodash isEqual 函数
• 实现管道函数
• 实现一个缓存函数
• 如何做 promise 缓存？上一次调用函数的 promise 没有返回， 那么下一次调用函数依然返回上一个 promise
• 数字千分化的实现方式有哪些？用代码实现一下

2.操作符和表达式

• == 和 === 区别
• typeof 和 instanceof 的区别
• 操作符优先级
• 说明下面的代码运行结果
• Object.is() 与比较操作符 “===”、“==” 有什么区别

5.字符串和正则

• JavaScript 字符串是如何存储的？
• JavaScript 支持哪些正则能力？
• 说一下 JS RegExp 与 String 的常用方法及差异
• 分组/命名捕获/反向引用怎么用？
• 边界/多行/单词边界如何工作？
• 前瞻/后顾断言的应用场景？
• 数字千分位
• url 查询字段解码

8.类

• ES6 class 的基本语法与特性
• class 与传统构造函数的区别？
• class 的继承机制及 super 关键字作用？
• 静态方法和实例方法的区别？
• class 的私有属性和方法如何实现？

10.ES Module

• ES Module 的基本语法与特性
• ES Module 与 CommonJS 的区别？
• ES Module 的导入导出方式有哪些？
• ES Module 的静态分析和 tree-shaking 原理？
• ES Module 如何在浏览器和 Node.js 中使用？
• 为什么 ESM 支持顶层异步，解决哪些问题?

13.js 引擎原理

• JavaScript、ECMAScript、BOM、DOM、Node.js 之间是什么关系？
• 解释性语言和编译型语言的区别
• 说一下 v8 是如何执行 javascript 语句的 ？
• V8 里面的 JIT 是指什么？
• JavaScript 如何做内存管理？
• 内联缓存
• JS 中的数组和函数在内存中是如何存储的？
• 隐藏类是什么概念？
• 理解 V8 里 Isolate 、Context 等概念么？

17.编码题 / 业务场景代码

• 统计前端请求耗时
• cookie 解析函数
• 如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果
• 使用 Promise 实现一个异步流量控制的函数(限制并发数)
• 集合运算

3.语句和申明

• let const var 区别
• 变量提升
• `for...of`、`for...in`、`for` 循环的区别简表

4.对象

• 原型链？
• new
• 原始封装类型
• 用过 Object 哪些方法
• 什么是属性描述符
• instanceof 的作用
• 如何判定一个属性来自于对象本身， 还是来自于原型链
• 防止对象被篡改有哪些方式

7.函数

• 什么是执行上下文 ?
• 说一下 this？
• 什么是作用域 ？
• ## 什么是闭包？
• 构造函数和普通调用有什么区别？
• JS 有几种创建函数的方式，有哪些区别 ？
• 用过哪些函数对象的方法？
• 函数表达式和函数声明的区别？
• 说一下箭头函数，和普通函数有什么区别？
• call,apply,bind 区别？
• eval 了解多少？

11.迭代器、生成器、元编程

• iterator 是什么？
• 用过 generator ，讲一下？
• 用过 Proxy 么，简单讲解下？
• 用过 Reflect 么，简单讲解下？

14.编码题 / 语言和 API

• `['1', '2', '3'].map(parseInt)` 输出结果？
• 铺平嵌套数组
• 手写实现 instanceof
• 手写实现 Object.create
• 手写 JSON.stringify 和 手写 JSON.parse 实现
• 实现 Promise
• 实现 `Promise.allSettled`
• 手写代码实现 promise.all
• 手写代码实现 promise.race
• promise.finally 怎么实现的？
• 实现 async 函数
• 实现 new 操作符

2.html

1.概念

• doctype(文档类型) 的作用是什么？
• 什么是 HTML 语义化？
• HTML5 引入了哪些核心能力？
• 如何处理 HTML5 新标签的浏览器兼容问题？

4.无障碍

• 页面语义化与地标如何设计？
• 按钮组件的可访问性该如何实现？
• 表单如何实现标签关联与错误宣告？
• 模态对话框如何保证键盘可达和焦点管理？
• 动态内容如何被读屏及时宣告？
• 图像的替代文本应如何编写？

7.elements / 结构元素

• HTML5 语义化结构元素有哪些，如何使用？
• 如何选择合适的内容分组元素？
• 列表元素的使用场景和可访问性实践？

9.webapi / BOM 和 DOM

• 说一下 BOM 对象 ？
• DOM0 到 DOM3 区别？
• dom.contains
• 如何优化大规模 dom 操作的场景
• scrollIntoView api
• documentFragment api 是什么， 有哪些使用场景
• getComputedStyle用法?
• History API ?
• 原生 js 如何进行监听路由的变化
• escape、encodeURI、encodeURIComponent 区别
• URLSearchParams API
• requestIdleCallback api
• 如何判断页签是否为活跃状态
• 移动端如何实现上拉加载，下拉刷新？
• 如何判断dom元素是否在可视区域
• 如何检测网页空闲状态(一定时间内无操作)
• 一次性渲染十万条数据还能保证页面不卡顿
• 计算一段文本渲染之后的长度
• 说下 IntersectionObserver API ？

2.属性

• HTML 全局属性有哪些？
• attribute property 区别?
• data- 属性的好处是什么？
• src 和 href 有什么区别
• crossorigin 的作用是什么
• html rel 属性 的参数 preload和prefetch 的作用是什么

5.HTML 编程实现

• 取出一个 html 树，并返回标签类型和各标签出现次数？
• 查找页面出现次数最多的 HTML 标签
• 前端如何快速获取页面 URL query 参数
• 实现文本溢出 popover 效果
• 不使用 setTimeout 来实现 setInterval

8.elements / 内容元素

• 简述 `<iframe>` 的优缺点及常见应用场景
• a 标签如何保存文件？
• HTML 表格的基本结构有哪些元素？
• 如何实现表格的可访问性最佳实践？
• 如何处理复杂表格的合并单元格？
• input 类型有哪些？
• `<details>` 和 `<summary>` 元素如何使用？
• `<dialog>` 元素的功能和使用场景？
• 如何创建现代化的交互式组件？
• web components 了解多少?

11.webapi / 存储和缓存

• 浏览器的存储有哪些
• Cookie和Session区别？
• localStorage 是同步还是异步
• IndexedDB 存储空间大小是如何约束的？
• WebWorker、SharedWorker 和 ServiceWorker 有哪些区别？
• Service Worker 是如何缓存 http 请求资源的？
• HTML5的离线储存怎么使用，工作原理能不能解释一下？
• 有用过剪切板么，简要讲解下
• 如何通过设置失效时间清除本地存储的数据？
• 在页面关闭时执行方法，该如何做

3.事件

• 事件冒泡是什么?
• 事件委托的作用和意义？
• 说明 load,ready,DOMContentLoaded 的区别
• stopImmediatePropagation 和 stopPropagation 区别
• mouseEnter、mouseLeave、mouseOver、mouseOut 有什么区别？
• drag
• 拖曳控制窗口

6.elements / 元信息和资源

• 说一下 HTMl 下有哪些元素
• HTML5 中 meta 标签作用是啥
• header 的作用 和 head 的区别
• 为什么通常推荐将 CSS `<link>` 放置在 `<head></head>` 之间，而将 JS `<script>` 放置在 `</body>` 之前？你知道有哪些例外吗？
• link 标签有哪些属性，作用是什么？
• 请解释 `<script>、<script async> 和 <script defer>` 的区别
• script 标签设置 `type=module` 和普通脚本有什么区别？
• script 标签设置 `type=module` 和普通脚本有什么区别？
• script 标签设置 `type="importmap"` 是什么，用来解决什么问题？

10.webapi / 网络和通讯

• XMLHttpRequest 和 Fetch API 的区别 ?
• AbortController 和 AbortSignal 有什么区别？
• 取消请求如何实现？
• 如何拦截 web 应用的请求
• Long-Polling、Websockets 和 Server-Sent Event 之间有什么区别？
• 说下 navigator.sendBeacon
• SSE
• 如何实现浏览器内多个标签页之间的通信?
• 跨页面通信方式？
• 文件上传和上传文件解析的原理是啥？
• 使用 ajax 封装一个上传文件的函数
• 如何实现网页加载进度条？
• 如何实现大文件断点续传
• 前端需要加载一个大体积的文件时， 一般有哪些优化思路

12.webapi / 其他

• ResizeObserver 作用是什么
• IntersectionObserver api?
• MutationObserver
• PerformanceObserver 如何测量页面性能
• requestAnimationFrame 是什么，有什么作用？
• canvas 是如何处理复杂事件交互的?
• HTML5 `<video>` 和 `<audio>` 元素如何使用？
• 媒体 API 事件和控制方法有哪些？
• 现代Web媒体技术有哪些？
• 如何判断用户设备
• 前端如何实现截图？
• web 网页如何禁止别人移除水印
• 富文本里面， 是如何做到划词的（鼠标滑动选择一组字符， 对组字符进行操作）
• 如何在划词选择的文本上添加右键菜单（划词：鼠标滑动选择一组字符， 对组字符进行操作）

3.nodejs

1.核心概念

• Node.js 和浏览器有什么区别？
• 是否使用过 Node.js ，用在了哪些场景？
• Node.js 阻塞(Blocking) 和非阻塞(Non-blocking) 是什么意思，有什么作用？
• 并行和并发有什么区别，node 是如何处理的？
• 什么是环境变量，Node.js 如何管理配置环境变量？
• 说一下 Node.js 的事件循环模型？
• Buffer 和 Stream 是什么，有什么区别？

7.api / 网络

• TCP 与 UDP 的区别，Node.js 分别如何使用？
• 为什么以及如何正确使用 HTTP Keep-Alive 与 Agent 连接复用？
• Node.js 中 DNS 解析：dns.lookup 与 dns.resolve 有何区别？
• 什么是 Nagle 算法与延迟确认，何时需要 setNoDelay(true)？
• Socket/HTTP 流的背压如何处理？有哪些限流策略？
• 如何实现最小可用的 HTTPS 与 HTTP/2 服务？

10.tool-chain / 包管理器

• 什么是包管理器，Node.js 下用过哪些包管理器，有什么区别？
• NPM 的架构是怎样的？
• NPM 存在哪些配置，分别有什么功能?
• package.json 中有哪些常用配置?
• 什么是 monorepo 工程有哪些工具架构， 该如何选型 ？
• npm workspaces 是什么概念， 主要是解决什么问题
• 幽灵依赖是什么？
• npm 有哪些常用命令？
• npx 了解多少？
• 有写过 npm 包么，发布一个包涉及哪些流程？
• 什么是 semver 规范，version 中 `~、^` 的含义是什么?
• patch package 是什么如何使用？

2.性能与监控

• 什么是负载？如何查看Node.js运行负载？
• Node.js有哪些错误类型，如何捕获错误？
• 如何进行Node.js内存优化？

5.api / 基础模块

• CommonJS 与 ESM 模块系统区别？
• ESM 支持顶层异步，为什么 Node.js 中可以加载 ESM 模块?
• Node 原生支持哪些模块，有什么区别
• node 是如何实现 require 的？
• exports 和 module.exports 有什么区别？
• node 如何处理循环依赖
• 讲一下 `node:module` 模块?
• 用过 Events 模块么，讲解一下？

8.api / 进程

• nodejs 进程间如何通信?
• worker、child_process、cluster 是什么，有什么区别？
• 用过 cluster 讲一下？
• Node 创建子进程方式有几种，有哪些区别?
• `child.kill` 与 `child.send` 有哪些区别？
• child_process.fork 与 POSIX 的 fork 有什么区别?

12.tool-chain / 其他工具

• 如何使用Node.js创建全局命令行工具？
• 什么是semantic-release？如何实现自动化版本管理？
• pm2 的原理是什么

14.server / 数据库集成

• Node.js如何连接和操作MySQL数据库？
• Node.js如何操作MongoDB数据库？
• 数据库连接池的作用和配置是什么？

3.Node.js编程题

• 什么是热更新，Node.js如何实现热更新？
• 如何设计一个日志系统？

4.杂项问题

• 实现一个命令行工具，统计输入目录下指定代码的行数

6.api / 文件 IO

• 什么是 Stream ，有什么作用？
• 什么是 Buffer？为什么在 Node.js 中需要它？
• 在什么场景下需要直接使用文件描述符？如何确保句柄正确关闭？
• 如何获取文件元信息？`fs.stat` 和 `fs.access` 的区别是什么？
• `readFile`、`readFileSync` 和 `promises.readFile` 有何区别？
• 用过 readline 吗， 解决什么问题？
• `path.join` 和 `path.resolve` 有什么区别？

9.api / 工具

• nextTick/setImmediate/setTimeout 区别 ？
• vm 有什么作用？

11.tool-chain / http 客户端

• axios 有哪些特性？
• axios 适配器是用来做什么的？
• axios 是如何区分是 nodejs 环境还是浏览器环境的？
• axios 拦截器(interceptor) 的原理？
• axios 如何实现取消请求的？
• 解释下 axios withCredentials 配置的作用？

13.server / 服务端框架

• Express中间件(Middleware)的工作原理是什么？
• Koa洋葱模型的原理和实现是什么？
• 什么是SSR，如何实现服务端渲染？

15.server / 部署管理

• PM2部署Node.js有哪些优势？

4.css

1.基础概念

• 什么是CSS盒模型？
• 什么是视觉格式化模型(View formatting model) ?
• 什么是 BFC 有哪些作用？
• 什么是 IFC 和 BFC 有哪些区别？
• 什么是 Cascade?
• 什么是逻辑属性和逻辑值?
• 什么是书写模式(writing-mode),有什么作用？
• 什么是响应式设计？如何实现？
• 什么是视口（Viewport）？如何设置？

5.视觉表现

• 如何实现CSS阴影效果？
• 如何实现CSS渐变效果？

7.现代CSS技术

• 什么是CSS变量（CSS Custom Properties）？
• 什么是CSS容器查询？
• 什么是CSS Grid子网格（Subgrid）？
• 什么是CSS层叠层（Cascade Layers）？
• 什么是CSS嵌套（CSS Nesting）？

10.coding / 布局

• 水平垂直居中
• 实现三栏布局?
• 实现类似 Bootstrap 的栅格布局
• 实现砖块布局(Masonry Layout)
• 如何实现响应式断点设计？
• CSS 如何实现固定长宽比的元素

2.选择器

• CSS选择器有哪些类型？
• CSS选择器优先级如何计算？
• 常用的CSS伪类选择器有哪些？
• CSS属性选择器如何使用？
• 现代CSS选择器有哪些新特性？
• 如何评估 css 选择器性能？

4.布局系统

• CSS 支持哪些布局方式？
• 内联元素是如何布局的？
• CSS 定位有哪些方式？
• 什么是 Flexbox 布局？
• 什么是Grid布局？
• 什么是 CSS 浮动？
• 列布局？
• 如何设置表格布局，有哪些特点？

8.工程与架构

• 什么是 CSS 工程化？
• 用过哪些 CSS 预处理器？
• 有用过 PostCSS 吗？
• 如何优化CSS性能？
• CSS动画性能如何优化？
• 重置 css 和标准化 css 的区别?你会选择哪种?为什么?

12.coding / 动效编程

• CSS3实现卡片翻转？
• CSS如何实现打字机效果？
• CSS如何实现文本溢出处理？
• 如何实现页面顶部自定义滚动进度条？

3.值与单位

• CSS中的值和单位有哪些？
• CSS 1PX 是什么？
• px 如何转为 rem
• CSS 有哪些函数值，用过哪些？
• calc
• line-gradient
• size
• CSS中有哪些颜色表示方法，有什么区别？
• inherit、initial、unset、revert 有什么区别？
• `display:none`、`visibility:hidden` 有什么区别？

6.动画与过渡

• CSS 动画和过渡有什么区别？
• 如何实现 CSS 动画的性能优化？
• 如何实现 CSS 关键帧动画？
• 如何实现 CSS 3D 变换？

9.杂项

• CSS 新特性有哪些？
• 样式隔离方式有哪些？
• 如何避免全局样式污染？
• PostCSS 是什么，作用是什么？
• 伪类和伪元素有什么区别？

11.coding / 常用属性考察

• 实现 table header 吸顶
• 如何实现页面文本不可选中，不可复制
• 三角形 border

5.react

1.核心概念

• 什么是 JSX?
• JSX 支持哪些功能？
• 什么是 Virtual DOM, 它的作用是什么?
• Elements 和 Components 有什么区别？
• 什么是 ReactNode 它和 Element 的区别是什么？
• 什么是高阶组件 (Higher-Order Components HOC) ？
• state 和 props 区别是什么
• 什么是 Context 如何使用?
• 什么是渲染属性(render props) ?
• 什么是 React Hooks，它解决什么问题？
• 什么是 Reconciliation?
• 什么是 合成事件(synthetic event) ，它有什么作用?
• React Fiber 是什么，解决什么问题?
• React 中纯函数的概念是什么？
• React 和 Vue 有什么区别？

4.API

• 说一下 React 中有哪些内置 API?
• createElement 和 cloneElement 的区别？

5.原理

• react 和 react-dom 是什么关系？
• React 中 mode 是什么？
• Fiber 是什么，有哪些作用?
• react 是如何进行渲染的？
• react hooks 核心原理？
• ref 是如何实现的?
• 为什么不能在循环、条件或嵌套函数中调用 Hooks？
• 为什么要自定义合成事件
• lazy import
• react 优化手段有哪些？
• 在 React 应用中如何排查性能问题?
• 如何确定哪个数据变化引起的组件渲染?

2.组件

• 构建组件的方式有哪些?
• 类组件继承 Component 和 PureComponent 有什么区别？
• 类组件 和 Function Components 的区别？
• 受控和非受控组件区别?
• React 有哪些内置组件？
• 说一下 Suspense 和 lazy 的使用场景？
• createPortal 了解多少？
• 说一下 ViewTransition 的使用 ?
• 组件生命周期
• 父组件如何调用子组件的方法?
• react 组件通信方式
• 请求在哪个阶段发出，如何取消请求？
• jsx 返回 null undefined false true 区别？
• JSX 如何渲染 HTML 注释节点 ？
• React.Children.map 和 props.children 的区别
• setState() 是同步还是异步？？
• react 中的 key 有什么作用
• react 中如何引入样式

6.编码

• 如何在 React 中实现类似 Vue keep-alive 的功能？
• 如何实现转场动画？

8.工具链 / 工具链

• 用过 redux 说下核心概念？
• 说一下 `redux`、`@reduxjs/toolkit`、`react-redux` 的区别？
• redux 是如何实现中间件机制的？
• redux-thunk 是什么？

3.钩子

• React 内置了哪些 hooks ?
• 说一下 useState 的使用？
• 说一下 useRef？
• useReducer 的作用，和 useState 有什么区别？
• 说一下 useEffect?
• useLayoutEffect 和 useEffect 有什么区别?
• useCallback 和 useMemo 有什么区别，如何使用？
• useContext 的作用是什么 ？
• useReducer 和 useState 有什么区别？
• useInsertionEffect 有什么用？
• useActionState 和 useFormStatus 有什么区别?
• useDeferredValue 和 useTransition 的区别?
• useImperativeHandle 的作用?
• useSyncExternalStore 的作用?
• useOptimistic 的作用?
• useId 的作用?
• useDebugValue 的作用?
• 写过哪些有意思的 hooks？

7.工具链 / 路由

• React Router 中 mode 有哪几种有什么区别？
• BrowserRouter、 HashRouter 、MemoryRouter 有什么区别？
• React Router 的路径支持哪些匹配模式?
• 如何监听路由变化?
• react-router 页面间如何传递信息？
• React Router 如何实现类似 Vue 导航守卫效果？

9.工具链 / 其他常用库

• react 中如何书写样式，有哪些模式？

6.vue

1.核心概念

• Vue2 与 Vue3 的主要区别是什么？
• MVC、MVP、MVVM 是什么意思， Vue 属于哪种？
• 什么是响应式？
• 什么是组件？
• 什么是虚拟 DOM (virtual DOM)和组件(Component)的关系是什么 ?
• 组合式 API 是什么， 和选项式 API 的区别?
• 什么是指令？
• 什么是编译器宏？

5.API

• Vue 的 app 实例支持哪些方法和配置
• 有使用过 Vue 插件么，说下使用场景？
• 说一下 nextTick 的使用场景？
• 有使用过哪些 Vue 内置的组合式 API？
• vue 如何配置全局使用的定义或者常量

6.工具链

• 说一下日常使用 Vue 中涉及那些工具链？
• 说一下用过 Vue Router 哪些功能 ？
• Vue Router histroy 和 hash 模式有什么区别？
• 路由守卫
• vuex 和 Pinia 有什么区别
• vuex 原理
• 针对 Vue 做过哪些性能优化
• vue3 相比较于 vue2 在编译阶段有哪些改进

2.响应式

• Vue2 和 Vue3 响应式系统的区别和原理？
• watch 和 computed 有什么区别吗
• ref 和 reactive 有何区别吗
• watch 和 watchEffect 使用有何区别
• provide inject 的使用场景？
• 说下 effectScope ？

4.指令

• 有用过指令么，Vue 有哪些内置指令 ?
• 有用过自定义指令么，说下使用场景？
• v-if 和 v-show 差别
• 为何 v-if 和 v-for 不能同时用在同一个元素上？
• v-bind 和 v-model 有什么区别， 如何使用
• ref 的作用？
• 修饰符
• vue 是如何识别和解析指令

7.编码题

• 实现一个文件夹树组件，支持拖拽排序
• 实现一个 ErrorBoundary 组件，捕获子组件的错误并可自定义错误组件
• 实现下拉菜单，支持点击区域外关闭下拉组件？
• 实现一个简单的 i18n (国际化 (Internationalization) 的缩写) 插件

3.组件

• Vue 的组件有哪些类型?
• 组件生命周期?
• 组件包含哪些核心选项？
• 什么是单文件组件, 如何使用？
• 有用过 `<script setup>` 吗, 它和 option 方式有什么区别？
• `<style scope>` 是怎么做的样式隔离的
• 什么是函数组件，和 JSX、渲染函数有什么关系？
• JSX 和采用单文件组件编写有哪些区别？
• 什么是异步组件，是如何实现的？
• 组件通信策略和方法有哪些？
• Vue 有哪些内置组件?
• Teleport 组件功能？
• KeepAlive 组件功能？
• component 元素了解么，它是如何实现动态挂载的？
• 讲解一下插槽的使用？
• 了解 Vue 组件的整个渲染流程么，如何处理挂载和更新的？
• Vue3 是怎么实现 template 支持多个根节点的？
• Vue 的 DOM diff 算法是如何实现的？
• SFC 是如何处理的

7.React Native

1.架构与运行机制

• RN 的整体架构与渲染原理？
• JS ↔ 原生通信是如何实现的？
• Fabric 渲染管线是什么？
• TurboModule 与旧 NativeModule 的差异？
• Hermes 引擎的价值与限制？
• UI 组件如何映射到原生控件？
• 事件与手势从原生回传 JS 的过程？
• 旧 → 新架构迁移路径与风险？
• 常见通信与渲染瓶颈有哪些？

4.登录授权与网络存储

• 登录鉴权链路如何设计？
• 权限与隐私合规如何落地？
• 请求层如何封装与容错？
• 本地存储与缓存策略？

2.React Native

• React Native 工作原理是什么？
• 动画与手势应如何实现与优化？
• 布局与样式有哪些坑与最佳实践？
• 网络与离线能力如何设计？
• 调试与性能诊断如何落地？
• 本地存储方案如何取舍？
• 错误处理与崩溃治理如何做？
• 应用体积如何优化？
• Monorepo 与多包协作如何落地？
• 推送通知与消息到达如何实现？
• RN 状态管理如何选择与落地？
• 图片与资源加载如何优化？
• RN 测试体系如何搭建？
• Deep Link 与 Universal Link 如何落地？
• 权限与后台任务如何处理？
• 可访问性与国际化如何实践？
• 安全与数据保护的最佳实践？
• CI/CD 与构建交付如何设计？
• RN 的跨平台能力与局限是什么？
• 新架构 Fabric / TurboModule 与旧架构对比？
• RN 性能优化实战有哪些？
• 如何编写原生模块与原生 UI 组件？
• 导航方案如何选择与取舍？
• 打包发布与 OTA 有哪些要点？
• Hermes 引擎的价值与限制是什么？
• JSBridge 是什么？原理是什么？

3.工程化与构建交付

• 项目结构与多端适配如何设计？
• 包体与资源如何优化与监控？
• CI/CD 与自动化发布如何落地？
• 质量保障：测试体系如何搭建？
• 监控与稳定性如何设计？

5.性能与体验优化

• 首屏优化如何落地？
• 列表/滚动性能如何优化？
• 图片与资源加载如何优化？
• 动画与手势如何保证流畅？
• 弱网与离线体验如何设计？
• 性能度量与优化闭环如何建立？

6.端能力与支付、安全与合规

• 相机/媒体能力如何封装？
• 定位/地图如何处理权限与体验？
• 蓝牙/NFC/系统能力如何适配？
• 通知/推送到达如何保障？
• 支付闭环如何设计与防护？
• 数据安全与敏感信息保护如何做？
• 合规与隐私政策如何落地？

8.小程序

1.架构与运行机制

• 小程序整体架构与运行原理？
• 为什么小程序有逻辑层与渲染层两线程？
• 为什么不能直接操作 DOM？
• setData 工作机制与性能陷阱？
• 页面/组件生命周期与事件模型？
• JS 运行时(JSCore/V8/X5) 有何差异与限制？
• 页面/组件/全局的数据通信？
• 原生组件/同层渲染的作用与限制？
• Worker/分线程如何使用？
• WXS 在哪些场景合适？

2.工程化与构建交付

• 项目结构与多端适配如何设计？
• 分包、独立分包与按需加载策略？
• 小程序的 CI/CD 与自动化发布？
• 质量保障：Lint/单测/E2E 如何落地？
• 监控与稳定性体系怎么搭？
• 小程序拆包限制与优化建议？

5.端能力与支付、安全与合规

• 图片/视频/相机/扫码能力如何封装？
• 定位/地图如何处理权限与体验？
• 蓝牙/NFC/系统能力如何适配？
• 支付闭环如何设计与防护？
• 消息/通知与到达效果如何保障？
• 数据安全与敏感信息保护如何做？
• 合规与隐私政策如何落地？
• 应急与回滚策略如何设计？

3.登录授权与网络存储

• 登录鉴权完整链路怎么设计？
• 用户授权能力与合规注意点？
• 请求层如何封装与容错？
• 存储与缓存策略如何选择？

4.性能与体验优化

• 首屏性能如何优化？
• 包体与资源体积如何控制？
• 长列表/滚动性能如何优化？
• 图片加载与显示如何提速？
• setData 频率与数据量如何把控？
• 弱网与离线体验如何设计？
• 卡顿与掉帧如何定位？
• 动效与交互流畅度如何保障？
• 骨架屏/占位与渐进式渲染？
• 性能度量与优化闭环如何建立？

9.nuxt

1.Nuxt 核心概念

• 什么是 Nuxt，它解决了什么问题？
• Nuxt 与 Vue 有什么区别和联系？
• Nuxt 3 相比 Nuxt 2 有哪些重大改进？

4.自动导入

• Nuxt 的自动导入功能是如何工作的？
• 如何自定义自动导入的组件和函数？
• 自动导入对性能有什么影响？

2.目录结构

• Nuxt 项目的标准目录结构是什么样的？
• pages 目录如何自动生成路由？
• layouts 目录的作用和使用方式？

5.模块系统

• Nuxt 模块系统是什么，如何使用？
• 如何开发和发布自定义 Nuxt 模块？
• 如何选择合适的 Nuxt 模块？

3.渲染模式

• Nuxt 支持哪些渲染模式，各有什么特点？
• 什么是混合渲染，如何实现？
• 如何优化 Nuxt 应用的渲染性能？

6.编程题

• 实现一个支持 SSR 的用户列表组件
• 实现一个支持深色模式的 Nuxt 应用
• 实现一个支持实时通信的聊天应用

10.engineering

1.概念

• 如何理解前端工程化？
• 什么是前端模块化
• 什么是同构
• 什么是前端脚手架？为什么需要它？
• 如何开发一个脚手架工具？

4.部署集成

• CI 和 CD 的区别
• 前端应用 CICD 有哪些方式实现
• 应用如何做应用灰度发布

6.调试能力

• 如果用户说 web 应用感觉很反应慢或者卡顿，该如何排查？
• 如何定位一个偶现的问题？
• 如何禁止别人调试自己的前端页面代码？
• 用户访问页面白屏了，原因是什么，如何排查？
• 网页卡顿问题排查（Jank）
• Source Map 原理与应用
• 内存泄漏定位与排查
• 页面崩溃监控与排查

9.compilers-bundler / babel

• 日常有使用过 babel 么，用在哪些场景？
• babel 是如何工作的？
• 如何编写 babel 插件

11.compilers-bundler / vite

• vite 和 webpack 区别
• vite 为什么开发和构建会采用不同工具链？
• vite dev 是如何工作的, 为什么快，有什么缺点?

12.compilers-bundler / 其他打包器

• rollup 为什么快
• rollup 内联优化是什么？

13.performance / 浏览器原理

• 浏览器架构及主要组成部分？
• 常见浏览器内核及区别？
• 输入 url 到页面渲染全过程？
• 什么是合成阶段(Compositing)？
• 什么是光栅化(raster)，软件光栅化和 GPU 光栅化的区别？
• DOM/CSSOM/渲染树构建？
• 事件循环原理、宏任务与微任务？
• 重排和和重绘及优化？
• 浏览器渲染进程内存结构是怎样的？
• 浏览器缓存中 Memory Cache 和 Disk Cache， 有啥区别？

17.performance / 图像和多媒体

• 图片优化策略?
• 图片懒加载原理？
• 请解释什么是精灵图（css sprites），以及如何实现？

2.lint-test

• eslint 是如何工作的？
• eslint 如何实现增量 lint?
• TDD、BDD、DDD 分别指？
• 测试金字塔与主流测试类型有哪些？
• 单元测试和端到端测试的区别？
• 如何针对 React Hooks 写单测？
• 代码覆盖率一般有什么手段？

5.安全

• 常见 web 安全问题
• 什么是 CSP?
• csrf
• xsrf
• xss
• 前端如何防止加载外域脚本？
• 什么是 SRI 作用是什么?

8.杂项

• SEO 技术优化策略有哪些？
• eslint 该如何配置
• eslint 有哪些实用的插件， 该如何配置
• ESLint 如何集成到 webpack
• 如何定制化开发一个 eslint 插件，功能是实现提示检验某一个项目里面的字符串 error
• 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)？
• Polyfill 和 shim 有什么区别？
• corejs 是做什么用的？
• 描述 SEO 的最佳实践或你最近使用的技术
• 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？
• 请谈谈你对网页标准和标准制定机构重要性的理解？
• 日志监控：如何还原用户操作流程
• source map 可有办法将请求的调用源码地址包括代码行数也上报上去
• 如何做国际化？
• 站点如何防止爬虫？
• SemVer（Semantic Versioning）
• 如何在前端团队快速落地代码规范

14.performance / 方法和指标和工具

• 如何做性能优化的？
• 常用性能指标
• 有哪些前端性能分析工具
• 说一下 Performance API
• 说一下什么是 FCP?
• FP、FCP 有什么区别和白屏时间有什么关系？
• 如何统计资源加载耗时？
• 如何监控卡顿?
• 如何实现自定义指标采集？
• 如何计算白屏率?

3.git

• 常用的 git 命令有哪些？
• 在开发过程中，想做 git 代码暂存，该如何做
• git-rebase
• git bisect
• git pull 和 git fetch 区别
• git 仓库迁移应该怎么操作？
• git 中回滚代码有哪些操作？
• git reset 作用是啥，有哪些操作？
• git merge 和 git rebase 区别

7.编码

• 实现 Awaited 类型定义
• 应用上线后， 怎么通知用户刷新当前页面？
• 简单实现一个洋葱模式中间件
• 大文件上传了解多少
• 解决重复引用 node_modules 里面的不同版本的包(包重复问题)

10.compilers-bundler / webpack

• 有用过 webpack 或其他打包工具么，它们有什么特点解决什么问题？
• webpack 的主要配置项有哪些
• module、chunk 、output 的区别
• loader 和 plugin 是什么，有什么区别, 用过哪些 loader 和 plugin
• 如何写一个 loader
• 如何写一个 plugin ？
• webpack 原理
• webpack 输出的 bundle 是如何实现加载顺序不影响运行的
• 了解 tapable 么？
• webpack 优化
• 说下异步加载
• tree-shaking
• sideEffects 属性的作用是啥
• webpack externals 是如何加载外部依赖的
• webpack5 Module Federation
• webpack热更新原理是什么？
• webpack-dev-server 的功能
• source map 配置和原理

15.performance / 资源加载

• CSS 加载是否阻塞 DOM 解析、渲染和 JavaScript 执行？
• `@import` 是否会阻塞主线程？
• 什么是文档的预解析
• 什么是资源预热，有哪些手段？

16.performance / 渲染和运行时

• 如何优化 DOM 来提升性能？
• DOM 和 GPU 加速的关系？
• 如何优化 CSS 来提升性能？

11.typescript

1.核心类型系统

• TypeScript中有哪些基础类型，各自的作用是什么？
• any、never、unknown、null、undefined和void有什么区别？
• 什么是联合类型？如何使用？
• 什么是类型断言？有哪些方式？
• 什么是类型守卫？如何实现？
• 介绍TypeScript中的类型兼容性——逆变、协变、双向协变和不变
• is关键字的作用是什么？
• typeof、instanceof、in操作符在TypeScript中的作用
• 如何使用unknown类型替代any？
• TypeScript中的类型推断机制是如何工作的？

2.高级类型特性

• TypeScript中的泛型是什么？如何使用？
• 什么是条件类型？infer关键字如何使用？
• 什么是映射类型？如何自定义映射类型？
• TypeScript内置工具类型有哪些？如何使用？
• extends关键字在TypeScript中有哪些用法？
• 什么是模板字面量类型？如何使用？
• 如何实现一个深度递归的类型工具？

3.类型声明和定义

• interface和type有什么区别？何时使用哪个？
• 枚举和常量枚举有什么区别？
• const和readonly有什么区别？
• in操作符在TypeScript中的作用是什么？
• 什么是声明文件？如何编写.d.ts文件？
• 如何扩展已有的类型或模块？

4.配置和工程实践

• tsconfig.json中有哪些重要的配置项？
• types和typeRoots有什么区别和作用？
• JS项目如何迁移到TypeScript？
• 编译选项中的严格模式配置有哪些？
• 路径映射（Path Mapping）如何配置和使用？

12.数据结构和算法

1.复杂度分析

• 什么是大 O 表示法，它的作用是什么？

4.哈希和散列表

• LRU缓存机制如何实现？
• TreeMap和HashMap的区别是什么？
• 一致性哈希如何实现？
• 洗牌算法如何实现？
• HashMap的并发问题有哪些？

5.栈和队列

• 说一下栈和队列的结构的特点？
• 括号匹配
• 递减栈温度匹配
• 最小栈
• 双端队列最近的较大元素

8.图

• 图的遍历
• 最短路径算法
• 最小生成树
• 拓扑排序

10.动态规划

• 爬楼梯
• 斐波那契数列
• 最长递增子序列
• 编辑距离
• 背包问题
• 路径规划

2.数组

• 说一下 Array 的常用方法?
• 数组合并？
• 三数求和？
• 两数求和问题？
• 最大子数组和
• 寻找数组中的第 k 大元素
• Fizz Buzz 问题
• 寻找首次匹配子序列
• 移动零

7.树

• 数组转换为树
• 深度遍历？
• 广度遍历？
• 树的先序,中序,后续?

9.回溯

• 打印所有长度为 n 的二进制数
• 子集
• 组合问题
• 全排列
• 组合总和
• N 皇后问题

13.编码

• UTF-8、ASCII、UTF-16有什么区别？
• Base64编码原理是什么？
• 霍夫曼编码如何实现？

3.字符串

• 字符串匹配
• 字符串转换为整数
• 最长回文子串
• 字符串的全排列
• 字符串的子序列
• 字符串/数组处理
• 大数字符串相加/相乘

6.链表

• 数组转换为链表?
• 单向链表结构实现?
• 合并两个有序链表
• 删除存在重复值的节点
• 删除倒数第 n 个节点
• 翻转链表
• k 接翻转链表
• 判断单向链表是否是循环链表
• 判断单向链表是否是循环链表
• 定位环起点

11.排序

• 常见数组排序算法有哪些？

12.搜索

• 二分查找如何实现？
• 树结构查找如何实现？

14.杂项

• 大数字符串运算如何实现？
• 海量数据中如何找TopK？
• 岛屿数量问题如何解决？

13.network

1.概念

• 网络模型
• 网络的核心指标有哪些
• 常见网络协议有哪些

4.CDN

• CDN 的概念及作用？
• 什么是 CDN 预热？
• CDN 刷新是什么？
• CDN 缓存策略有哪些？
• CDN 是如何工作的？

6.DNS

• DNS 协议了解多少？
• 如何加快 DNS 的解析？
• DNS 解析方式和流程
• 完整域名的构成部分
• 什么是 DNS 劫持？

10.http / HTTP 缓存机制

• HTTP 缓存控制策略
• Expires 和 Cache-Control 的区别
• Application Cache API 缓存机制
• Service Worker 缓存机制
• Expires 和 Cache-Control 的区别
• Application Cache API 缓存机制
• Service Worker 缓存机制
• Date 与 Last-Modified 的区别
• no-cache 与 no-store 的区别
• ETag 值改变与文件内容

2.IP

• 什么是 MAC 地址？
• 什么是 IP 地址？
• IP 地址的分类和子网划分
• 什么是 IPv4 和 IPv6？
• IP 报文的组成和结构
• 什么是 NAT？NAT 的作用是什么？
• 什么是 IP 分片？
• 什么是 ARP 和 RARP？

5.WebSocket

• 什么是 WebSocket？它与 HTTP 的主要区别是什么？
• 请详细描述 WebSocket 握手过程及数据帧格式?

8.http / HTTP 基础协议

• HTTP 基本流程
• HTTP 协议有什么特点？
• HTTP 报文组成部分？
• HTTP 请求方法详解
• GET 和 POST 的区别？
• HTTP 状态码详解
• 什么是 HTTP 持久连接？
• 什么是 HTTP 管线化？
• HTTP 重定向机制
• HTTP 向 HTTPS 重定向状态码
• URL 的长度限制
• 浏览器队头阻塞优化

11.http / HTTP 版本演进和 HTTPS

• HTTP/1.1、HTTP/2、HTTP/3 区别详解
• 如何从 HTTP/1.1 迁移到 HTTP/2
• HTTP/1.1 keep-alive 和 HTTP/2 多路复用的区别
• HTTP/2 多路复用详解
• HTTP/2 首部压缩机制
• 为何 HTTP/2 快速过渡到 HTTP/3
• HTTP/3 核心新特性
• 深入研究 HTTPS
• HTTPS 性能优化
• TLS 和 SSL 的区别
• HTTPS 安全协议

3.udp tcp

• 概述下 UDP 的功能
• 概述下 tcp 的功能
• TCP 和 UDP 的区别和应用场景
• 什么是 TCP 快速启动
• TCP 如何保证数据包传输的有序可靠
• TCP 的重传机制是怎样的
• TCP粘包了解多少
• TCP 拆包了解多少
• 什么是 TCP 流量控制，如何配置？
• 什么是 TCP 拥塞控制，如何配置？

7.其他

• 可有办法判断用户的网络条件, 判断网速快慢，网络状态？
• web 应用中如何对静态资源加载失败的场景做降级处理
• 怎么处理连接雪崩问题?

9.http / HTTP 头部和消息

• 常见的 HTTP 请求头和响应头
• HTTP 头部字段详解
• HTTP Content-Type 详解
• application/xml 和 text/xml 的区别
• HTTP 中的 CSP 安全策略
• HTTP 中的 HSTS 机制
• 正向代理和反向代理
• 数字证书详解
• 切片上传 vs 整体上传

12.http / 跨域和状态管理

• 什么是跨域资源共享 (CORS)？它用于解决什么问题？
• 预检请求的作用
• 如何避免 CORS 中的安全问题
• Cookie 详解
• 站点如何保持登录状态
• Session 会话管理详解
• AJAX 工作原理
• JSONP 原理和回调过程详解

14.os

1.index

• 什么是 inode？
• 软链接和硬链接的区别是什么？
• 常见的文件系统有哪些区别？
• 进程和线程有什么区别？
• 什么是进程间通信(IPC)？
• 操作系统的权限管理模型有哪些？
• 操作系统是如何管理内存的？

15.system-design

1.系统方法论与容量

• 系统设计的一般流程是什么？
• 如何进行容量估算并转化为资源指标？
• 当 QPS 达到峰值时如何处理？
• 如何定义 SLI/SLO 与错误预算？
• 前端性能预算与容量的关系？
• 如何设计限流、熔断、降级策略？
• 回滚与灰度策略如何制定？
• 如何制定成本与权衡记录？
• 压测方案与容量回归如何执行？
• 故障演练与复盘要点？

4.集成与接口

• 如何在前端架构中选择 BFF/GraphQL/REST？
• Cookie/Session/JWT/OAuth2/SSO 取舍？
• 单点登录（SSO）的一般流程？
• 如何设计上传：分片与断点续传？
• API 幂等与重试退避如何落地？
• 前端安全基线与风控接入？
• BFF 的限流、熔断、降级？
• API 版本与演进策略？
• 下载与断点续传/范围请求？
• 大表单/批处理接口设计？
• 第三方集成回调/签名校验？

8.编码

• 如何设计 Twitter/Feed 系统？ ✅
• 前端登录鉴权如何设计？✅
• 如何设计低代码平台？✅
• 如何实现一个前端沙箱系统？ ✅
• 如何实现一小时内的 Top10 播放榜？ ✅
• 如何从 0 到 1 搭建前端基建？ ✅
• 如何设计图床系统？✅
• 如何设计短链系统？✅
• 如何设计云盘系统？✅
• 前端如何用 Canvas 实现电影院选座？ ✅
• 如何做好前端监控方案？ ✅

2.交付与缓存

• 前端如何利用 CDN 与负载均衡？
• SSR/SSG/ISR 的缓存如何取舍？
• 将静态资源缓存在本地的方式？
• SPA History 路由 Nginx 配置？
• 如何解决页面请求与资源下载的大规模并发？
• 如何设计缓存失效与预热策略？
• 如何防止缓存穿透/击穿/雪崩？
• 边缘计算与函数如何参与渲染？
• 前端资源优先级与连接策略？
• 图片与媒体的多级缓存策略？
• A/B 与灰度对缓存的一致性影响？
• 端到端缓存观测与告警？

6.系统设计 · 架构

• 模版引擎实现原理
• 什么是领域模型（DDD）与前端如何划分？
• 如何理解前端架构？
• 前端架构和前端工程化有什么区别？
• 前端路由的实现原理（Hash/History）
• 实现 JS 沙盒的方式有哪些？

7.编码 / 如何设计组件库？

• 实现 Tooltip 组件？
• 实现支持 API 调用的 Modal 组件？
• 实现 Message/Notification 组件？
• 实现 Form 组件，支持联动校验？
• 实现 Select/Autocomplete？
• 实现 Cascader ？
• 实现树组件？
• 实现 Table 组件？
• 实现分页组件 Pagination？
• 实现日期选择器组件支持范围选择？
• 实现 Upload 组件？
• 实现 Tabs 组件？
• 实现 Popover/Popconfirm ？
• 实现吸顶组件 Affix ?
• 实现骨架图组件 Skeleton?
• 虚拟列表？
• 实现类似 Swiper 的幻灯片组件?
• 实现节点连线效果?
• 实现电梯导航?
• 实现长文本溢出自动折叠？

3.存储与一致性

• 如何设计幂等与防重放，兼顾最终一致性？
• 读写路径如何优化与隔离？
• 分区与一致性哈希如何选择？
• 副本与复制策略如何取舍？
• 如何处理事务与一致性等级？
• 搜索与索引设计要点？
• 数据冷热分层与成本优化？
• 事件溯源与补偿实践？
• 前端缓存与服务端一致性协调？
• 跨区域多活下的数据一致性？

5.实时与弹性

• WebSocket/SSE/WebRTC 取舍？
• 如何用消息队列与流式计算削峰填谷？
• 如何设计回压与排队策略？
• 连接与会话的弹性治理？
• 端到端观测指标如何定义？
• 在线协作/IM 的实时一致性？
• 推送/订阅的多租户隔离？
• 边缘推送与离线能力？
• 实时系统的压测与演练？
• 故障注入与自愈策略？

16.编程范式

1.面向对象

• 什么是面向对象编程（OOP）？它与函数式编程有何区别？

2.函数式

• 函数式编程了解多少？
• 函数副作用具体指什么
• 函数柯里化是什么？
• 什么是高阶函数，它和柯里化有什么区别？
• 什么是偏函数 ？
• 什么是 Compose ？
• 什么是管道 (Pipeline)？
• 什么是函子？
• 什么是 Monad?
• 续延传递风格 Continuation-Passing Style （简写 CPS）
• λ 演算是什么

17.interview

1.软技能面试

• 当和上级或同事意见不同时，你是如何处理的？
• 有什么问题要问我？
• 你最近遇到过什么技术挑战？你是如何解决的？
• 你通过哪些方式获取前端学习资源？
• 描述一下你编写一个页面的完整工作流程？
• 你昨天/上周学了什么新东西？
• 你有设计过通用组件吗？能介绍一下设计思路吗？
• 说一下你熟悉的版本控制系统和工作流程？
• 如何在项目中考虑UI、安全性、性能、SEO、可维护性等因素？
• 能说说你最得意的项目吗？
• 编写代码的哪些方面最让你兴奋？
• 如果你今年要掌握一项新技术，会选择什么？
• 你写代码时如何保证细节的准确性？