面试笔记（一）

2020-1-6 更新
本来我确实记录了不少面试题的，也确实有整理答案，但是毕竟网上也有足够这方面的资源，再者这个本身写的目的主要就是为了给自己备战面试的，刚写完一后就找到比较满意的工作了，当时就感觉没有必要写下去了，因此也不会有面试笔记（二）了。今天突然看到这里没有写下去，觉得还是应该说明一下原因。

---

这里记录整理的是面试时遇到的问题，对别人而言可能没有特别的参考价值，更多的是我对面试的总结与对接下来面试的准备。

这是我从一个朋友那里学到的，他每一次面试都会进行总结，对不懂的问题会设法弄懂，可以特意找我讨论面试的内容。可以说每一次面试都在增加下一次面试成功的可能，我也想向他学习一下。
这里整理的问题有一些是我遇到的，也有我同事遇到过的：

http1和 http2有什么区别？

http1是文本传输，而http2则是以二进制去进行传输，相对而言，http2的更加安全可靠。
http2的二进制传输单位是帧和流，帧组成流，而每一个流，都有一个流ID。
http1一个连接只能提交一个请求，而http2可以同时处理多个请求，实现多路复用，每个请求是通过流ID去进行标识的。这样http2可以降低连接的占用数量，从而提高网络的吞吐量。
http2相对http1通过gzip与compress对头部进行了压缩，且在客户端与服务端各自维护一份头部索引表，后面的传输可以根据索引Id进行头部信息的传输，缩小头部容量，间接提高了传输效率。
http1是只能从客户端发起，服务器响应的，而http2可以服务端进行推送。

参考：

• http1与http2的主要区别？
• HTTP2与HTTP1.1的区别

DNS是什么？

DNS就是域名系统，用于网站域名与IP地址的相互转换。例如我们平时访问百度，往往输入的是:www.baidu.com，这个就是网站的域名，然而机器读取的是ip，DNS让这二者可以相互转换。

参考：

• https://baike.baidu.com/item/域名系统（服务）协议/15134609?fr=aladdin&fromtitle=dns&fromid=427444

http1和http2解决了什么问题？

http1.0是一种无状态、无连接的应用层协议。它实现了客户端和服务端的通讯。
但它存在一些问题：

• 每次请求都需要通过3次握手建立TCP连接
• 队头阻塞，http1.0规定下一个请求必须在前一个请求响应到达以后才能发送

http1.1在继承1.0的优点的同时，尝试克服其缺陷：

• 长连接，允许http连接不断开，避免了每次请求都要重复建立TCP连接
• 管道化，实现了请求的“并行”传输，这个功能是基于长连接实现的。但是这个并行仍然要求服务器必须按照客户端请求的先后顺序依次回送相应的结果，以保证客户端能够区分出每次请求的响应内容。形式大概类似于：请求1-》请求2-》请求3-》响应1-》响应2-》响应3
• 加入缓存处理（强缓存与协商缓存）、支持断点传输等

http2.0：
http1是文本传输，而http2则是以二进制去进行传输，相对而言，http2的更加安全可靠。
http2的二进制传输单位是帧和流，帧组成流，而每一个流，都有一个流ID。
http1一个连接只能提交一个请求，而http2可以同时处理多个请求，实现多路复用，每个请求是通过流ID去进行标识的。这样http2可以降低连接的占用数量，从而提高网络的吞吐量。
http2相对http1通过gzip与compress对头部进行了压缩，且在客户端与服务端各自维护一份头部索引表，后面的传输可以根据索引Id进行头部信息的传输，缩小头部容量，间接提高了传输效率。
http1是只能从客户端发起，服务器响应的，而http2可以服务端进行推送。

服务器和浏览器之间数据的双向通讯是怎么实现的？

1. 首先，用户在浏览器输入网址
2. 浏览器进入查找域名IP地址的流程
   1. 浏览器缓存
   2. 系统缓存
   3. 路由器缓存
   4. ISP DNS 缓存（ISP是网络服务提供商）
   5. 递归搜索，ISP服务器会尝试从顶级域名往下递归搜索
3. 浏览器给web服务器发送http请求
4. 服务器响应浏览器
5. 浏览器开始显示HTML
   参考：

• 百度面试题：从输入url到显示网页，后台发生了什么？
• 浏览器与服务器通信的过程

什么是浏览器缓存，什么是服务器缓存？

在前端性能优化中，缓存的优化是必须要考虑的，因为它提升的效果明显。合理使用缓存，可以让用户二次打开页面时的加载速度明显提升。对于一个数据请求而言，可以分为发起请求，服务器处理，服务器响应，而浏览器缓存优化针对的就是发起请求和服务器响应这两个阶段。
利用缓存，浏览器可以直接使用缓存不发送请求，或者后端不再返回数据，通知浏览器使用缓存。
浏览器缓存分为：强制缓存和协商缓存。
强制缓存：
当资源的响应报文设置了Expires或者Cache-Control时，只要资源没有过期，浏览器则不会发出请求；
但是强制请求也存在着问题，过长的过期时间可能使得资源无法及时更新，过短优化效果不够好。因此还可以进行协商缓存，协商缓存就是浏览器发送请求给服务器，让服务器判断是否使用缓存，缓存判断的依据包括：修改时间、ETag(即文件的hash值）

你在之前的工作中做过哪些项目，用到了什么技术？

我最近一家公司，参与开发了一款xxapp，一款xx小程序，以及一套管理员系统。使用到的技术栈主要是vue全家桶、uni-app。以前也有开发过公众号、使用原生开发过小程序。ui框架的话使用过ElementUI，vant等。

在最近项目中运用到的一些技术或者比较突出的特点？

在我最近开发的管理员后台中，我使用了vue-router一个比较新的API接口router.addroutes 去实现异步添加路由。基本的想法就是，用户登录后，一次过把用户有权限的列表添加进去，这样，路由守卫中判断的逻辑就可以得到简化，用户可以直接进行页面的跳转，加快了页面跳转的速度。
同时不同于多数后台管理的项目，我们的后台管理系统，可以精确的控制用户访问页面的权限，而多数的后台模版只是控制用户访问的菜单，同时我们的项目也实现了按钮级别的控制。
在权限管理、用户信息、菜单等模块，使用了vuex去维护全局变量。
对axios请求根据业务进行了二次封装，提高了开发效率。
其他的还有，使用环境变量、mock配置、对webpack配置的修改等。

防抖与节流，请手写实现代码

防抖的意思是触发事件发生n秒内只能执行一次函数，如果期间重新触发了该事件，就从该事件起n秒后再执行函数。
节流：连续触发事件时，n秒内函数只能被执行一次。
因此对于节流，2n秒内连续触发事件，函数可以执行2次
而对于节流，触发频率在n秒内,那2n秒内函数也只会执行1次

函数实现：

// 防抖
function debounce(fn,time) {
	let timer = null
	return function(){
		let context = this
		let args = arguments
		if(timer){
			global.clearTimeout(timer)
		}
		timer = golbal.setTimeout(()=>{
			fn.apply(content,args)
		},time)
	}
}

// 节流
function throttle(fn,time){
	let timer = null
	return function (){
		let content = this
		let args = arguments
		if(!timer){
			timer = setTimeout(()=>{
				timer = null
				fn.apply(content,args)
			},time)
		}
	}
}

参考：

• 函数防抖和节流