中级前端面试总结

坐标成都、薪资范围12-15左右真实面试所问。

1、如何优化webpack打包速度。

代码压缩，使用webpack压缩插件UglifyJS，babel-loader开启缓存，设置cacheDirectorys为true，提取公共代码，借助shelljs拷贝静态文件

2、promise实现原理

个人理解其实就是通过原型链方法的链式调用，事件执行内容捕获与执行后的状态控制去实现的。

网上许多博主对其进行了深究，可以网上翻阅一下。

3、事件循环机制

js是一门单线程语言，问这个问题其实就考的任务队列执行顺序的理解，你首先要知道宏任务有哪些，微任务有那些，什么是单线程任务，谁先谁后。

这个问题多数时候会出现在公司笔试，频率很高！！！
这个问题多数时候会出现在公司笔试，频率很高！！！
这个问题多数时候会出现在公司笔试，频率很高！！！

宏任务：setTimeout、setInterval、setImmediate、I/O、UI rendering
微任务：promise.then、process.nextTick

单线程的console是顺序执行的。

举个例子：

理解起来比较绕，建议多联系该类题目，就能大致了解透彻执行顺序。

4、如何实现防抖与节流，两者作用是什么

两者都是为了防止高频操作导致不良后果的产生，长见的就是页面滚动监听的时候，与表单提交的时候，简单描述就是

节流：当持续触发事件时，保证隔间时间触发一次事件

防抖：简单来说就是防止操作抖动，重复频率的操作只生效一次

防抖只需要加一个外部变量就可实现。

data(){
	return {
		state:false
	}
}

methods:{
	debounce(){
		if(this.state){
			return
		}
		this.state = true
		setTimeout(()=>{
			//执行请求或是其他
			this.state = false
		},1000)
	}
}

一秒内重复执行debounce，也只触发一次setTimeout()

简单比划了一个节流函数的操作，可以用在 用户输入内容后调用查询 这样的场景，以下函数就是用户一直输入一直输入，只要中间不存在600ms间隔，就会一直调用clearTimeout去清除定时器，若存在600ms间隔，就会执行打印147。

function throttle(e){
            const self = this;
            clearTimeout(self.timer)
			self.timer = setTimeout(()=>{
				console.log(147)
            }, 600)
			console.log('执行')
        }
let num = 0 ;
// 模拟用户输入或滚动条滚动操作，为了防止一直重复执行，添加了num变量控制interval的执行次数。
let interval = setInterval(() => {
	num ++ 
	throttle()
	if(num == 10){
		clearInterval(interval) // 重复执行超过10次后就清除该定时器 
	}
}, 100);

结果

5、多请求的时候如何实现只出现一个全局loading（第一个请求发起时打开loading，最后一个请求响应时结束全局loading）。

将所有的请求以变量的形式去接收，并赋值请求数量，响应了一个请求，就 请求数量 - 1，当请求数量==0的时候，就结束loading即可。

6、如何实现无感token刷新。

这个问题答得比较简单，因为实际项目中也用过，就是单独封装一个token刷新的方法，失效的时候去调用他，将没有正常执行的函数以回调的形式传入，刷新后再重新执行未执行的函数。具体可以看我这篇：“微信小程序token过期后重新执行失效的请求封装（用户无感刷新token）”

7、控件级权限的控制方法（如何控制一个页面中的按钮是隐藏还是显示？）

封装一个公有方法，进页面前调用该方法，请求后台得到渲染结果。

也可以细化权限菜单内容，将级别放到控件级，登录时候一并传回，前端在页面渲染时自行调用本地存储的权限去判断是否显示也可。

8、vue路由的几种模式及路由的实现原理

有两种模式，hash和history模式，详细可以看看这篇 博客的解释

实现原理也是通过这两种模式，一是hash中的’#'后对地址内容进行修改，不跳转页面的同时可以监听到url变化，来实现路由跳转。

H5新增了两种history的api 一是hashhistory.push，二是hashhistory.replace

可以看这片博客的详解

9、vue的数据驱动实现原理。

vue数据双向绑定是通过Object.defineProperty()来实现数据劫持、结合发布者-订阅者模式的方式来实现的。

在打印vue对象的时候，可以看到该对象会具有set和get两个方法，vue就是通过这个来实现数据劫持。

10、js精度丢失是什么原因，如何解决精度丢失的问题

我回答的是一般此类计算都给后端进行处理，不然就用四舍五入的方式（小数*100此类也会造成精度丢失）。

造成的原因呢，是因为计算机是以二进制的方式存储数据，对于无限值可能会舍去，转而存储一个近似值，这就造成了一定程度的误差，导致 0.1 + 0.2 != 0.3 的情况出现。

---

以上只是介绍了一部分我觉得可能被忽略且存在一定难点的问题，其他简单的诸多问题我就没有记录在博客中，类似像this指向，bind、call、apply的区别，闭包，原型链，兼容性问题，适配问题，色盲模式，动画实现都算是频率较高的问题类型，但不太经典也不太有难点，个人有个人的解决方式，也可以看看。

前两天面了一次字节跳动，被面试管问了一个多小时，直接整懵逼了，大厂对社招这边的底层原理问得巨多，不仅仅像是vue实现原理，而是会追问你怎么实现数据劫持，vue是怎么更新dom的，虚拟dom和真实dom的区别，Vuex的mapgetters，什么时候用this.$state，什么时候用 ** $emit **等等，如果你要考虑大厂的机会，原理方面需要多去把握一下，还有就是，看面试题记得看全面，衍生出的东西都可能会问死你。

题主已经拿到13+15薪offer了，建议boos上的好文可以多去看看，也祝你找到满意的工作，进大厂。

后续有面试上的问题再更新，撒花！