前端高频面试--查缺补漏篇

什么是进程和线程，有什么区别

进程：进程是程序的一次执行过程，是动态的过程，有自身产生、存在、消亡的过程。

线程：线程由进程创建，是进程的一个实体。一个进程可以拥有多个线程。

举个例子：
一个公司是一个进程，公司里面各个项目组都是一个线程。
再比如，如果吃饭是一个进程，那么夹菜、吃菜、咀嚼、吞咽都是线程。

JS为什么是单线程而不是多线程

JS设计为单线程是跟它的用途相关，JS作为浏览器脚本语言，主要实现用户和浏览器的交互，以及操作DOM。这决定了它只能是单线程，否则会带来复杂的同步问题。
假设它是多线程的，如果同一时间存在两个线程，一个线程在DOM节点添加内容，而另一个线程又删除了这个节点，这个时候浏览器就不知道该以哪个线程为准。
所以为了避免复杂性，JS就是单线程的。

前端网络攻击有哪几种模式以及怎样预防

1. XSS攻击
XSS指跨站脚本攻击，攻击者通过向网站注入恶意代码实现攻击，当用户浏览这个页面时，就会执行这些恶意代码。可能造成泄露用户登陆信息cookie，恶意跳转等。
预防XSS攻击的方法：
1. 对注入的代码启动HTML编码。
2. 过滤非法字符。
3. 设置cookie属性http-only，防止js脚本读取cookie。

2. CSRF攻击
CSRF攻击叫做跨站请求伪造，通过盗用用户的身份信息发起请求。诱导用户跳转到新页面，如果目标站点只使用cookie，并且kookie是允许跨域的，此时就能拿到用户的cookie，来模拟用户进行操作。
预防CSRF攻击的方法：
1. 增加用户与页面交互操作，例如页面增加随机数字验证码。
2. 使用token来认证。
3. 设置cookie规定其他网站不能使用本网站的cookie。

浏览器缓存机制

浏览器缓存分为:强制缓存和协商缓存。

强制缓存：
定义：当浏览器去请求某个文件的时候，服务端就在响应头里面对该文件做了缓存规则配置。
设置：控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires。
Expires：服务器返回该请求结果缓存的到期时间，如果发送请求时客户端的时间小于Expires的值，直接使用缓存结果。
Cache-Control属性：
public：所有内容都缓存
private：默认值，所有内容只有客户端可以缓存
no-cache：客户端缓存内容，是否使用缓存需要协商缓存来决定
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
max-age=xxx：缓存内容将在xxx秒后失效

协商缓存：
强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存就叫协商缓存。
协商缓存主要还是看ETag和Last-Modified，Last-Modified是文件的修改时间；Etag是当前返回资源的唯一标识。

不能被缓存的请求
1. post 请求无法被缓存。（缓存一般会对不更改数据库的数据进行缓存，对于更改数据的数据一般不进行缓存。所以get请求会被缓存，post请求不会进行缓存）
2. http响应头中不包含Last-Modified/ETag，也不包含Cache-Control/Expiress的请求。
3. http信息头明确设置Cache-Control:no-cache 或 Cache-Control:max-age=0时。

http和https基本概念、区别

概念：
http：超文本传输协议，是互联网应用最为广泛的一种网络协议。
https：HTTP的安全版。即HTTP下加入SSL层。

区别：
1. http是明文传输，https是加密传输。
2. http标准端口是80，http是443。
3. https需要证书认证，http不需要。
4. http连接简单，是无状态的；https是可进行加密传输、身份认证的网络协议，比http更加安全。

常见的http请求有哪些

GET：请求从服务器获取特定资源
POST：在服务器上创建一个新的资源
DELETE：从服务器删除特定的资源
PUT：更新服务器上的资源

GET和POST区别：
1. GET参数通过URL传递，POST放在请求体中。
2. GET参数会直接暴露在URL上，不能放敏感信息，POST相对于GET更安全。
3. GET请求在URL中传送的参数是有长度限制的。

HTTP常见状态码

2开头：成功状态码
200请求成功

3开头：重定向状态码
301：永久移动
302：临时移动
304：走缓存（第一次成功状态码为200，第二次F5刷新为304。按Ctrl+F5强制刷新为200）

4开头：客户端错误状态码
400：请求语法报错，或者请求参数有误
401：未授权的请求，无权限访问（身份验证错误）
403：禁止访问
404：找不到资源，一般为路径错误

5开头：服务器错误状态码
500：服务器错误
503：服务不可用

http1.0和2.0的区别

http1.0:
1. 每次连接只发送一个请求
2. 使用URL重定向，完成页面跳转功能。
3. 消息体只支持文本格式。
4. 不支持长链接，每次请求结束连接也会结束。
http2.0:
1. 支持多路复用。
2. 支持服务器推送。
3. 支持加密传输，提高安全性。
4. 头部压缩，减少数据传输量。

TCP三次握手与四次挥手

TCP三次握手和四次挥手实质是TCP通信的连接和断开。
三次握手：
第一次：客户端->服务端，发送SYN标志，表示请求建立新连接。
第二次：服务端->客户端，回传SYN和ACK，表示我收到了，并且同意连接。
第三次：客户端->服务端，回传ACK标志，表示我知道你收到了。

四次挥手：
第一次：客户端->服务端，发送FIN标志，表示客户端不再发送数据了。
第二次：服务端->客户端，回传ACK响应确认，服务器进入CLOSE_WAIT状态，在第三次挥手之前数据还是可以从客户端传送到服务端的。
第三次：服务端->客户端，服务端完成数据请求后，向客户端发送FIN标志，表示服务端也不再发送数据了。
第四次：客户端->服务端，回复ACK响应确认，此时客户端处于TIME_WAIT状态，需要经过一段时间确保服务器收到自己的应答报文后，才会进入CLOSED状态。

为什么要三次握手不是两次握手：
是为了确保双方都能够收到对方的请求和应答，建立可靠的连接。如果只有两次握手，那么无法确定客户端和服务器端都已经同意建立连接。
打个比方，约我想约好朋友出来玩，我先发送消息告知：我想和你出来玩。朋友回复：好啊，一起出来玩。我再发送：那我们现在出门吧。如果只发送两次，第二次我能知道她同意出来玩了，但是她并不知道我是否知道她同意出来玩。

为什么握手三次，挥手却要四次：
四次挥手之所以是四次，是因为在TCP中数据的传输是双向的，每一方都需要单独关闭连接，而且可能还存在未传输完的数据段和对方的ACK报文，因此需要四次握手来确保双方的连接被正确关闭。

tcp如何保证数据传输可靠

1. 数据分块：将数据划分为合适大小，当数据发生错误或丢失，只需要重传有问题的部分即可。
2. 序列号：给发送的每一个包进行编号，可以根据序号对失序的数据包进行重新排序、去重。
3. 超时重传：发送数据后，长时间没收到回应，会把数据再发一次。
4. 流量控制
5. 拥塞控制：网络拥塞时，减少数据的发送。

WebPack是什么，谈谈你对他的理解

webPack可以看做是模块的打包机器：它能分析项目结构，找到浏览器不能直接运行的拓展语言，例如：Scss，TS等，并将其打包为合适的格式以供浏览器使用。

对于不同类型的资源，webPack有对应的模块加载器：loader
CSS：
解析CSS的css-loader、style-loader，
解析less的less-loader，sass的sass-loader,

JS：
解析将 TypeScript 转换成 JavaScript的ts-loader,
解析ES6为ES5的babel-loader，
解析JavaScript 代码规范的eslint-loader

vue：vue-loader

静态资源：url-loader、file-loader、json-loader

如何利用webpack优化前端性能：
1. 压缩代码，删除多余代码。
2. 利用CDN，将静态资源上传到CDN上。
3. 提取公共代码。

webpack 的 loader 和 Plugin 简单理解

loader的功能定位是转换代码，而一些其他的操作难以使用loader完成。当我们需要把功能嵌入到webpack的编译流程中的时候，要借助于plugin。
在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

WebSocket了解吗

WebSocket是一种客户端和服务端通信的方式。服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。

由于websocket会断开，需要有断开重连机制，可以使用reconnecting websocket，它是一个websocketd的js库，非常小，压缩后仅有3KB。当websocket断线后会自动帮你重连。使用非常简单，new WebSocket替换成new ReconnectingWebSocket即可。

常用的属性和方法：
readyState：连接的四种状态。1表示连接成功。
onopen：连接成功后的回调函数
send：向服务器发送数据
onmessage：收到服务器数据后的回调函数。
onclose：连接关闭后的回调函数。

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

单页面和多页面

单页面：即只有一个主页面的应用。浏览器一开始会加载所有必须的html、js、css资源。页面跳转通过路由或元素的显示隐藏进行切换。单页面应用从头到尾它的html地址是不变的。
优点是用户体验性好，内容改变不需要重新加载整个页面，切换快。但初次加载会比较慢。

多页面：每次页面跳转都会切换一个新的html地址，跳转会刷新所有资源。
优点是一开始不用加载所有的资源，首页加载快。但是加载新页面需要重新请求资源，所以切换会比较慢。

canvas和svg有什么区别

1. 绘制语法不同。canvas使用js+html绘制，svg使用xml绘制。
2. canvas通过像素渲染图形，适合绘制简单的图形和文字；svg通过dom节点渲染，适合绘制复杂的图形。
3. canvas的性能会好一些，如果svg节点过多会导致渲染速度变慢。
4. canvas依赖分辨率，缩放会存在失真问题；svg缩放不会失真。
5. canvas不支持事件，svg支持分层和事件。