前端知识库教程【免费下载链接】fe-interview前端面试每日 31以面试题来驱动学习提倡每日学习与思考每天进步一点每天早上5点纯手工发布面试题死磕自己愉悦大家6000道前端面试题全面覆盖HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……项目地址https://gitcode.com/GitHub_Trending/fe/fe-interview点击查看免费下载本文以开源仓库前端面试每日31的汇总文档 category/all.md 为骨架系统梳理其中约 1800 道面试题所覆盖的 HTML、CSS、JavaScript、软技能四大类目及其高频考点主题并结合仓库内的 README.md、category/history.md、contribution/31.md 等配套文档给出可落地的每日学习 主题复习方法。读完本文你将获得一份可检索、可按主题复习的前端面试知识地图并能直接利用仓库内部分类题库文档进行针对性训练。一、文档定位all.md 在仓库中扮演什么角色前端面试每日31是一个以面试题驱动学习、倡导每日思考的开源公益项目。根据 README.md 的说明项目坚持 365 天无节假日更新每天早上 5 点纯手工发布面试题累计题库达 6000 道覆盖 HTML、CSS、JavaScript、Vue、React、Node.js、TypeScript、ECMAScript、Webpack、jQuery、小程序、软技能等方向。仓库目录结构分工明确目录内容对应文档category/基础四大类 专题类题库html.md、css.md、js.md、skill.md、ECMAScript.md、nodejs.md、week.md、history.mdlib/主流框架/库专题题库Vue.md、React.md、AngularJs.md、jQuery.md、wxapp.mdtools/工程化工具题库webpack.mdcontribution/出题与贡献约定31.md根目录项目说明README.md、README-en.md、LICENSE其中 category/all.md 是 2020.07.09 时刻的全量题目汇总快照正文按html、css、js、软技能四个二级标题组织以每日 31每天一道 HTML 题、一道 CSS 题、一道 JS 题外加一道软技能题的节奏积累而成是理解本项目题目体系与演进脉络的最佳入口。与之相比category/html.md 等单类文档是持续更新的历史题目滚动清单内容截至 2021 年初category/history.md 则按天记录从第 1 天到第 2386 天的逐日题目category/week.md 提供周维度汇总。从行数统计看all.md共收录约 1800 道题目列表其中 HTML、CSS、JS、软技能四大类各占约 440460 道分布相当均衡——这恰好体现了项目基础打牢、软硬兼顾的出题理念。二、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与[classxxx]的区别是什么两者是否等价、相邻兄弟选择器、后代选择器和子选择器三者有什么区别伪类伪元素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规范有哪些、你知道什么是面向对象的cssoocss吗有没有实践过、你是怎么选择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.10.70.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/axiosfetch 和 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的实现原理并自己模拟实现一个instanceof6. 排序、查找与算法约 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面问你你还有什么问题吗你分别会问些什么、你为什么离职呢、你为什么希望到我们公司工作、你期望的薪资是多少呢、说说你认为你的最大优势是什么职业规划你未来35年给自己的规划吗、你当初为什么选择了前端、你申请的这个职位你觉得你还欠缺什么呢、说说你对程序员中年危机的理解、你想当技术总监吗你觉得技术总监应具备什么样的技能、你认为优秀的前端工程师要具备哪些素质软技能部分完整题目可继续查阅 category/skill.md 与 category/all.md 的软技能章节。六、如何基于这份题库高效复习每日31学习法与主题检索法1. 遵循项目的每日 31学习法根据 README.md 的如何学习章节项目倡导的学习方法本身就很值得借鉴不管题目懂与不懂都要先思考再百度思考后一定要去写出来如果是原生 js 的题不要依赖使用第三方库如 jquery 等每天的题目都是独立的不需要按顺序来但建议每道题都去答下有你会的和有你不会的答了才知道不懂的题百度学习后不要直接复制一大段过来要用自己的话精简地总结概括出来。配合 category/history.md按天记录第 1 天至第 2386 天的逐日题目和 category/week.md周汇总可以完整复盘每日一题的演进脉络。2. 按主题聚类复习本文即示例all.md的题目按发布时间倒序排列直接顺序刷容易迷失。更高效的方式是像本文第二至五章那样把题目按WebSocket 通信canvas 绘图BFC 与浮动Promise 异步排序算法网络协议等主题聚类每个主题集中击穿。每个主题内部再按概念辨析 → 原理深挖 → 手写实现 → 应用场景的顺序推进形成完整的知识闭环。3. 用专题文档做纵深拓展基础题刷完后可以进入仓库的专题题库做纵深复习框架方向lib/Vue.md296 题、lib/React.md338 题、lib/AngularJs.md、lib/jQuery.md、lib/wxapp.md小程序语言方向category/ECMAScript.md、category/nodejs.md工程化方向tools/webpack.md。这些专题文档与all.md的基础题互补构成基础 框架 工程化的完整复习链路。4. 参与出题与交流巩固项目欢迎开发者通过 Issues 交流答案、通过 PR 贡献题目。contribution/31.md 展示了出题格式约定每题标注分类html/css/js/软技能、给出题目文本有代码的附上代码示例发布后补充对应的 Issue 编号。尝试自己按这个格式出题是检验知识掌握度的有效方式。七、小结category/all.md 虽然是一份 2020 年 7 月的题目快照但它完整记录了前端面试每日 31项目早期的题目全貌约 1800 道题HTML、CSS、JS、软技能四类均衡分布覆盖 WebSocket 通信、iframe 嵌入、canvas 绘图、BFC 与浮动、Promise 异步、排序算法、网络协议、团队协作等高频考点。以它为索引配合 category/history.md 追踪最新题目、以 lib/ 与 tools/ 下的专题文档做纵深拓展再结合 Issues 与 PR 参与交流即可构建一套每日积累 主题突破 实战验证的前端面试复习体系——这正与项目以面试题来驱动学习每天进步一点的初衷一致。赞分享前端知识库教程【免费下载链接】fe-interview前端面试每日 31以面试题来驱动学习提倡每日学习与思考每天进步一点每天早上5点纯手工发布面试题死磕自己愉悦大家6000道前端面试题全面覆盖HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……项目地址https://gitcode.com/GitHub_Trending/fe/fe-interview点击查看免费下载相关推荐前端面试每日31fe-interview 开源题库的 6000 前端面试题全景解析与学习指南前端面试每日31fe interview 开源题库的 6000 前端面试题全景解析与学习指南 本文以 fe interview 仓库的 README.md前端知识库教程前端面试每日31 · CSS 题库全景指南从核心机制到高频实战前端面试每日31 · CSS 题库全景指南从核心机制到高频实战 本指南以「前端面试每日31」开源仓库的 category/css.md https://l前端知识库教程前端面试每日31历史题库全览6000 道面试题的内容结构与高效刷题指南前端面试每日31历史题库全览6000 道面试题的内容结构与高效刷题指南 本篇指南以 fe interview 仓库的 历史题目索引 https://lin前端知识库教程上一篇Claude Coder 自定义模型配置如何添加本地LM Studio和自定义API端点下一篇Architect.dev部署策略详解从测试环境到生产环境的完整流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考