2020最新中级web前端⾯试题库（含详细答案，15k级别）你
会⼏道呢？
前⾔
1.本篇⽂章，献给我家⼥朋友，祝她在杭州⼀个965的好公司！
2.除了⾯试题。结合多年开发经验整理出2020最新企业级实战视频教程， 包括 Vue
3.0/Js/ES6/TS/React/node等想学的可进裙519293536 免费获取，⼩⽩勿进哦！
题外话：关于中级 -> ⾼级的进阶，我也写了⼀篇⽂章，希望对你有帮助：
HTML篇
HTML5语义化
百度ife的h5语义化⽂章，讲得很好，很多不错的公司都会问语义化的问题。
CSS篇
CSS常见⾯试题
CSS基础有的公司很重视，在⾯试前还是需要好好复习⼀遍的。
能不能讲⼀讲Flex布局，以及常⽤的属性？。
Flex布局是⾼频考点，⽽且是平常开发中最常⽤的布局⽅式之⼀，⼀定要熟悉。
BFC是什么？能解决什么问题？
关于bfc，可以看看三元⼤佬总结的⽂章
这篇⽂章⾥，顺便也把外边距重叠的问题讲了⼀下。
JS基础篇
讲讲JS的数据类型？
最新的 ECMAScript 标准定义了 8种数据类型:
6 种原始类型
Boolean
Undefined
Number
BigInt
String
Symbol
null
Object
Function
讲讲Map和Set？
1. Map的key相⽐较普通对象来说更为灵活，普通对象的key只能以基础数据类型作为key值，并且所有传⼊的key值都会被转化成string
web前端基础面试题类型，⽽Map的key可以是各种数据类型格式。
2. Set可以讲讲它去重的特性。
WeakMap和Map之间的区别？
homebaseWeakMap只能以复杂数据类型作为key，并且key值是弱引⽤，对于垃圾回收更加友好。
讲讲原型链？
json格式怎么打开我的世界关于原型链，虽然现在⽤的不太多了，但是__proto__和prototype之间的关系，以及对于属性的向上查这些还是⼀定要清楚的，其余不⽤看的太细。
讲讲this？
1. this指向调⽤者这个关系⼀定要清楚
notify名词2. 要知道改变this指向的⼏种⽅式(call, bind, apply)
3. 箭头函数中this的特殊性要能讲清楚
浅拷贝和深拷贝的区别
浅拷贝：⼀般指的是把对象的第⼀层拷贝到⼀个新对象上去，⽐如
var a = { count: 1, deep: { count: 2 } }
var b = Object.assign({}, a)
// 或者
var b = {...a}
复制代码
深拷贝：⼀般需要借助递归实现，如果对象的值还是个对象，要进⼀步的深⼊拷贝，完全替换掉每⼀个复杂类型的引⽤。
var deepCopy = (obj) => {
var ret = {}
冒泡排序c语言程序for (var key in obj) {
var value = obj[key]
ret[key] = typeof value === 'object' ? deepCopy(value) : value
}
return ret
}
复制代码
对于同⼀个⽤例来说
// 浅拷贝
var a = { count: 1, deep: { count: 2 } }
var b = {...a}
unt = 5
unt // 5
复制代码
var a = { count: 1, deep: { count: 2 } }
var b = deepCopy(a)
unt = 5
unt // 2
复制代码
讲讲事件冒泡和事件捕获以及事件代理？
框架篇
React
React需要尽可能的保证熟练。因为作为中级⼯程师来说，公司可能不会让你去写框架，调性能优化，但是⼀定是会让你保质保量的完成开发任务的，这需要你能熟练掌握框架。
React2019⾼频⾯试题
这些题可以先过⼀下，如果暂时不能理解的就先跳过，不需要死磕。
有没有使⽤过 React Hooks？
常⽤的有哪些？都有什么作⽤？
如何使⽤hook在依赖改变的时候重新发送请求？
写过⾃定义hook吗？解决了哪些问题。
绿讲讲React Hooks的闭包陷阱，你是怎么解决的？
其实关于Hook的问题，把Dan的博⽂稍微过⼀遍，基本上就可以和⾯试官谈笑风⽣了。
讲讲React中的组件复⽤？
这篇⽂章从mixin到HOC到Hook，详细的讲解了React在组件复⽤中做的⼀些探索和发展，能把这个好好讲明⽩，⾯试官也会对你的React实⼒刮⽬相看。 另外这篇⽂章中的⾼阶组件和Hook本⾝也是⾼频考点。
⼯具
webpack的基础知识
这个系列从基础到优化都有，可以⾃⼰选择深⼊
性能优化
讲讲web各个阶段的性能优化？
这个很长，很细节，⼀样不要死磕其中的某⼀个点，对于你⼤概知道的点再巩固⼀下印象就ok。
webpack代码分割是怎么做的？
路由懒加载和webpack异步加载模块都是这个import()语法，值得仔细看看。
⽹络
讲讲http的基本结构？
说说常⽤的http状态码？
浏览器从输⼊url到渲染页⾯，发⽣了什么？
讲讲你对cookie的理解？包括SameSite属性。
这篇⽂章可以主要讲chrome80新增的cookie的SameSite属性，另外对于cookie整体也可以复习和回顾⼀遍，⾮常棒~
谈谈https的原理？为什么https能保证安全？
https也是⼀个⾼频考点，需要过⼀遍https的加密原理。
谈谈前端的安全知识？XSS、CSRF，以及如何防范。
安全问题也是很多公司必问的，毕竟谁也不希望⾃⼰的前端写的⽹站漏洞百出嘛。
讲讲http的缓存机制吧，强缓存，协商缓存？
浏览器缓存基本上是必问的，这篇⽂章⾮常值得⼀看。
⼿写系列
基础
⼿写各种原⽣⽅法
如何模拟实现⼀个new的效果？
如何模拟实现⼀个 bind 的效果？
如何实现⼀个 call/apply 函数？
说实话我不太喜欢⼿写代码的⾯试题，但是很多公司喜欢考这个，有余⼒的话还是过⼀遍吧。
进阶
精⼒有限的情况下，就先别背A+规范的promise⼿写了，但是如果有时间的话，可以⼤概过⼀遍⽂章，然后如果⾯试的时候考到了，再⽤简短的⽅式写出来。
最后注意：除了⾯试题。结合多年开发经验整理出2020最新企业级实战视频教程， 包括 Vue3.0/Js/ES6/TS/React/node等想学的可进裙 519293536 免费获取，⼩⽩勿进哦！
本⽂的⽂字及图⽚来源于⽹络加上⾃⼰的想法，仅供学习、交流使⽤，不具有任何商业⽤途，版权归原作者所有，如有问题请及时以作处理
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论