【面试】三年渣渣前端面试总结(留给以后的自己)

lz最近刚刚找到工作，一直想找一个机会写下自己的面试总结，所以趁着空闲的时间就把在面试过程中遇到的一些问题给梳理出来。对自己的知识进行查漏补缺，也希望可以帮助到正在找工作的你，话不多说，我们直接看面试

声明：本文只是对知识点进行梳理，lz会在关键地方给出具体链接，不会给出具体答案，具体的答案需要靠自己去搜索去总结，

1.HTML&CSS

• 语义化标签
• 冒泡和捕获
• 三栏布局(浮动、定位、flex、BFC)
• 垂直居中、水平居中(这个至少得说出四种实现方式)
• 盒模型和如何更改盒模型(box-sizing)(当时面我的面试官说我这两种模型说反了?)
• css选择器及优先级
• BFC
• position：inherit、static、relative、fixed、absolute
• z-index
• transition、animation、transform

面试题
①：如何使用CSS实现鼠标滑过一个元素控制另一个元素的显示与否
②：给你三个嵌套标签，如何实现中间的点击事件先触发，然后最里面一个最后是最外面的触发

2.JavaScript

• null和undefined的区别
• let、const、var比较
• push、slice、filter、map等常用API的使用和内部实现(面试题见①)
• 必须掌握__proto__和prototype并能画出原型图(面试题见②)
• 闭包的理解，闭包带来的好处和影响以及闭包的使用场景(可结合防抖节流来说)
• JavaScript继承：原型继承和class继承(面试题见③)
• 箭头函数的作用以及什么情况下不能使用箭头函数
• JavaScript的事件执行机制
• JavaScript隐式转换及规则
• call、apply、bind的异同以及内部实现
• new的模拟实现
• ES5模拟实现const
• Promise实现1、Promise实现2、Promise.all实现、Promise.race实现
• async await的实现原理(需要介绍Iterator、Generator)(面试题见④)
• async await promise的执行顺序
• 实现ES6的class extends(要考虑静态属性方法)

①举个?，在往数组中插入某一项方法有哪些？答：push、shift、slice、splice，这些API的执行速度是怎么样的？这就需要我们知道它们的内部是如何实现的
②求下面代码的值，并画出原型图解释原因

var F = new Function()
var obj = new F()
F.prototype.a = 1
obj.prototype.b = 2
obj.a = ???
obj.b = ???
复制代码

③介绍几种原型继承以及他们的优缺点，请卸车class extend继承的内部实现，扩展如何实现class内的静态方法
④这一道题开放性很大，需要实现同步异步以及结合闭包嵌套执行

浏览器

• 进程和线程
• 浏览器由哪些进程组成
• 浏览器内核线程组成
• 浏览器多进程到JS单线程全面梳理
• 浏览器重绘(repaint)重排(reflow)与优化
• 浏览器的跨域方式
• 跨域-JSONP、CORS、NGINX反向代理
• V8的垃圾回收机制
• HTTP握手
• HTTP缓存
• HTTP状态码
• HTTP1.0 1.1 2.0做了哪些改进
• localStorage、sessionStorage、cookie、session

面试题
①状态码为304时的数据处理过程？
②HTTP为什么需要三次握手四次挥手

数据结构和算法

• 链表结构特点
• 链表的插入删除和双向链表实现以及如何判断闭环
• 二叉树的递归和非递归实现
• 求二叉树的高度和宽度(递归和非递归实现)
• 斐波那契数列第几项以及前几项的和(递归和非递归实现)，摸这里
• 数组去重，此问题可升级为1、数组中对象去重2、数组中对象属性相同值不同去重
• 无序数组第k大数字(分数据量大小讨论)
• 目标数字在数组中排第几
• 求数组中最大的两个值
• 字符串匹配([](){}这种类型)(面试题见①)
• 实现一个EventBus包含on、emit、once、off
• 常见的数组操作
• 只出现一次的数字Ⅰ/Ⅱ/Ⅲ
• 重建二叉树

①?： (1){} 返回 false ， (){} 返回 true ，思路：

let obj = {
    '[': -1,
    ']': 1,
    '(': -2,
    ')': 2,
    '{': -3,
    '}': 3,
}
判断执行过程中，只要出现了字符不存在或者字符对应的值大于0就返回 false，否则返回 true
复制代码

Vue

• 为什么使用v-for时必须添加唯一的key?
• Vue的双向绑定原理(必问感觉这已经是面Vue的开场白)
• Vue单向数据流(结合props讨论)
• Vue组件间通信(父子组件，兄弟组件)
• Vue computed在什么时候初始化以及在什么时候开始计算的(需要了解源码)
• Vuex的工作原理
• Vue与React的区别
• Vue高阶组件(这个还是有难度的)

其他

1. 性能优化(可以从DOM操作、JS代码书写、webpack懒加载CDN配置资源缓存Hash值、HTTP缓存以及你在项目中优化的任何点都可以说)
2. Git操作(工作区、暂存区和版本库以及各种状态之间的切换，merge与rebase的区别)
3. webpack(webpack懒加载、CDN配置、资源缓存、Hash值等方面)

工程

• Airbnb-开发规范
• 前端工程化
• 观察者和发布订阅模式

推荐

• Vue源码解析
• Redux源码解析
• 正则表达式
• 前端优化最佳实践
• 移动端适配

暂时先想这么多吧，以后想到了再更新，大家面试如果在面试中遇到了什么问题可以留言讨论

tips
①：如果面试官提问问题的时候一定不要没在有听懂题意就直接回答问题
②：在面试官提问出问题当你把基础部分都回答过之后，一定要对问题中的一些点进行扩展回答，这是你能拿到offer的充分不必要条件谨记谨记谨记