前端面试每日3+1：基于 category/all.md 题库汇总的四大类目全景拆解与高效复习指南

• 前端
• 知识库
• 教程

本文以开源仓库"前端面试每日3+1"的汇总文档 category/all.md 为骨架，系统梳理其中约 1800 道面试题所覆盖的 HTML、CSS、JavaScript、软技能四大类目及其高频考点主题，并结合仓库内的 README.md、category/history.md、contribution/3+1.md 等配套文档，给出可落地的"每日学习 + 主题复习"方法。读完本文，你将获得一份可检索、可按主题复习的前端面试知识地图，并能直接利用仓库内部分类题库文档进行针对性训练。

一、文档定位：all.md 在仓库中扮演什么角色

"前端面试每日3+1"是一个以面试题驱动学习、倡导每日思考的开源公益项目。根据 README.md 的说明，项目坚持 365 天无节假日更新，每天早上 5 点纯手工发布面试题，累计题库达 6000+ 道，覆盖 HTML、CSS、JavaScript、Vue、React、Node.js、TypeScript、ECMAScript、Webpack、jQuery、小程序、软技能等方向。

仓库目录结构分工明确：

其中 category/all.md 是 2020.07.09 时刻的全量题目汇总快照，正文按html、css、js、软技能四个二级标题组织，以"每日 3+1"（每天一道 HTML 题、一道 CSS 题、一道 JS 题，外加一道软技能题）的节奏积累而成，是理解本项目题目体系与演进脉络的最佳入口。与之相比，category/html.md 等单类文档是持续更新的"历史题目"滚动清单（内容截至 2021 年初），category/history.md 则按天记录从第 1 天到第 2386 天的逐日题目，category/week.md 提供周维度汇总。

从行数统计看，all.md共收录约 1800 道题目列表，其中 HTML、CSS、JS、软技能四大类各占约 440～460 道，分布相当均衡——这恰好体现了项目"基础打牢、软硬兼顾"的出题理念。

二、HTML 面试题主题拆解：从 WebSocket 到 canvas 的九大高频考点

all.md的 HTML 部分（约 460 题）按主题可以聚为九大类，每一类都值得作为独立专题复习：

1. WebSocket 与跨端通信（约 15 题）

该主题是文档中密度最高的一簇，围绕 WebSocket 的握手、传输、鉴权与对比展开：

• 握手协议与状态码：websocket握手阶段是通过什么协议传输的？、websocket握手成功会返回一个干什么状态吗？是200吗？
• 连接管理与安全：websocket可以携带cookie吗？为什么？、websocket如何做心跳检测、数据加密、身份验证？、websocket如何区分不同的客户端？
• 能力对比与选型：websocket和http有什么区别？、websocket和socket有什么区别？、http和websocket能共用一个端口吗？为什么？、websocket和http2有什么区别？http2能取代websocket吗？为什么？、webSocket怎么做兼容处理？
• 延伸通信主题：跨标签页的通讯方式有哪些、浏览器内多个标签页之间的通信方式有哪些？、http和websocket能共用一个端口吗？

复习建议：把"WebSocket vs HTTP vs HTTP2 vs Socket"的对比表格整理出来，再针对握手过程画一张时序图，这组题基本可以一次拿下。

2. iframe 与页面嵌入（约 12 题）

文档中 iframe 相关题目覆盖检测、通信、跨域、高度、刷新五大场景：

• 可用性检测：在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面
• 通信与跨域：主框架如何与iframe通信？如何解决跨域？、在两个iframe之间传递参数的方法有哪些？、iframe父页面如何获取子页面的元素？、关于iframe的跨域你有了解多少？、iframe可以使用父页面中的资源吗（如：css、js等）？
• 行为控制：怎样使用iframe刷新父级页面？、iframe在更改了src之后，不出现后退或者前进按钮怎么解决？、iframe如何自动调整高度？、怎么让整个页面从iframe中跳出来？、如何能防止网页禁止被iframe嵌入呢？
• 概念辨析：iframe框架都有哪些优缺点？、frame和iframe有什么区别？、iframe的使用场景有哪些？、说说你对iframe属性sandbox的理解，它有什么作用呢？

3. 表单、文件上传与下载（约 18 题）

这组题目与实际业务贴合度最高：

• 下载实现：通过设置表单的target="_blank"来下载文件会被浏览器拦截吗？如何解决？、如何通过表单下载文件？、使用a标签的download属性下载文件会有跨域问题吗？如何解决？、你了解HTML5的download属性吗？
• 上传与预览：图片上传时实现本地预览功能的原理是什么？、input上传图片怎样触发默认拍照功能？、input上传文件可以同时选择多张吗？怎么设置？、如何使用html5进行图片压缩上传？、Form表单是怎么上传文件的？你了解它的原理吗？
• 表单行为：如何禁止input输入的历史记录？、怎样禁止表单记住密码自动填充？、html5中的form怎么关闭自动完成？、请说说input的inputmode属性有什么应用场景？、谈谈你对input元素中readonly和disabled属性的理解、关于<form>标签的enctype属性你有哪些了解？

4. canvas 与 svg 图形绘制（约 22 题）

canvas 在题库中占据重要篇幅，从基础原理到性能优化层层递进：

• 内存与原理：请问60*80的canvas占多少内存？你是怎么计算的？、canvas透明度是0.6的矩形和透明度是0.2的矩形叠加到一起，透明度是多少？、canvas有哪些渲染上下文？、canvas画出来的图是位图还是矢量图？
• 绘制细节：canvas的width与height属性的值可不可以带单位？、canvas默认画布的尺寸是多大？怎样设置才能不会变形？、在使用canvas的arc绘制图像时应注意什么？、请说说canvas的closePath()与lineTo()的区别是什么？、在开发canvas时，你知道什么是非零环绕原则(nonzZero rule) 吗？
• 性能优化：canvas有哪些可以提升性能的优化方法？、canvas怎么解决图片和文字模糊的问题？、canvas怎么兼容IE9以下版本？
• 实战应用：使用canvas生成一张分享图、使用canvas制作一个印章、使用canvas画出一个矩形
• svg 对照：html中如何使用svg？、什么是svg？说说svg有什么运用场景？、svg如何转为字体图标？、在svg和canvas中你该如何选择？依据是什么？、请说说Canvas和SVG图形的区别是什么？

5. 视频音频与多媒体（约 16 题）

聚焦 HTML5 媒体能力与移动端兼容：

• video 行为：HTML5的video怎样预加载（支持全量加载）？、HTML5的video怎么取消自动播放？、HTML5如何隐藏video元素的控制栏、全屏按钮？、HTML5的video在有的移动端设备无法自动播放？怎么解决？、如何实现应用缓存？说说你对manifest的理解
• 移动端兼容：你有了解video的x5-video-player-type这个属性吗？它的作用是什么呢？、IOS在播放视频时，有可能会出现短暂的黑屏，如何解决呢？、android手机能同时播放两个video音频吗？
• 格式与字幕：video和audio分别支持哪些格式？、html5的video如何附带字幕？、你有用过HTML5的track标签吗？说说它的运用场景有哪些？、举例说明HTML5的Canvas元素有什么用途？

6. 布局、打印与样式细节（约 25 题）

文档中布局与打印类题目很适合做成"代码实战集"：

• 布局实现：实现一个全屏布局、实现九宫格布局、实现一个stick-footer布局、实现一个居中半透明的模态窗、写个布局，当页面高度不够时，底部固定在下面，反之不固定、实现一个面包屑导航的效果
• 打印控制：打印网页的时候，如何让指定的元素另起一页（打印分页）？、如何设置打印尺寸？、打印页面时怎样自定义打印页眉页脚或者去掉眉页脚？、网页打印与标准纸张换算时，cm和px是如何换算的？
• 元素细节：如何让table的边框双线变单线？、怎样在<pre>标签内不转义<和>符号（原样输出html标签）？、pre与xmp标签有什么区别？、如何去除标签<i>默认斜体？

7. 移动端与设备适配（约 20 题）

这组题目体现的是移动端实战经验：

• 视口与缩放：网站如何自适应手机屏幕？、移动端如何禁止用户手动缩放页面？、如何禁止web端的页面缩放？、请说说viewport是什么？在什么时候下使用？有什么作用？
• 交互适配：移动端点击300ms的延迟出现的原因是什么？你的解决方案是什么？、android手机的微信H5弹出的软键盘挡住了文本框，如何解决？、如何禁止移动端的左右划动手势？、移动端如何实现长按保存图片（图片上的二维码是动态的）？、移动端滚动穿透是什么原因？有哪些解决方案？
• 屏幕规格：为什么移动端页面的设计稿一般是750px/640px呢？、你知道移动端的尺寸都有哪些吗？、目前移动端的最小点击区域是多少呢？

8. 缓存、存储与安全（约 18 题）

围绕浏览器存储体系展开：

• 存储辨析：请描述一下cookies、sessionStorage和localStorage的区别？、页面刷新时sessionStroage会变（会清空）吗？、HTML5有哪些存储类型？它们之间有什么区别？、本地存储的生命周期是什么？、localStorage什么时候过期？
• 离线应用：简述下html5的离线存储原理，同时说明如何使用？、请描述下application cache的更新过程？、如何刷新浏览器的应用缓存？、HTML5的应用程序缓存与浏览器缓存有什么不同？
• 安全防护：如何防止cookie被盗用？、https页面加载http的资源会导致页面报错的原因是什么？怎么解决？、html5应该注意哪些安全的问题？

9. 语义化、规范与标签辨析（约 30 题）

文档中大量题目围绕"标签理解与语义化"展开，是 HTML 复习的基石：

• 语义化核心：你对标签语义化的理解是什么？、HTML5中的article和section有什么区别？、举例说明HTML5的标签meter的用法、说说你对small标签的认识，有哪些应用场景？、你有使用过time标签吗？说说它的用途有哪些？
• 标签辨析：title与h1、b与strong、i与em的区别分别是什么？、请说说 <pre> 和 <code> 标签的区别？、pre与xmp标签有什么区别？、wbr和br标签的区别是什么？、ul、dl、ol三个标签的区别？
• 规范与嵌套：说说你对html的嵌套规范的理解，都有哪些规范呢？、a标签可以再嵌套a标签吗？为什么？、html中p标签内为何不能嵌套div标签？、说出至少十条你理解的html规范
• 全局属性：HTML全局属性(global attribute)有哪些（包含H5）？、说说你对<meta>标签的理解、说说你对属性data-的理解、列举出你最常用的meta标签的写法和作用

完整 HTML 题目清单可继续查阅 category/html.md 与 category/all.md 的 html 章节。

三、CSS 面试题主题拆解：布局、动画、适配与工程化的全景覆盖

all.md的 CSS 部分（约 450 题）同样可以归纳为六大主题：

1. 布局体系：居中、三栏、等高与瀑布流（约 30 题）

布局题是 CSS 面试的"送分题"也是"压轴题"，文档覆盖了从基础到进阶的完整链路：

• 居中全家桶：写出固定子容器在固定的父容器下水平垂直居中的布局、写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法、写出div在不固定高度的情况下水平垂直居中的方法？、写出你知道的CSS水平和垂直居中的方法、怎样把一个div居中？怎样把一个浮动元素居中？怎样把绝对定位的div居中？、如何让一个块元素绝对居中？
• 经典布局：圣杯布局和双飞翼布局的理解和区别，并用代码实现、使用flex实现三栏布局，两边固定，中间自适应、手写一个满屏品字布局的方案、实现一个上下固定，中间自动填满的布局
• 进阶布局：列举几种多列等高布局的方法、列举几种瀑布流布局的方法、实现九宫格布局、在网格布局中都有哪些概念呢？比如：网格线、说说你对网格布局的理解、使用css实现一个轮播图、用CSS实现tab切换

2. BFC、浮动与盒模型（约 18 题）

这组题考察对 CSS 渲染模型的底层理解：

• BFC 系列：简述你对BFC规范的理解、如何形成BFC？、BFC与IFC有什么区别？、举例说明BFC会与float元素相互覆盖吗？为什么？
• 浮动系列：为什么float会导致父元素塌陷？、为什么会出现浮动？在什么时候需要清除浮动呢？、清除浮动的方式有哪些及优缺点？、对一个元素设置浮动后，它的特征是什么？、给内联元素加float与给块元素加float有什么区别？
• 盒模型系列：说说你对css盒子模型的理解、box-sizing的宽度包含了哪些？、box-sizing常用的属性有哪些？分别有什么作用？、请说说*{box-sizing: border-box;}的作用及好处有哪些？、padding会影响到元素的大小，那不想让它影响到元素的宽度应该怎么办？

3. 动画、过渡与 3D 变换（约 20 题）

文档中的动画题既有原理辨析，也有大量"用 CSS 画 XX"的实践题：

• 原理辨析：过渡和动画的区别是什么？、transition、animation、transform三者有什么区别？、什么是逐帧动画？、什么是关键帧动画？、请说说在什么时候用transition？什么时候使用animation？、CSS3中的transition是否可以过渡opacity和display？
• 性能认知：为什么说对opacity进行动画要比box-shadow进行动画性能更好呢？、CSS中哪些属性会引起GPU渲染，会增加耗电吗？、说说你对GPU的理解，举例说明哪些元素能触发GPU硬件加速？
• 实战绘制：使用css3画个旋转的立方体、使用css3画出一个立体魔方、使用css实现太阳自转同时地球围着太阳公转的效果、使用css写一个红绿灯交替的动画效果、使用css3模拟中/英文打字的效果、使用css3绘制一个圆形动态的时钟、使用纯CSS代码实现动画的暂停与播放

4. 伪类、伪元素与选择器（约 18 题）

选择器与伪类题目考察的是"匹配机制"与"应用场景"：

• 选择器匹配：浏览器是怎样判断元素是否和某个CSS选择器匹配？、为什么说css的选择器是从右向左匹配？、为什么说css的选择器一般不要超过三级？、为什么说css中能用子代选择器的时候不要用后代选择器？、class与[class=xxx]的区别是什么？两者是否等价？、相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
• 伪类伪元素：pseudo-class与pseudo-element有什么区别？、举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同？、:placeholder-shown和:focus-within这两个伪类你有使用过吗？、::first-letter有什么应用场景？、举例说明伪元素 (pseudo-elements) 有哪些用途？、::before和:after中单冒号和双冒号的区别是什么

5. 字体、文本与移动端适配（约 25 题）

字体与适配是移动端面试的重灾区，文档中的题目很成体系：

• 字体相关：举例说明跟字体相关的属性有哪些？、字体粗细的属性是用哪一个？它有哪些属性值？、你知道字体所拥有的字重的数量和font-weight的数值字重是什么对应关系吗？、line-height三种赋值方式有何区别？、说说你对line-height是如何理解的？、height和line-height的区别是什么呢？、要让Chrome支持小于12px的文字怎么做？
• 文本技巧：实现单行文本居中和多行文本左对齐并超出显示"..."、word-wrap、word-break和white-space有什么区别？、举例说说你对white-space属性的理解、如何给文字的color设置渐变、实现文本的竖向排版、让网页的字体变得清晰，变细用CSS怎么做？
• 移动端适配：rem是如何实现自适应布局的？、使用rem的优缺点是什么？和使用百分比有什么区别？、使用rem布局时怎样合理设置根标签字体大小？、移动端1px像素的问题及解决方案是什么？、怎么实现移动端的边框0.5px？、你有用过vw布局吗？和使用rem有什么区别？、请说说你对vh、vw的理解以及它们的运用场景是什么？、说说你对设备像素比的理解、说说你对前端二倍图的理解？移动端使用二倍图比一倍图有什么好处？

6. 预处理器与工程化（约 20 题）

文档中有一批 sass/less 题目，外加架构与性能类问题：

• sass/less：为什么要使用sass/less？、你认为sass和less的最大区别是什么呢？你喜欢哪个？为什么？、sass是怎么定义变量的？、说说你对sass的嵌套规则的理解？、你有用过sass中的Mixin功能吗？它有哪些作用？、有用过scss和sass吗？说说它们之间的区别是什么？、使用sass的方式有哪些？
• 架构与命名：如果让你自己设计一个css框架，说说你的思路、在一个项目里，你是如何组织(架构)css代码的？、你们团队中css的class命名采用的是什么方式呢？下划线还是横线还是驼峰？、说说你对BEM规范的理解，同时举例说明常见的CSS规范有哪些？、你知道什么是面向对象的css（oocss）吗？有没有实践过？、你是怎么选择resetting和normalizing的？为什么？
• 性能优化：如何写高效的CSS？、一个项目中有很多无用的css代码，怎么找到并清除这些无用的代码？、会引起Reflow和Repaint的操作有哪些？、列举CSS优化、提高性能的方法、css的加载会阻塞DOM树解析和渲染吗？为什么？、css的加载会阻塞js运行吗？为什么？、异步加载CSS的方式有哪些？

完整 CSS 题目清单可继续查阅 category/css.md 与 category/all.md 的 css 章节。

四、JavaScript 面试题主题拆解：语言基础、异步、DOM 与算法实战

all.md的 JS 部分（约 455 题）是四类中技术纵深最大的一类，可以归纳为七大主题：

1. 语言基础：类型、作用域、闭包与原型链（约 35 题）

这是 JS 面试的"必考地基"：

• 数据类型与转换：请介绍下js的数据类型、请描述下null和undefined的区别是什么？、举例说明js如何实现继承？、举例子说说你对js隐式类型转换的理解、说说你对数据类型转换的理解是什么？类型转换的方法有哪些？、js中=、==、===三个的区别是什么？并说明它们各自的工作过程、解释下为什么{} + [] === 0为true？、0.1 + 0.2、0.1 + 0.3和0.1 * 0.2分别等于多少？并解释下为什么？、如何避免JS浮点运算的精度问题（例：0.1+0.7=0.7999999999999999）
• 作用域与闭包：说说你对javascript的作用域的理解、说说你对作用域链的理解、什么是闭包？优缺点分别是什么？、说说你对JS中暂性死区的理解，它有什么运用场景？、说说你对执行上下文的理解、举例子说明javascript的变量声明提升和函数声明提升
• 原型与 this：请描述下js的原型和原型链的理解以及它们之间的关系、请说下你对__proto__和prototype的理解、说说你对this的理解、写出4个使用this的典型例子、箭头函数的this值继承于哪里、说说bind、call、apply的区别？并手写实现一个bind的方法、你对new操作符的理解是什么？手动实现一个new方法、js的函数有哪几种调用形式？

2. 异步编程：Promise、事件循环与并发控制（约 20 题）

异步是 JS 面试的最高频板块之一：

• Promise 体系：请说说你对promise的理解、请用js实现一个promise的方法、promise的构造函数是同步执行还是异步执行，它的then方法呢？、写一个方法实现promise失败后自动重试、proimise 如何取消、如何捕获 setTimeout 异常
• 事件循环：你对事件循环有了解吗？说说看！、微任务和宏任务有什么区别？、阅读下面关于setTimeout和Promise的代码，判断结果会输出什么？为什么？、setTimeout和setInterval有什么区别呢？、setTimeout的第三个参数有什么用？
• 并发与防抖：异步请求重试策略有哪些呢？、分别写出防抖和节流的两个函数，并描述它们分别有什么运用场景？、实现异步编程有哪些方式？推荐用哪种？、请为什么说js是单线程，而不是多线程呢？、如何更好地处理Async/Await的异常的？

3. DOM、BOM 与事件机制（约 30 题）

考察对浏览器对象模型与事件体系的理解：

• 元素获取：用原生js获取DOM元素的方法有哪些？、getElementById和querySelector方法的区别是什么？、页面上的DOM有多个相同的ID，用js获取时结果会是怎么样的？、写一个 document.querySelector 的逆方法
• 尺寸与坐标：解释下offsetWidth、clientWidth、scrollWidth这三者的区别是什么？、写一个方法来获取div到浏览器窗口的高度、写一个方法获取div的宽高、如何用jst获取DOM元素在页面中的绝对位置？、写一个方法判断页面滚动方向
• 事件机制：说说你对事件冒泡机制的理解？、事件currentTarget和target的区别是什么？、stopPropagation()和preventDefault()这两个方法有什么区别？、在DOM上同时绑定两个点击事件（一个用捕获，一个用冒泡），事件总共会执行几次，先执行哪个事件？、举例说明你对事件代理的理解、什么是事件委托？它有什么好处？能简单的写一个例子吗？
• BOM 细节：window对象和document对象有什么区别？、举例说明常用的BOM属性和方法有哪些？、写个方法判断当前脚本运行在浏览器还是node环境中、js如何监听页面缩放？、如何实现一个全屏的功能？

4. Ajax、跨域与网络请求（约 25 题）

文档中 Ajax 相关题目从原理到实践层层深入：

• Ajax 原理：请详细描述AJAX的工作原理、请描述下ajax的请求都有哪些步骤？、ajax的请求状态有哪几种？、Ajax请求中get和post方式有什么区别呢？分别在哪些场景下使用？、Form表单提交时为什么会刷新页面？怎么预防刷新？
• 跨域方案：为什么会有跨域问题？怎么解决跨域？、JSONP的原理是什么？解决什么问题？、请说说json和jsonp的区别？、说说CORS为何要区分预检请求和简单请求呢？、ajax请求中为何会出现OPTIONS请求？、请描述你对浏览器同源策略的理解、document.domain的作用是什么？它有什么限制？、说说你对postMessage的理解，它有什么运用场景呢？
• fetch/axios：fetch 和 ajax 区别、axios为什么能在浏览器中环境运行又能在node中环境运行？、axios如何一次发送多个并发请求？、axios拦截器原理是什么？、axios相比原生ajax的优点有哪些呢？、使用ajax轮询接口有什么优缺点？

5. 数组、对象与数据操作（约 30 题）

数组与对象操作在文档中出现频率极高，几乎都是"手写实现"题：

• 数组遍历与操作：遍历数组和对象的方法都有哪些？、举例说明这三种方法map、reduce和filter的区别是什么？、for in 和 for of 的区别？、请比较下for、forEach、for of的性能、原生Math的方法有哪些？请列举并描述其功能、原生的字符串操作方法有哪些？请列举并描述其功能
• 数组实用方法：写一个数组去重的方法（支持多维数组）、写个方法随机打乱一个数组、写一个获取数组的最大值、最小值的方法、清空一个数组的方式有哪些？它们有什么区别？、使用delete删除数组，其长度会改变吗？、写一个方法从数组中随机抽取N个不重复的元素
• 对象操作：如何判断两个对象相等？、如何判断一个对象是否为空？、请写一个性能最好的深度克隆对象的方法、深度克隆对象的方法有哪些，并把你认为最好的写出来、说说你对深浅拷贝的理解？并实现一个对数组和对象深拷贝的方法、如何判断对象是否属于某个类？、举例说明constructor和instanceof的区别是什么？、说说instanceof和typeof的实现原理并自己模拟实现一个instanceof

6. 排序、查找与算法（约 15 题）

文档中有一批显式的算法题，且多要求说明时间/空间复杂度：

• 经典排序：写一个方法实现"选择排序算法"、写一个方法实现"交换排序算法"、写一个方法实现"插入排序算法"、写一个方法实现"归并排序算法"、写一个方法实现"桶排序算法"、写一个方法实现"基数排序算法"、说说你对js排序的理解，你有了解哪些算法呢？、用函数实现扑克牌排序
• 数据结构：写一个单向链数据结构的 js 实现并标注复杂度、请使用 js 实现一个双向链表、使用js实现一个循环队列、解释下深度优先遍历和广度优先遍历的区别及如何实现、请实现一个flattenDeep函数，把多维数组扁平化、用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值、请使用原生的js实现斐波那契数列

7. 手写实现与高频工具函数（约 40 题）

文档中有大量"写一个方法/实现 XX"题，是 JS 面试手写环节的直接题库：

• 基础工具：手写一个trim()的方法、写一个判断数据类型的方法、用js实现typeof的功能、写一个方法去掉字符串中的空格、写一个格式化时间的方法、写一个格式化金额的方法、写一个方法把科学计数法转换成数字或者字符串、写一个判断设备来源的方法
• 进阶实现：自己实现数组的 map、filter、find 方法、用js实现一个加法的方法、写一个使两个整数进行交换的方法（不能使用临时变量）、写一个方法把多维数组降维、实现一个函数记忆的方法、写一个字符串重复的repeat函数、请写一个sleep（暂停）函数、实现一个ajax的队列请求、写一个方法实现promise失败后自动重试、写一个方法判断大括号{}是否闭合

JS 部分完整题目可继续查阅 category/js.md 与 category/all.md 的 js 章节。

五、软技能面试题主题拆解：网络、性能、工程化与职场软实力

all.md的软技能部分（约 440 题）覆盖面很广，从计算机网络到职场沟通均有涉及，可归纳为五大主题：

1. 计算机网络与协议（约 25 题）

这组题目在面试中常以"前端必须懂的网络知识"出现：

• 传输层：请描述处TCP的三次握手和四次挥手、TCP和UDP属于计算机网络中的哪一层？、你知道TCP和UTP的区别是什么吗？、TCP为什么是有状态的？、如何确保TCP包的有序传输？、说说栈和队列的区别是什么？
• 应用层：http都有哪些状态码？、HTTP的请求头有什么作用？它的应用场景有哪些？、HTTP的请求除了get和post外还有哪些呢？、说说你对http、https、http2的理解、post和get有什么区别？它们分别在什么时候用到？、说说你对RESTful的理解
• 缓存机制：说说你对304缓存的理解、请说说协商缓存和强缓存的区别？、请解释下Expires和Cache-Control有什么区别？、ETag有什么运用场景呢？、举例缓存头都有哪些？并说明它们的用处

2. 性能优化与前端工程化（约 20 题）

性能与工程化是高级前端岗位的考察重点：

• 性能优化：谈一谈你知道的前端性能优化方案有哪些？、你是怎样对首屏进行优化的呢？、当网站遇到性能问题时，你是如何一步步解决的？、请列举出多种减少页面加载时间的方法、说说你对浏览器的关键渲染路径的理解、来说说你对重绘和重排的理解，以及如何优化？、如何对前端资源进行优化？
• 工程化：举例说明你对前端工程化的理解、举例说明你对前端自动化的理解、前端资源发布路径怎么实现非覆盖式发布（平滑升级）？、如果HTTP2、5G普及了，浏览器也支持es module了，Webpack、Rollup这种打包工具还有意义吗？、前端的性能统计有哪些指标？
• 监控与安全：你们前端项目是怎么做监控（埋点）的？、前端报错，你是怎么上报错误的？、对于前端安全，你了解多少？说说你对XSS和CSRF的理解、前端如何防止XSS攻击？、前端如何预防SQL注入？

3. 架构、设计模式与新技术认知（约 20 题）

考察候选人的技术视野：

• 架构思想：对于前后端分离，你是怎么理解的？、都说前后端分离好，那重构前后端分离的目的是什么？、解释下后端渲染与前端渲染有什么区别呢？、说说你对同构和SSR的理解、你了解什么是微前端吗？、说说你对前端架构的理解、说说你对前端架构师职位的理解
• 设计模式：说说什么是设计模式，你最常用的设计模式有哪些？、你有用过单例模式吗？主要运用场景有哪些？、说下你对IoC的理解，它有什么运用场景？、说说你对js中的依赖注入的理解，它的实现方式有哪些呢？、举例说明什么是响应式编程？、你知道什么是AOP吗？它的作用是什么？
• 新技术：你知道什么是AST吗？说说你对AST的理解，它的运用场景有哪些？、说说你对WASM的了解、说说你对PWA的理解、PWA如何改变我们的移动体验？、你对前端工程师这个职位是怎么样理解的？聊聊它的前景？

4. 团队协作与流程规范（约 15 题）

考察团队协作软实力：

• 协作规范：你在的公司有没有做代码审查（CodeReview）？、你所在的团队有规范吗？举例说明都定义了哪些规范？、实际中Git规范有哪些？、Git的reset和revert有什么区别？它们分别适用于什么场景？、git pull和git fetch有什么区别呢？、说说你对Git的branch, diff, merge的理解？
• 团队管理：如果让你去管理一个10人的前端团队，你该怎么管理？、作为团队的Leader，发现手下有位同事工作状态比较消极，你该怎么办？、如果你是Leader，如何提升团队的战斗力呢？、谈谈你对敏捷开发的理解、你有做过项目复盘吗？都复盘哪些内容呢？

5. 面试应对与职业发展（约 15 题）

文档中还有一批"面试现场题"，适合模拟面试使用：

• 面试应对：如果面试官让你先自我介绍下，然后说下你的工作经历，你该怎么说？、最后如果技术面和HR面问你：你还有什么问题吗？你分别会问些什么？、你为什么离职呢？、你为什么希望到我们公司工作？、你期望的薪资是多少呢？、说说你认为你的最大优势是什么？
• 职业规划：你未来3，5年给自己的规划吗？、你当初为什么选择了前端？、你申请的这个职位，你觉得你还欠缺什么呢？、说说你对程序员中年危机的理解、你想当技术总监吗？你觉得技术总监应具备什么样的技能？、你认为优秀的前端工程师要具备哪些素质？

软技能部分完整题目可继续查阅 category/skill.md 与 category/all.md 的软技能章节。

六、如何基于这份题库高效复习：每日3+1学习法与主题检索法

1. 遵循项目的"每日 3+1"学习法

根据 README.md 的"如何学习"章节，项目倡导的学习方法本身就很值得借鉴：

• 不管题目懂与不懂都要先思考再百度，思考后一定要去写出来；
• 如果是原生 js 的题，不要依赖使用第三方库，如 jquery 等；
• 每天的题目都是独立的，不需要按顺序来，但建议每道题都去答下，有你会的和有你不会的，答了才知道；
• 不懂的题百度学习后，不要直接复制一大段过来，要用自己的话精简地总结概括出来。

配合 category/history.md（按天记录第 1 天至第 2386 天的逐日题目）和 category/week.md（周汇总），可以完整复盘每日一题的演进脉络。

2. 按主题聚类复习（本文即示例）

all.md的题目按发布时间倒序排列，直接顺序刷容易迷失。更高效的方式是像本文第二至五章那样，把题目按"WebSocket 通信""canvas 绘图""BFC 与浮动""Promise 异步""排序算法""网络协议"等主题聚类，每个主题集中击穿。每个主题内部再按"概念辨析 → 原理深挖 → 手写实现 → 应用场景"的顺序推进，形成完整的知识闭环。

3. 用专题文档做纵深拓展

基础题刷完后，可以进入仓库的专题题库做纵深复习：

• 框架方向：lib/Vue.md（296+ 题）、lib/React.md（338+ 题）、lib/AngularJs.md、lib/jQuery.md、lib/wxapp.md（小程序）；
• 语言方向：category/ECMAScript.md、category/nodejs.md；
• 工程化方向：tools/webpack.md。

这些专题文档与all.md的基础题互补，构成"基础 + 框架 + 工程化"的完整复习链路。

4. 参与出题与交流巩固

项目欢迎开发者通过 Issues 交流答案、通过 PR 贡献题目。contribution/3+1.md 展示了出题格式约定：每题标注分类（html/css/js/软技能）、给出题目文本，有代码的附上代码示例，发布后补充对应的 Issue 编号。尝试自己按这个格式出题，是检验知识掌握度的有效方式。

七、小结

category/all.md 虽然是一份 2020 年 7 月的题目快照，但它完整记录了"前端面试每日 3+1"项目早期的题目全貌：约 1800 道题，HTML、CSS、JS、软技能四类均衡分布，覆盖 WebSocket 通信、iframe 嵌入、canvas 绘图、BFC 与浮动、Promise 异步、排序算法、网络协议、团队协作等高频考点。以它为索引，配合 category/history.md 追踪最新题目、以 lib/ 与 tools/ 下的专题文档做纵深拓展，再结合 Issues 与 PR 参与交流，即可构建一套"每日积累 + 主题突破 + 实战验证"的前端面试复习体系——这正与项目"以面试题来驱动学习，每天进步一点"的初衷一致。

• 前端
• 知识库
• 教程