前端知识库前端三大件
从页面结构、样式系统到语言运行机制，建立稳定的 Web 基础。
98 篇文档
CSS 基础知识速览
px 固定像素；em/rem 与字体相关；vw/vh/vmin/vmax 与视口相关。
说说你对盒子模型的理解
盒子模型是 CSS 最核心的概念之一，它定义了元素如何在页面上占据空间。面试中考察这个问题，主要是想了解候选人对 CSS 布局基础的理解程度，以及是否清楚标准盒子模型和 IE 怪异盒子模型的区别。
谈谈你对 BFC 的理解
BFC (Block Formatting Context) 是 CSS 中一个非常重要但容易被忽视的概念。面试中考察 BFC，主要是想了解候选人是否理解 CSS 的渲染机制，以及能否利用 BFC 解决实际布局问题。
什么是响应式设计？响应式设计的基本原理是什么？如何做？
响应式设计是现代 Web 开发的核心能力。面试中考察这个问题，主要是想了解候选人是否具备多端适配的思维，以及是否掌握实现响应式布局的各种技术手段。
元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
元素居中是 CSS 布局中最常见也是最容易出错的问题。面试中考察这个问题，不仅是考察技术掌握度，更是考察候选人对 CSS 布局原理的理解深度。
如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
两栏/三栏布局是 Web 开发中最经典的布局模式。面试中考察这个问题，主要是想了解候选人对 CSS 布局技术的掌握程度，以及能否根据场景选择最合适的方案。
CSS 选择器有哪些？优先级？哪些属性可以继承？
CSS 选择器是样式应用的基础，优先级计算是样式冲突时的裁决机制，而属性继承则关系到样式的传播方式。这三个概念是 CSS 最核心的基础知识。
CSS 中，有哪些方式可以隐藏页面元素？区别？
隐藏元素是常见需求，但不同的隐藏方式有不同的效果：有的完全从文档流移除，有的仅不可见但仍占位，有的还能响应交互。面试中考察这个问题，是想要了解候选人是否能根据场景选择合适的技术方案。
如何实现单行／多行文本溢出的省略样式？
文本溢出处理是 UI 开发中的常见需求，涉及到文本截断、省略号显示等。面试考察这个问题，主要是想了解候选人对 CSS 文本属性的掌握，以及是否能处理多行截断的复杂场景。
CSS 如何画一个三角形？原理是什么？
用 CSS 画三角形是一个经典的"奇技淫巧"，考察的是对盒子模型，特别是 border 特性的深入理解。面试官希望看到候选人能够解释原理，而不仅仅是背代码。
如何使用 CSS 完成视差滚动效果？
视差滚动（Parallax Scrolling）是一种通过多层背景以不同速度移动来创建立体运动效果的技术。面试考察这个问题，是想要了解候选人是否掌握 CSS 高级特性，以及能否用纯 CSS 实现视觉效果。
CSS3 新增了哪些新特性？
CSS3 是 CSS 的重大升级，引入了大量新特性。面试考察这个问题，是想要了解候选人对现代 CSS 的掌握程度，以及能否运用这些新特性解决实际问题。
CSS3 动画有哪些？
CSS3 动画让网页从静态变为动态，是提升用户体验的重要手段。面试考察这个问题，是想要了解候选人对 CSS 动画技术的全面掌握，包括过渡、变换和关键帧动画的使用和区别。
介绍一下 Grid 网格布局
Grid 布局是 CSS 最强大的二维布局系统，能够同时处理行和列。面试考察这个问题，是想要了解候选人是否掌握现代 CSS 布局技术，以及能否利用 Grid 解决复杂布局问题。
说说 Flexbox（弹性盒布局模型），以及适用场景
Flexbox 是现代 CSS 布局的基石，它彻底改变了我们处理一维布局的方式。面试考察这个问题，是想要了解候选人是否掌握弹性布局的核心概念，以及能否灵活运用各种属性解决实际布局问题。
说说设备像素、CSS 像素、设备独立像素、dpr、ppi 之间的区别
随着移动设备和视网膜屏幕的普及，理解像素相关的概念变得至关重要。面试考察这个问题，是想要了解候选人对移动端适配、高清屏处理等实际问题的理解深度。
说说 em/px/rem/vh/vw 区别
CSS 单位是样式的基础，不同单位有不同的计算基准和适用场景。面试考察这个问题，是想要了解候选人对响应式设计和可访问性的理解。
让 Chrome 支持小于 12px 的文字方式有哪些？区别？
Chrome 浏览器默认最小字号为 12px，这是为了中文阅读体验。但在某些设计场景（如标签、注释）中可能需要更小的文字。面试考察这个问题，是想要了解候选人对浏览器特性和 CSS 缩放技术的掌握。
怎么理解回流跟重绘？什么场景下会触发？
回流（Reflow）和重绘（Repaint）是浏览器渲染机制的核心概念，直接影响页面性能。面试考察这个问题，是想要了解候选人对浏览器工作原理的理解，以及能否写出高性能的 CSS。
说说对 CSS 预编语言的理解？有哪些区别？
CSS 预处理器扩展了 CSS 的功能，让样式代码更具可维护性。面试考察这个问题，是想要了解候选人是否掌握现代 CSS 开发工具，以及能否根据项目需求选择合适的预处理器。
如果要做优化，CSS 提高性能的方法有哪些？
CSS 性能优化直接影响页面加载速度和渲染流畅度。面试考察这个问题，是想要了解候选人是否具备性能意识，以及能否从多个维度思考和解决性能问题。
CSS 高频追问 Q&A
A: 解决外边距折叠、包裹浮动、隔离布局影响。（深入阅读：BFC 原理与应用）
CSS 面试真题补充：布局边界、渲染与性能
根据编号 12《CSS 面试真题》补充响应式、居中、选择器、隐藏、动画、Flex/Grid、像素、回流重绘和性能场景。
CSS 布局、渲染与资深面试
从层叠、格式化上下文和内在尺寸深入到布局算法、层叠上下文、性能与设计系统。
ES6 基础知识速览
let/const 具备块级作用域，避免 var 提升和污染问题。（深入阅读：变量提升与暂时性死区）
var、let、const之间的区别
这个问题考察的是对 JavaScript 变量声明方式演进的理解。ES6 引入了 let 和 const，与原有的 var 形成了三种声明方式。理解它们之间的区别是掌握现代 JavaScript 的基础，也是面试中的高频考点。
ES6中数组新增了哪些扩展
ES6 对数组进行了大量增强，提供了更强大的数组操作能力。这个问题考察对 ES6 数组新特性的全面掌握程度，包括扩展运算符、新的静态方法、实例方法等。
ES6中函数新增了哪些扩展
ES6 对函数进行了重大改进，引入了默认参数、rest 参数、箭头函数等特性。这些问题考察对函数新特性的理解，以及箭头函数与传统函数在 this 绑定上的关键区别。
ES6中对象新增了哪些扩展
ES6 对对象进行了大量增强，使得对象字面量的写法更加简洁，同时新增了许多实用的静态方法。这个问题考察对对象新特性的全面掌握，包括简洁表示法、属性名表达式、扩展运算符、新的静态方法等。
你是怎么理解ES6中Promise的？使用场景？
Promise 是 ES6 引入的异步编程解决方案，用于解决回调地狱问题。这个问题考察对 Promise 核心概念、状态流转、方法使用以及实际应用场景的理解。
你是怎么理解ES6中Module的？使用场景？
这个问题考察对ES6模块化系统的理解，包括模块化的意义、ES6 Module与CommonJS的区别、各种导出导入语法以及实际应用场景。需要从语言设计层面理解模块化的价值，以及ES6 Module的静态特性带来的优势。
你是怎么理解ES6中Generator的？使用场景？
Generator是ES6引入的一种特殊的函数，它是异步编程的重要解决方案之一。这个问题考察对Generator函数的本质理解（状态机、迭代器）、yield表达式的工作机制、与Promise和async/await的关系，以及实际应用场景。
你是怎么理解ES6中Decorator的？使用场景？
这个问题考察对ES6装饰器（Decorator）的理解。装饰器是一种设计模式，用于在不修改原类和继承的情况下动态扩展对象功能。需要理解装饰器的本质、语法、执行顺序以及实际应用场景。
你是怎么理解ES6新增Set、Map两种数据结构的？
这个问题考察对ES6新增数据结构Set和Map的理解。需要掌握它们的区别、基本操作、遍历方法、特殊变体（WeakSet、WeakMap）以及实际应用场景。重点在于理解它们的特性如何解决了传统对象和数组的局限性。
你是怎么理解ES6中Proxy的？使用场景？
这个问题考察对ES6 Proxy的理解。Proxy用于定义基本操作的自定义行为，是元编程的重要工具。需要理解Proxy的本质、拦截器（trap）机制、与Reflect的关系以及实际应用场景。
ES6 面试真题补充：十题边界索引
根据 ES6 面试真题把十个主题的易错边界并入现有专题，集中索引 TDZ、可迭代展开、Promise、Module、Generator、装饰器、WeakMap 和 Proxy 追问。
ES6 高频追问 Q&A
A: 都有块级作用域；const 绑定不可重新赋值。（深入阅读：var、let 与 const）
HTML 基础知识速览
<!doctype html>、html、head、body 构成页面最小闭环。
HTML 面试进阶详解
提升可读性、无障碍能力和 SEO 效果，常见标签有 header/main/article/section/footer。
HTML 高频追问 Q&A
A: 提升 SEO、可访问性和团队协作可读性。（深入阅读：用语义元素表达结构）
HTML 语义、可访问性与资深面试
深入文档解析、语义结构、表单、响应式媒体、焦点管理、SEO 与可访问性工程实践。
JavaScript 基础知识速览
面向速读，每个点只保留“定义 + 关键提醒”。
说说JavaScript中的数据类型？存储上的差别？
在 JavaScript 中，数据类型可以分为两大类：基本类型（Primitive Types）和引用类型（Reference Types）。理解这两种类型的区别，特别是它们在内存中的存储方式，是掌握 JavaScript 核心概念的关键。
说说你了解的js数据结构？
数据结构是计算机存储、组织数据的方式。在 JavaScript 开发中，虽然数组和对象是最常用的，但了解更多的数据结构可以帮助我们编写更高效的代码，解决更复杂的问题。
DOM常见的操作有哪些？
DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了对文档的结构化表述，并定义了一种方式可以使程序对该结构进行访问，从而改变文档的结构、样式和内容。掌握 DOM 操作是前端开发的基础技能。
说说你对BOM的理解？
BOM（Browser Object Model，浏览器对象模型）是 JavaScript 中与浏览器进行交互的一套 API。它提供了独立于页面内容的、与浏览器窗口进行交互的对象，使开发者能够控制浏览器的行为、获取浏览器信息、操作浏览器窗口等。
说说你对闭包的理解？闭包的使用场景？
闭包（Closure）是 JavaScript 中最重要也最难理解的概念之一。它不仅是面试中的高频考点，更是实际开发中解决许多问题的强大工具。理解闭包，需要深入理解 JavaScript 的作用域、作用域链和垃圾回收机制。
谈谈JavaScript中的原型链？
原型链是 JavaScript 实现继承的核心机制。理解原型链对于理解 JavaScript 的对象系统、继承机制以及属性查找过程至关重要。它是 JavaScript 区别于其他基于类（Class-based）语言的重要特性。
说说JavaScript中的继承？
继承是面向对象编程的核心概念之一。JavaScript 作为一门基于原型的语言，其继承机制与 Java、C++ 等基于类的语言有很大不同。理解 JavaScript 的继承方式，对于编写可维护、可复用的代码至关重要。
说说JavaScript中的事件模型？
事件是 JavaScript 与 HTML 交互的核心机制。理解事件模型对于处理用户交互、优化页面性能至关重要。JavaScript 中的事件模型经历了从 DOM0 到 DOM2/3 的发展，同时还需要考虑 IE 的兼容性。
说说你对事件委托的理解？
事件委托（Event Delegation）是 JavaScript 中一种重要的事件处理模式。它利用事件冒泡机制，将事件处理程序绑定到父元素上，而不是直接绑定到每个子元素上。这种模式在处理大量元素或动态添加元素时特别有用。
说说你对this的理解？
this 是 JavaScript 中最令人困惑的概念之一。与其他编程语言不同，JavaScript 的 this 不是在编写时绑定的，而是在运行时根据函数的调用方式动态确定的。理解 this 的绑定规则对于编写正确的 JavaScript 代码至关重要。
说说你对原型链继承和类继承的理解？
JavaScript 中的继承经历了从原型链继承到 ES6 Class 继承的演变。理解这两种继承方式的区别和联系，对于掌握 JavaScript 的面向对象编程至关重要。ES6 Class 本质上是原型链继承的语法糖，但提供了更清晰、更易于理解的语法。
说说你对ES6模块化的理解？
模块化是大型 JavaScript 应用开发的基础。在 ES6 之前，JavaScript 缺乏官方的模块化方案，社区发展出了 CommonJS、AMD、UMD 等多种规范。ES6 引入了原生的模块化系统（ES Modules），为 JavaScript 提供了语言层面的模块支持。
13. 说说你对Promise的理解？Promise.all和Promise.race的区别？
Promise是JavaScript异步编程的重要解决方案，理解Promise的原理、状态变化以及静态方法的使用是前端面试中的高频考点。本题主要考察对Promise核心概念的理解以及Promise.all和Promise.race的区别和应用场景。
14. 说说你对async/await的理解？
async/await是ES2017引入的异步编程语法糖，它基于Promise实现，让异步代码看起来像同步代码一样。理解async/await的工作原理、执行顺序以及与Promise的关系是面试中的重要考点。
15. 说说你对事件循环Event Loop的理解？
JavaScript是单线程语言，事件循环（Event Loop）是实现异步编程的核心机制。理解事件循环的工作原理对于理解JavaScript的异步执行顺序、性能优化以及调试都至关重要。
16. 说说你对宏任务和微任务的理解？
宏任务（MacroTask）和微任务（MicroTask）是JavaScript异步编程的核心概念。理解它们的区别、执行顺序以及应用场景，对于掌握JavaScript的异步执行机制至关重要。
17. 说说你对垃圾回收机制的理解？
JavaScript具有自动垃圾回收机制（Garbage Collection，简称GC），程序员不需要手动管理内存的分配和释放。理解垃圾回收的工作原理、算法以及内存管理策略，对于编写高性能、无内存泄漏的代码至关重要。
18. 说说你对内存泄漏的理解？怎么排查内存泄漏？
内存泄漏（Memory Leak）是指程序中已分配的内存由于某种原因未释放或无法释放，造成系统内存的浪费。在JavaScript中，虽然具有自动垃圾回收机制，但仍然可能出现内存泄漏。理解内存泄漏的原因、场景以及排查方法，是前端开发的重要技能。
19. 说说你对防抖和节流的理解？应用场景？
防抖（debounce）和节流（throttle）是前端性能优化的重要手段，用于限制高频触发事件的执行次数。理解它们的原理、区别以及应用场景，对于提升用户体验和页面性能至关重要。
20. 说说你对深拷贝和浅拷贝的理解？
深拷贝和浅拷贝是JavaScript中处理对象复制的核心概念。理解它们的区别、实现方式以及应用场景，对于避免程序中的意外副作用和数据污染至关重要。
21. 说说你对函数式编程的理解？
函数式编程（Functional Programming，FP）是一种编程范式，强调使用纯函数、避免副作用、数据不可变性。理解函数式编程的核心概念、优缺点以及在实际开发中的应用，对于编写可维护、可测试的代码非常重要。
22. 说说你对柯里化的理解？
柯里化（Currying）是函数式编程中的重要概念，它将一个多参数函数转化为一系列嵌套的单参数函数。理解柯里化的原理、实现方式以及应用场景，对于掌握函数式编程思想非常重要。
23. 说说你对高阶函数的理解？
高阶函数（Higher-Order Function）是函数式编程的核心概念之一。理解高阶函数的定义、实现方式以及应用场景，对于掌握JavaScript的函数式编程思想、编写可复用和可组合的代码非常重要。
24. 说说你对函数柯里化和组合函数的理解？
函数柯里化（Currying）和函数组合（Function Composition）是函数式编程中两个密切相关的重要概念。柯里化让函数更灵活，函数组合让多个小函数协作完成复杂任务。理解它们的原理和应用，对于编写可维护、可复用的代码非常重要。
25. 说说你对箭头函数的理解？
箭头函数（Arrow Function）是 ES6 引入的一种新的函数定义方式，它提供了一种更简洁的语法来编写函数表达式。面试中考察箭头函数，主要关注其语法特性、this 绑定机制以及与普通函数的区别。
26. 说说你对Set和Map的理解？
Set 和 Map 是 ES6 引入的两种新的数据结构，它们为 JavaScript 提供了更高效的集合操作能力。面试中通常会考察它们的基本用法、特点、与普通对象的区别以及应用场景。
27. 说说你对WeakSet和WeakMap的理解？
WeakSet 和 WeakMap 是 ES6 引入的两种特殊的集合类型，它们是 Set 和 Map 的"弱引用"版本。面试中主要考察它们与普通 Set/Map 的区别、弱引用的概念、垃圾回收机制的影响以及适用场景。
28. 说说你对Symbol的理解？
Symbol 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。面试中主要考察 Symbol 的基本用法、唯一性特点、作为对象属性的应用以及内置 Symbol 的使用。
29. 说说你对Iterator和Generator的理解？
Iterator（迭代器）和 Generator（生成器）是 ES6 引入的重要特性，它们提供了一种更优雅的方式来处理数据集合和异步编程。面试中主要考察它们的基本概念、实现方式、使用场景以及相互关系。
30. 说说你对Proxy和Reflect的理解？
Proxy 和 Reflect 是 ES6 引入的元编程特性，它们提供了拦截和操作对象行为的能力。面试中主要考察它们的基本用法、拦截器（trap）机制、使用场景以及与 Object.defineProperty 的区别。
31. 说说你对模块加载器的理解？
模块加载器是用于管理和加载 JavaScript 模块的工具或规范。随着前端应用复杂度增加，模块化开发成为必然趋势。面试中主要考察 CommonJS、ES Modules、AMD、CMD 等规范的区别，以及打包工具的工作原理。
32. 说说你对正则表达式的理解？
正则表达式（Regular Expression）是一种用来匹配字符串的强大工具。面试中主要考察正则表达式的语法、常用方法、匹配模式以及实际应用场景。
33. 说说你对尾递归优化的理解？
尾递归是一种特殊的递归形式，递归调用是函数的最后一个操作。尾递归优化（Tail Call Optimization, TCO）可以将递归转换为循环，避免栈溢出。面试中主要考察尾递归的概念、与普通递归的区别、实现方式以及 JavaScript 中的支持情况。
34. 说说你对大数相加的理解？
在 JavaScript 中，数字使用 IEEE 754 双精度浮点数表示，最大安全整数为 Number.MAX_SAFE_INTEGER（9007199254740991）。超过这个范围的整数运算会丢失精度。大数相加是解决这个问题的经典算法题。
35. 说说你对函数柯里化和组合函数的理解？
函数柯里化（Currying）和函数组合（Function Composition）是函数式编程中的两个核心概念。它们可以提高代码的复用性、可读性和可维护性。面试中主要考察它们的定义、实现方式、使用场景以及相互关系。
JavaScript 加载机制：同步/异步加载与页面渲染阻塞
理解 JavaScript 的加载机制是前端性能优化的基础。浏览器在解析 HTML 时，遇到 <script> 标签会有不同的处理策略，这直接影响页面的加载速度和用户体验。
JavaScript 中 call、apply、bind 的区别与实现
call、apply、bind 都是 JavaScript 中用于改变函数执行时 this 指向的方法，但它们在用法和返回值上有重要区别。
JavaScript 面试真题补充：浏览器 API 与安全场景
根据 JavaScript 面试真题补充浏览器存储、文件上传、XHR、可视区域检测、跨域安全与 CSRF/XSS 的工程边界。
39. Axios 与 ECharts 速览
使用 axios.create() 按业务拆分请求实例。
JavaScript 高频追问 Q&A
A: 每轮宏任务后会清空微任务队列再进入下一轮。（深入阅读：事件循环 Event Loop、宏任务和微任务）
JavaScript 运行机制与资深面试
从类型转换、执行上下文、原型链和事件循环深入到并发控制、内存管理与工程边界。
TypeScript 基础知识速览
string number boolean null undefined any unknown never void。
说说你对 TypeScript 的理解？与 JavaScript 的区别？
这是一个基础概念题，考察候选人对 TypeScript 本质的理解，以及与 JavaScript 的关系和区别。需要从语言特性、编译过程、应用场景等角度全面回答。
说说 TypeScript 的数据类型有哪些？
本题考察对 TypeScript 类型系统的全面掌握，包括基础类型、特殊类型以及与 JavaScript 类型的对比。需要能够清晰区分各种类型的使用场景。
说说你对 TypeScript 中高级类型的理解？有哪些？
本题考察对 TypeScript 高级类型特性的掌握程度，包括交叉类型、联合类型、映射类型、条件类型等。这些特性是 TypeScript 类型系统的核心，能够应对复杂多变的开发场景。
说说你对 TypeScript 中接口的理解？应用场景？
接口是 TypeScript 的核心特性之一，考察候选人对接口的定义、使用方式、高级特性以及实际应用场景的理解。需要能够清晰区分接口与类型别名的差异。
说说你对 TypeScript 中泛型的理解？应用场景？
泛型是 TypeScript 最强大的特性之一，考察候选人对泛型概念、语法、约束以及实际应用的理解。需要能够解释泛型如何解决代码复用与类型安全的问题。
说说你对 TypeScript 中枚举类型的理解？应用场景？
枚举是 TypeScript 特有的类型（JavaScript 没有），考察候选人对枚举的定义、分类、编译结果以及实际应用场景的理解。需要能够区分数字枚举和字符串枚举的差异。
说说你对 TypeScript 中命名空间的理解？应用场景？
命名空间是 TypeScript 早期用于组织代码的机制，考察候选人对命名空间与模块的区别、使用方式以及现代 TypeScript 开发中的定位的理解。
说说你对 TypeScript 中装饰器的理解？应用场景？
装饰器是 TypeScript 的实验性特性，考察候选人对装饰器概念、分类、执行顺序以及实际应用（如 Angular、NestJS、类库开发）的理解。
说说你对 TypeScript 中模块的理解？
模块是现代 TypeScript/JavaScript 开发的核心概念，考察候选人对 ES Module、CommonJS、模块解析策略以及模块声明的理解。
说说 TypeScript 中的类型推断和类型断言？
类型推断和类型断言是 TypeScript 类型系统的两个重要特性，考察候选人对编译器类型推断机制的理解，以及何时需要手动进行类型断言。
说说 TypeScript 中的类型兼容性和类型保护？
类型兼容性和类型保护是 TypeScript 类型系统的核心机制，考察候选人对结构类型系统、类型收窄以及各种类型保护手段的理解。
说说 TypeScript 中的 tsconfig.json 配置？
tsconfig.json 是 TypeScript 项目的核心配置文件，考察候选人对编译选项、项目配置、严格模式等关键配置项的理解。
TypeScript 面试真题补充
本篇整理自 8.Typescript面试真题-62页.pdf，补充函数签名、类修饰符、枚举运行时、装饰器和 React/Vue 集成等代码型追问。
TypeScript 高频追问 Q&A
A: 对象结构扩展优先 interface；联合/映射类型用 type 更灵活。（深入阅读：TypeScript 接口）