第1页 / 共171页
第2页 / 共171页
第3页 / 共171页
第4页 / 共171页
第5页 / 共171页
第6页 / 共171页
第7页 / 共171页
第8页 / 共171页
前端工程师面试题手册.pdf
2021最新版前端工程师面试题手册
目录
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
想要获取更多前端开发相关学习资料，请扫描页脚二维码，添加学习助手领取>>>>>>
