本文主要是介绍前端高频面试--查缺补漏篇，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
什么是进程和线程，有什么区别
进程：进程是程序的一次执行过程，是动态的过程，有自身产生、存在、消亡的过程。
线程：线程由进程创建，是进程的一个实体。一个进程可以拥有多个线程。
举个例子：
一个公司是一个进程，公司里面各个项目组都是一个线程。
再比如，如果吃饭是一个进程，那么夹菜、吃菜、咀嚼、吞咽都是线程。
前端网络攻击有哪几种模式以及怎样预防
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：服务不可用
TCP三次握手与四次挥手
TCP三次握手和四次挥手实质是TCP通信的连接和断开。
三次握手：
第一次：客户端->服务端，发送SYN标志，表示请求建立新连接。
第二次：服务端->客户端，回传SYN和ACK，表示我收到了，并且同意连接。
第三次：客户端->服务端，回传ACK标志，表示我知道你收到了。
四次挥手：
第一次：客户端->服务端，发送FIN标志，表示客户端不再发送数据了。
第二次：服务端->客户端，回传ACK响应确认，服务器进入CLOSE_WAIT状态，在第三次挥手之前数据还是可以从客户端传送到服务端的。
第三次：服务端->客户端，服务端完成数据请求后，向客户端发送FIN标志，表示服务端也不再发送数据了。
第四次：客户端->服务端，回复ACK响应确认，此时客户端处于TIME_WAIT状态，需要经过一段时间确保服务器收到自己的应答报文后，才会进入CLOSED状态。
为什么要三次握手不是两次握手：
是为了确保双方都能够收到对方的请求和应答，建立可靠的连接。如果只有两次握手，那么无法确定客户端和服务器端都已经同意建立连接。
打个比方，约我想约好朋友出来玩，我先发送消息告知：我想和你出来玩。朋友回复：好啊，一起出来玩。我再发送：那我们现在出门吧。如果只发送两次，第二次我能知道她同意出来玩了，但是她并不知道我是否知道她同意出来玩。
为什么握手三次，挥手却要四次：
四次挥手之所以是四次，是因为在TCP中数据的传输是双向的，每一方都需要单独关闭连接，而且可能还存在未传输完的数据段和对方的ACK报文，因此需要四次握手来确保双方的连接被正确关闭。
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. 提取公共代码。
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.");
};
这篇关于前端高频面试--查缺补漏篇的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
