资 源 简 介
2021 最新版前端工程师面试题手册
目录
1 | 前端基础........................................................................................................................ 11
1.1 | HTTP/HTML/浏览器................................................................................................ 11
说一下http 和https......................................................................................... 11
tcp 三次握手，一句话概括............................................................................ 12
TCP 和UDP 的区别.........................................................................................12
WebSocket 的实现和应用................................................................................12
HTTP 请求的方式，HEAD 方式.................................................................... 13
一个图片url 访问后直接下载怎样实现？....................................................13
说一下web Quality（无障碍）...................................................................... 14
几个很实用的BOM 属性对象方法?..............................................................14
说一下HTML5 drag api................................................................................... 15
说一下http2.0.................................................................................................. 15
补充400 和401、403 状态码........................................................................ 15
fetch 发送2 次请求的原因............................................................................. 16
Cookie、sessionStorage、localStorage 的区别................................................ 16
说一下web worker............................................................................................17
对HTML 语义化标签的理解..........................................................................17
iframe 是什么？有什么缺点？....................................................................... 17
Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?................17
Cookie 如何防范XSS 攻击..............................................................................18
Cookie 和session 的区别................................................................................. 18
一句话概括RESTFUL.....................................................................................18
讲讲viewport 和移动端布局...........................................................................18
click 在ios 上有300ms 延迟，原因及如何解决？...................................... 18
addEventListener 参数......................................................................................18
cookie sessionStorage localStorage 区别........................................................... 19
cookie session 区别...........................................................................................19
介绍知道的http 返回的状态码......................................................................19
http 常用请求头............................................................................................... 21
强，协商缓存.................................................................................................. 24
讲讲304............................................................................................................25
强缓存、协商缓存什么时候用哪个.............................................................. 25
前端优化...........................................................................................................26
GET 和POST 的区别.......................................................................................26
301 和302 的区别........................................................................................... 27
HTTP 支持的方法............................................................................................27
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
如何画一个三角形.......................................................................................... 27
状态码304 和200........................................................................................... 27
说一下浏览器缓存.......................................................................................... 28
HTML5 新增的元素.........................................................................................28
在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？....28
cookie 和session 的区别，localstorage 和sessionstorage 的区别................. 29
常见的HTTP 的头部.......................................................................................29
HTTP2.0 的特性..............................................................................................30
cache-control 的值有哪些............................................................................... 30
浏览器在生成页面的时候，会生成那两颗树？..........................................30
csrf 和xss 的网络攻击及防范.........................................................................30
怎么看网站的性能如何.................................................................................. 31
介绍HTTP 协议(特征).....................................................................................31
输入URL 到页面加载显示完成发生了什么?.............................................. 31
说一下对Cookie 和Session 的认知，Cookie 有哪些限制？....................... 31
描述一下XSS 和CRSF 攻击？防御方法？.................................................. 32
知道304 吗，什么时候用304？................................................................... 32
具体有哪些请求头是跟缓存相关的.............................................................. 32
cookie 和session 的区别..................................................................................32
cookie 有哪些字段可以设置........................................................................... 33
cookie 有哪些编码方式？............................................................................... 33
除了cookie，还有什么存储方式。说说cookie 和localStorage 的区别..... 33
浏览器输入网址到页面渲染全过程.............................................................. 34
HTML5 和CSS3 用的多吗？你了解它们的新属性吗？有在项目中用过
吗？...........................................................................................................................34
http 常见的请求方法....................................................................................... 35
get 和post 的区别............................................................................................ 35
说说302，301，304 的状态码...................................................................... 35
web 性能优化................................................................................................... 35
浏览器缓存机制.............................................................................................. 35
post 和get 区别................................................................................................ 36
1.2 | CSS............................................................................................................................ 36
说一下css 盒模型............................................................................................36
画一条0.5px 的线............................................................................................37
link 标签和import 标签的区别.......................................................................37
transition 和animation 的区别.........................................................................38
Flex 布局...........................................................................................................38
BFC（块级格式化上下文，用于清楚浮动，防止margin 重叠等）..........39
垂直居中的方法.............................................................................................. 39
关于JS 动画和css3 动画的差异性................................................................41
说一下块元素和行元素.................................................................................. 41
多行元素的文本省略号.................................................................................. 41
visibility=hidden, opacity=0，display:none......................................................42
双边距重叠问题（外边距折叠）.................................................................. 42
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
position 属性比较............................................................................................ 42
浮动清除...........................................................................................................43
css3 新特性.......................................................................................................43
CSS 选择器有哪些，优先级呢.......................................................................43
清除浮动的方法，能讲讲吗.......................................................................... 44
怎么样让一个元素消失，讲讲...................................................................... 44
介绍一下盒模型.............................................................................................. 44
position 相关属性............................................................................................. 45
css 动画如何实现.............................................................................................45
如何实现图片在某个容器中居中的？.......................................................... 46
如何实现元素的垂直居中.............................................................................. 46
CSS3 中对溢出的处理.....................................................................................46
float 的元素，display 是什么.......................................................................... 46
隐藏页面中某个元素的方法.......................................................................... 46
三栏布局的实现方式，尽可能多写，浮动布局时，三个div 的生成顺序有
没有影响...................................................................................................................46
什么是BFC...................................................................................................... 47
calc 属性........................................................................................................... 47
有一个width300，height300，怎么实现在屏幕上垂直水平居中.............. 47
display：table 和本身的table 有什么区别.................................................... 48
position 属性的值有哪些及其区别.................................................................48
z-index 的定位方法......................................................................................... 48
如果想要改变一个DOM 元素的字体颜色，不在它本身上进行操作？... 49
对CSS 的新属性有了解过的吗？..................................................................49
用的最多的css 属性是啥？........................................................................... 49
line-height 和height 的区别............................................................................49
设置一个元素的背景颜色，背景颜色会填充哪些区域？..........................49
知道属性选择器和伪类选择器的优先级吗.................................................. 49
inline-block、inline 和block 的区别；为什么img 是inline 还可以设置宽高
49
用css 实现一个硬币旋转的效果................................................................... 50
了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有
哪些方法...................................................................................................................51
CSS 画正方体，三角形...................................................................................51
overflow 的原理................................................................................................ 53
清除浮动的方法.............................................................................................. 53
box-sizing 的语法和基本用处........................................................................ 54
使元素消失的方法有哪些？.......................................................................... 54
两个嵌套的div，position 都是absolute，子div 设置top 属性，那么这个top
是相对于父元素的哪个位置定位的。.................................................................. 54
说说盒子模型.................................................................................................. 54
display............................................................................................................... 54
怎么隐藏一个元素.......................................................................................... 55
display:none 和visibilty:hidden 的区别...........................................................55
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
相对布局和绝对布局，position:relative 和obsolute。..................................55
flex 布局............................................................................................................55
block、inline、inline-block 的区别。........................................................... 56
css 的常用选择器.............................................................................................56
css 布局.............................................................................................................56
css 定位.............................................................................................................57
relative 定位规则..............................................................................................57
垂直居中...........................................................................................................58
css 预处理器有什么........................................................................................ 58
1.3 | JavaScript.................................................................................................................. 58
get 请求传参长度的误区.................................................................................58
补充get 和post 请求在缓存方面的区别.......................................................58
说一下闭包...................................................................................................... 59
说一下类的创建和继承.................................................................................. 59
如何解决异步回调地狱.................................................................................. 61
说说前端中的事件流...................................................................................... 61
如何让事件先冒泡后捕获.............................................................................. 61
说一下事件委托.............................................................................................. 62
说一下图片的懒加载和预加载...................................................................... 62
mouseover 和mouseenter 的区别.....................................................................62
JS 的new 操作符做了哪些事情..................................................................... 62
改变函数内部this 指针的指向函数（bind，apply，call 的区别）........... 62
JS 的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop,
offsetTop,clientTop 的区别？................................................................................... 63
JS 拖拽功能的实现..........................................................................................63
异步加载JS 的方法.........................................................................................63
Ajax 解决浏览器缓存问题..............................................................................64
JS 的节流和防抖..............................................................................................64
JS 中的垃圾回收机制......................................................................................64
eval 是做什么的............................................................................................... 65
如何理解前端模块化...................................................................................... 66
说一下CommonJS、AMD 和CMD................................................................. 66
对象深度克隆的简单实现.............................................................................. 67
实现一个once 函数，传入函数参数只执行一次.........................................67
将原生的ajax 封装成promise........................................................................ 67
JS 监听对象属性的改变..................................................................................68
如何实现一个私有变量，用getName 方法可以访问，不能直接访问......68
==和===、以及Object.is 的区别................................................................... 69
setTimeout、setInterval 和requestAnimationFrame 之间的区别...................69
实现一个两列等高布局，讲讲思路.............................................................. 70
自己实现一个bind 函数................................................................................. 70
用setTimeout 来实现setInterval..................................................................... 70
JS 怎么控制一次加载一张图片，加载完后再加载下一张......................... 71
代码的执行顺序.............................................................................................. 72
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
如何实现sleep 的效果（es5 或者es6）....................................................... 72
简单的实现一个promise.................................................................................73
Function._proto_(getPrototypeOf)是什么？......................................................73
实现JS 中所有对象的深度克隆（包装对象，Date 对象，正则对象）....74
简单实现Node 的Events 模块....................................................................... 76
箭头函数中this 指向举例.............................................................................. 77
JS 判断类型......................................................................................................77
数组常用方法.................................................................................................. 77
数组去重...........................................................................................................78
闭包有什么用................................................................................................. 78
事件代理在捕获阶段的实际应用.................................................................. 78
去除字符串首尾空格...................................................................................... 78
性能优化...........................................................................................................79
来讲讲JS 的闭包吧.........................................................................................79
能来讲讲JS 的语言特性吗.............................................................................79
如何判断一个数组(讲到typeof 差点掉坑里)................................................ 80
你说到typeof，能不能加一个限制条件达到判断条件............................... 80
JS 实现跨域......................................................................................................80
JS 基本数据类型..............................................................................................80
JS 深度拷贝一个元素的具体实现..................................................................80
之前说了ES6set 可以数组去重，是否还有数组去重的方法.....................81
重排和重绘，讲讲看...................................................................................... 81
JS 的全排列......................................................................................................81
跨域的原理...................................................................................................... 82
不同数据类型的值的比较，是怎么转换的，有什么规则..........................82
null == undefined 为什么.................................................................................82
this 的指向哪几种...........................................................................................83
暂停死区...........................................................................................................83
AngularJS 双向绑定原理................................................................................. 83
写一个深度拷贝.............................................................................................. 84
简历中提到了requestAnimationFrame，请问是怎么使用的.......................85
有一个游戏叫做Flappy Bird，就是一只小鸟在飞，前面是无尽的沙漠，上
下不断有钢管生成，你要躲避钢管。然后小明在玩这个游戏时候老是卡顿甚至
崩溃，说出原因（3-5 个）以及解决办法（3-5 个）....................................... 85
编写代码，满足以下条件： （1）Hero("37er");执行结果为Hi! This is 37er
（ 2 ） Hero("37er").kill(1).recover(30); 执行结果为Hi! This is 37er Kill 1 bug
Recover 30 bloods （3）Hero("37er").sleep(10).kill(2)执行结果为Hi! This is 37er //
等待10s 后Kill 2 bugs //注意为bugs （双斜线后的为提示信息，不需要打印）
85
什么是按需加载.............................................................................................. 86
说一下什么是virtual dom............................................................................... 86
webpack 用来干什么的....................................................................................86
ant-design 优点和缺点.................................................................................... 87
JS 中继承实现的几种方式，..........................................................................87
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
写一个函数，第一秒打印1，第二秒打印2................................................87
Vue 的生命周期............................................................................................... 88
简单介绍一下symbol...................................................................................... 88
什么是事件监听.............................................................................................. 89
介绍一下promise，及其底层如何实现.........................................................89
说说C ,Java，JavaScript 这三种语言的区别............................................. 90
JS 原型链，原型链的顶端是什么？Object 的原型是什么？Object 的原型的
原型是什么？在数组原型链上实现删除数组重复数据的方法..........................91
什么是js 的闭包？有什么作用，用闭包写个单例模式............................. 95
promise Generator Async 的使用................................................................... 95
事件委托以及冒泡原理。.............................................................................. 99
写个函数，可以转化下划线命名到驼峰命名..............................................99
深浅拷贝的区别和实现................................................................................ 100
JS 中string 的startwith 和indexof 两种方法的区别................................... 101
JS 字符串转数字的方法................................................................................101
let const var 的区别，什么是块级作用域，如何用ES5 的方法实现块级作
用域（立即执行函数），ES6 呢........................................................................102
ES6 箭头函数的特性.....................................................................................102
setTimeout 和Promise 的执行顺序............................................................... 102
有了解过事件模型吗，DOM0 级和DOM2 级有什么区别，DOM 的分级是
什么.........................................................................................................................103
平时是怎么调试JS 的...................................................................................103
JS 的基本数据类型有哪些，基本数据类型和引用数据类型的区别，NaN
是什么的缩写，JS 的作用域类型，undefined==null 返回的结果是什么，undefined
与null 的区别在哪，写一个函数判断变量类型................................................103
setTimeout(fn,100);100 毫秒是如何权衡的.................................................. 105
JS 的垃圾回收机制........................................................................................105
写一个newBind 函数，完成bind 的功能。............................................... 105
怎么获得对象上的属性：比如说通过Object.key（）..............................106
简单讲一讲ES6 的一些新特性....................................................................106
call 和apply 是用来做什么？.......................................................................106
了解事件代理吗，这样做有什么好处........................................................ 107
如何写一个继承？........................................................................................ 107
给出以下代码， 输出的结果是什么？ 原因？ for(var i=0;i<5;i )
{ setTimeout(function(){ console.log(i); },1000); } console.log(i).............................. 108
给两个构造函数A 和B，如何实现A 继承B？........................................108
问能不能正常打印索引................................................................................ 109
如果已经有三个promise，A、B 和C，想串行执行，该怎么写？.........109
知道private 和public 吗............................................................................... 109
基础的js.........................................................................................................109
async 和await 具体该怎么用？.................................................................... 110
知道哪些ES6，ES7 的语法......................................................................... 110
promise 和await/async 的关系.......................................................................110
JS 的数据类型................................................................................................110
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
JS 加载过程阻塞，解决方法。....................................................................110
JS 对象类型，基本对象类型以及引用对象类型的区别........................... 110
JavaScript 中的轮播实现原理？假如一个页面上有两个轮播，你会怎么实
现？.........................................................................................................................111
怎么实现一个计算一年中有多少周？........................................................ 111
面向对象的继承方式.................................................................................... 111
JS 的数据类型................................................................................................112
引用类型常见的对象.................................................................................... 112
es6 的常用...................................................................................................... 113
class.................................................................................................................113
口述数组去重................................................................................................ 113
继承.................................................................................................................113
call 和apply 的区别.......................................................................................114
es6 的常用特性.............................................................................................. 115
箭头函数和function 有什么区别................................................................. 115
new 操作符原理............................................................................................. 115
bind,apply,call.................................................................................................115
bind 和apply 的区别......................................................................................115
数组的去重.................................................................................................... 115
闭包.................................................................................................................116
promise 实现................................................................................................... 116
assign 的深拷贝..............................................................................................117
说promise，没有promise 怎么办................................................................ 118
事件委托.........................................................................................................119
箭头函数和function 的区别......................................................................... 119
arguments........................................................................................................ 119
箭头函数获取arguments............................................................................... 119
Promise............................................................................................................119
事件代理.........................................................................................................120
Eventloop.........................................................................................................120
2 | 前端核心...................................................................................................................... 120
2.1| 服务端编程............................................................................................................ 120
JSONP 的缺点................................................................................................ 120
跨域（jsonp，ajax）..................................................................................... 120
如何实现跨域................................................................................................ 121
dom 是什么，你的理解？.............................................................................121
关于dom 的api 有什么.................................................................................121
2.2 | Ajax......................................................................................................................... 121
ajax 返回的状态............................................................................................. 121
实现一个Ajax................................................................................................ 122
如何实现ajax 请求，假如我有多个请求，我需要让这些ajax 请求按照某
种顺序一次执行，有什么办法呢？如何处理ajax 跨域................................... 122
写出原生Ajax................................................................................................ 124
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
如何实现一个ajax 请求？如果我想发出两个有顺序的ajax 需要怎么做？
124
Fetch 和Ajax 比有什么优缺点？.................................................................125
原生JS 的ajax............................................................................................... 125
2.3 | 移动web 开发....................................................................................................... 125
知道PWA 吗.................................................................................................. 125
移动布局方案................................................................................................ 125
Rem, Em..........................................................................................................126
flex 布局及优缺点..........................................................................................127
Rem 布局及其优缺点.................................................................................... 128
百分比布局.................................................................................................... 129
移动端适配1px 的问题.................................................................................130
移动端性能优化相关经验............................................................................ 131
toB 和toC 项目的区别................................................................................132
移动端兼容性................................................................................................ 132
小程序.............................................................................................................133
2X 图3X 图适配........................................................................................... 133
图片在安卓上，有些设备模糊问题............................................................ 134
固定定位布局键盘挡住输入框内容............................................................ 134
click 的300ms 延迟问题和点击穿透问题...................................................134
phone 及ipad 下输入框默认内阴影.............................................................135
防止手机中页面放大和缩小........................................................................ 135
px、em、rem、%、vw、vh、vm 这些单位的区别.....................................135
移动端适配- dpr 浅析...................................................................................136
移动端扩展点击区域.................................................................................... 136
上下拉动滚动条时卡顿、慢........................................................................ 136
长时间按住页面出现闪退............................................................................ 136
ios 和android 下触摸元素时出现半透明灰色遮罩.................................... 136
active 兼容处理即伪类：active 失效....................................................... 137
webkit mask 兼容处理....................................................................................137
transiton 闪屏..................................................................................................138
圆角bug..........................................................................................................138
3 | 前端进阶...................................................................................................................... 138
3.1 | 前端工程化........................................................................................................... 138
Babel 的原理是什么?.................................................................................... 138
如何写一个babel 插件?................................................................................139
你的git 工作流是怎样的?............................................................................ 143
rebase 与merge 的区别?..............................................................................148
git reset、git revert 和git checkout 有什么区别........................................ 149
webpack 和gulp 区别（模块化与流的区别）............................................ 150
3.2 | Vue 框架................................................................................................................ 151
有使用过Vue 吗？说说你对Vue 的理解................................................... 151
说说Vue 的优缺点........................................................................................151
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
Vue 和React 有什么不同？使用场景分别是什么？................................. 151
什么是虚拟DOM？.......................................................................................152
请描述下vue 的生命周期是什么？.............................................................152
vue 如何监听键盘事件？..............................................................................155
watch 怎么深度监听对象变化...................................................................... 156
删除数组用delete 和Vue.delete 有什么区别？......................................... 156
watch 和计算属性有什么区别？.................................................................. 156
Vue 双向绑定原理.........................................................................................157
v-model 是什么？有什么用呢？..................................................................157
axios 是什么？怎样使用它？怎么解决跨域的问题？...............................157
在vue 项目中如何引入第三方库（比如jQuery）？有哪些方法可以做到？
157
说说Vue React angularjs jquery 的区别....................................................... 157
Vue3.0 里为什么要用Proxy API 替代defineProperty API？..................158
Vue3.0 编译做了哪些优化？.......................................................................158
Vue3.0 新特性—— Composition API 与React.js 中Hooks 的异同点..159
Vue3.0 是如何变得更快的？（底层，源码）........................................... 161
vue 要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？.....162
vue 在created 和mounted 这两个生命周期中请求数据有什么区别呢？162
说说你对proxy 的理解..................................................................................162
3.3 | React 框架............................................................................................................. 162
angularJs 和React 区别................................................................................. 162
redux 中间件...................................................................................................163
redux 有什么缺点...........................................................................................163
React 组件的划分业务组件技术组件？......................................................163
React 生命周期函数...................................................................................... 163
React 性能优化是哪个周期函数？.............................................................. 164
为什么虚拟dom 会提高性能?......................................................................164
diff 算法?........................................................................................................ 165
React 性能优化方案...................................................................................... 165
简述flux 思想............................................................................................... 165
React 项目用过什么脚手架？Mern? Yeoman?............................................165
你了解React 吗？......................................................................................... 166
React 解决了什么问题？.............................................................................. 166
React 的协议？.............................................................................................. 166
了解shouldComponentUpdate 吗？...............................................................166
React 的工作原理？..................................................................................... 166
使用React 有何优点？............................................................................... 166
展示组件(Presentational component)和容器组件(Container component)之间
有何不同？.............................................................................................................167
类组件(Class component)和函数式组件(Functional component)之间有何不
同？.........................................................................................................................167
(组件的)状态(state)和属性(props)之间有何不同？..................................... 167
应该在React 组件的何处发起Ajax 请求？........................................... 168
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
在React 中，refs 的作用是什么？........................................................... 168
何为高阶组件(higher order component)？.....................................................168
使用箭头函数(arrow functions)的优点是什么？..........................................168
为什么建议传递给setState 的参数是一个callback 而不是一个对象？
168
除了在构造函数中绑定this，还有其它方式吗？.................................... 169
怎么阻止组件的渲染？................................................................................ 169
当渲染一个列表时，何为key？设置key 的目的是什么？...................169
何为JSX ？.................................................................................................. 169
3.4 | Angular 框架..........................................................................................................170
Angular 中组件之间通信的方式.................................................................. 170
Angualr 的八大组成部分并简单描述.......................................................... 170
Angular 中常见的生命周期的钩子函数?.................................................... 170
Angular 中路由的工作原理...........................................................................171
解释rjx 在Angular 中的使用场景............................................................... 171
