写给女友的中级前端面试秘籍（含详细答案，15k级别）

前言

本篇文章，献给我家女友，祝她在杭州找一个965的好公司！css

题外话：关于中级 -> 高级的进阶，我也写了一篇文章，但愿对你有帮助：html

写给初中级前端的高级进阶指南前端

HTML篇

HTML5语义化

html5语义化标签html5

百度ife的h5语义化文章，讲得很好，不少不错的公司都会问语义化的问题。react

CSS篇

CSS常见面试题

50道CSS经典面试题webpack

CSS基础有的公司很重视，在面试前仍是须要好好复习一遍的。git

能不能讲一讲Flex布局，以及经常使用的属性？。

阮一峰的flex系列github

Flex布局是高频考点，并且是日常开发中最经常使用的布局方式之一，必定要熟悉。web

BFC是什么？能解决什么问题？

什么是BFC？什么条件下会触发？应用场景有哪些？面试

关于bfc，能够看看三元大佬总结的文章

这篇文章里，顺便也把外边距重叠的问题讲了一下。

JS基础篇

讲讲JS的数据类型？

最新的 ECMAScript 标准定义了 8种数据类型:

6 种原始类型
- Boolean
- Undefined
- Number
- BigInt
- String
- Symbol
null
Object
Function

developer.mozilla.org/en-US/docs/…

讲讲Map和Set？

Map的key相比较普通对象来讲更为灵活，普通对象的key只能以基础数据类型做为key值，而且全部传入的key值都会被转化成string类型，而Map的key能够是各类数据类型格式。
Set能够讲讲它去重的特性。

WeakMap和Map之间的区别？

WeakMap只能以复杂数据类型做为key，而且key值是弱引用，对于垃圾回收更加友好。

讲讲原型链？

JavaScript深刻之从原型到原型链

关于原型链，虽然如今用的不太多了，可是__proto__和prototype之间的关系，以及对于属性的向上查找这些仍是必定要清楚的，其他不用看的太细。

讲讲this？

JavaScript中的this

this指向调用者这个关系必定要清楚

要知道改变this指向的几种方式(call, bind, apply)

箭头函数中this的特殊性要能讲清楚

浅拷贝和深拷贝的区别

浅拷贝：通常指的是把对象的第一层拷贝到一个新对象上去，好比

var a = { count: 1, deep: { count: 2 } }
var b = Object.assign({}, a)
// 或者
var b = {...a}
复制代码

深拷贝：通常须要借助递归实现，若是对象的值仍是个对象，要进一步的深刻拷贝，彻底替换掉每个复杂类型的引用。

var deepCopy = (obj) => {
    var ret = {}
    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}

a.deep.count = 5
b.deep.count // 5
复制代码

var a = { count: 1, deep: { count: 2 } }
var b = deepCopy(a)
a.deep.count = 5
b.deep.count // 2
复制代码

讲讲事件冒泡和事件捕获以及事件代理？

你真的理解事件冒泡和事件捕获吗？

框架篇

React

React须要尽量的保证熟练。由于做为中级工程师来讲，公司可能不会让你去写框架，调性能优化，可是必定是会让你保质保量的完成开发任务的，这须要你能熟练掌握框架。

React2019高频面试题

2019年17道高频React面试题及详解

这些题能够先过一下，若是暂时不能理解的就先跳过，不须要死磕。

有没有使用过 React Hooks？

经常使用的有哪些？都有什么做用？
如何使用hook在依赖改变的时候从新发送请求？
写过自定义hook吗？解决了哪些问题。
讲讲React Hooks的闭包陷阱，你是怎么解决的？

useEffect 完整指南

其实关于Hook的问题，把Dan的博文稍微过一遍，基本上就能够和面试官谈笑风生了。

讲讲React中的组件复用？

【React深刻】从Mixin到HOC再到Hook

这篇文章从mixin到HOC到Hook，详细的讲解了React在组件复用中作的一些探索和发展，能把这个好好讲明白，面试官也会对你的React实力另眼相看。

另外这篇文章中的高阶组件和Hook自己也是高频考点。

工具

webpack的基础知识

这个系列从基础到优化都有，能够本身选择深刻
掘金刘小夕的webpack系列

性能优化

讲讲web各个阶段的性能优化？

React 16 加载性能优化指南

这个很长，很细节，同样不要死磕其中的某一个点，对于你大概知道的点再巩固一下印象就ok。

webpack代码分割是怎么作的？

webpack的代码分割（路由懒加载同理）

路由懒加载和webpack异步加载模块都是这个import()语法，值得仔细看看。

网络

这篇文章能够主要讲chrome80新增的cookie的SameSite属性，另外对于cookie总体也能够复习和回顾一遍，很是棒~

谈谈https的原理？为何https能保证安全？

谈谈 HTTPS

https也是一个高频考点，须要过一遍https的加密原理。

谈谈前端的安全知识？XSS、CSRF，以及如何防范。

寒冬求职之你必需要懂的Web安全

安全问题也是不少公司必问的，毕竟谁也不但愿本身的前端写的网站漏洞百出嘛。

讲讲http的缓存机制吧，强缓存，协商缓存？

深刻理解浏览器的缓存机制

浏览器缓存基本上是必问的，这篇文章很是值得一看。

手写系列

基础

手写各类原生方法

如何模拟实现一个new的效果？
如何模拟实现一个 bind 的效果？
如何实现一个 call/apply 函数？
三元-手写代码系列

说实话我不太喜欢手写代码的面试题，可是不少公司喜欢考这个，有余力的话仍是过一遍吧。

进阶

手写Promise 20行

精力有限的状况下，就先别背A+规范的promise手写了，可是若是有时间的话，能够大概过一遍文章，而后若是面试的时候考到了，再用简短的方式写出来。

剖析Promise内部结构，一步一步实现一个完整的、能经过全部Test case的Promise类

❤️感谢你们

1.若是本文对你有帮助，就点个赞支持下吧，你的「赞」是我创做的动力。

2.关注公众号「前端从进阶到入院」便可加我好友，我拉你进「前端进阶交流群」，你们一块儿共同交流和进步。