【面试】三年渣渣前端面试总结

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实现一、Promise实现二、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为何须要三次握手四次挥手

数据结构和算法

• 链表结构特色
• 链表的插入删除和双向链表实现以及如何判断闭环
• 二叉树的递归和非递归实现
• 求二叉树的高度和宽度(递归和非递归实现)
• 斐波那契数列第几项以及前几项的和(递归和非递归实现)，摸这里
• 数组去重，此问题可升级为一、数组中对象去重二、数组中对象属性相同值不一样去重
• 无序数组第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的充分没必要要条件谨记谨记谨记