持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

计算机网络

1.HTTP与HTTPS⭐

HTTP：客户端与服务器之间数据传输的格式规范，表示“超文本传输协议”。

HTTPS：在HTTP与TCP之间添加的安全协议层。

默认端口号：HTTP：80，HTTPS：443。

传输方式：http是明文传输，https则是具有安全性的ssl加密传输协议。

连接方式：http的是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

2.TCP与UDP的区别⭐

TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接。

TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的

每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信

TCP首部开销20字节;UDP的首部开销小，只有8个字节。

TCP提供可靠的服务。UDP适用于一次只传少量数据、对可靠要求不高的环境。

TCP三次握手与四次挥手:

第一次握手

客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。

第二次握手

服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。

第三次握手

当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。

这里可能大家会有个疑惑：为什么 TCP 建立连接需要三次握手，而不是两次？这是因为这是为了防止出现失效的连接请求报文段被服务端接收的情况，从而产生错误。

三次挥手

第一次握手

若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。

第二次握手

B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明 A 到 B 的连接已经释放，不再接收 A 发的数据了。但是因为 TCP 连接是双向的，所以 B 仍旧可以发送数据给 A。

第三次握手

B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。

第四次握手

A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。

3.HTTP常见的状态码⭐

1XX：(Informational) 信息性状态码，表示正在处理。

2XX：(Success) 成功状态码，表示请求正常。

3XX：(Redirection) 重定向状态码，表示客户端需要进行附加操作。

4XX：(Client Error) 客户端错误状态码，表示服务器无法处理请求。

5XX：(Server Error) 服务器错误状态码，表示服务器处理请求出错。

100：表示继续，一般在发送post请求时，已发送了HTTP header之后，服务器端将返回此信息，表示确认，之后发送具体参数信息。

200：成功响应

201：Created 表示请求成功并且服务器创建了新的资源。

202：Accepted 表示服务器已接受请求，但尚为处理。

301：Moved Permanently 表示请求的网页已永久移动到新的位置。

302：Found 表示临时重定向

304：Not Modified 表示自从上次请求后，请求的网页未修改过。（可以使用缓存）

400:Bad Request 表示服务器无法理解请求的格式，客户端不应该尝试再次使用相同的内容发起请求。

401：Unauthorized 表示请求未授权。

403：Forbidden 表示禁止访问。

404：Not Found 表示服务器上无法找到指定的资源。

500：Internal Server Error 表示服务器端错误。

502：Bad Gateway 表示服务器网关错误。

4.如何解决跨域⭐⭐

什么是跨域？

浏览器从一个域名的网页去请求另一个域名的资源时，协议、域名、端口任一不同，都是跨域

常见的：

1、JSONP跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

jsonp有点： JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题 。

jsonp缺点：仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

原理：利用script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。

Jsonp 其实就是一个跨域解决方案。 Js 跨域请求数据是不可以的，但是 js 跨域请求 js 脚本是可以的。 所以可以把要请求的数据封装成一个 js 语句，做一个方法的调用。 跨域请求 js 脚本可以得到此脚本。得到 js 脚本之后会立即执行。 可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问 题。 jsonp 原理：(动态创建 script 标签，回调函数) 浏览器在 js 请求中，是允许通过 script 标签的 src 跨域请求，可以在请 求的结果中添加回调方法名，在请求页面中定义方法，就可获取到跨域 请求的数据。

2、跨域资源共享（CORS）

目前最常用的一种解决办法，通过设置后端允许跨域实现。

浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

3、nginx反向代理

跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器，静态页面面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。

4、WebSocket协议跨域

5、proxy

前端配置一个代理服务器（proxy）代替浏览器去发送请求:因为服务器与服务器之间是可以通信的不受同源策略的影响。

5.网页从输入url到页面加载发生了什么⭐⭐

DNS解析

TCP连接

发送HTTP请求

服务器处理请求并返回HTTP报文

浏览器解析并渲染页面————>1.解析文档构建dom树。2.构建渲染树。3.布局与绘制渲染树。

连接结束

DNS解析，三次握手前后端-建立联系，前端向后端发送请求，后端返回响应，页面进行渲染，进行tcp断开，四次挥手

6.HTTP 传输过程⭐

含义：从建立连接到断开连接一共七个步骤，就是三次招手四次挥手

TCP 建立连接

浏览器发送请求命令

浏览器发送请求头

服务器应答

服务器回应信息

服务器发送数据

断开TCP连接

7.浏览器如何渲染页面的？⭐

浏览器解析html源码，将HTML转换成dom树，

将CSS样式转换成stylesheet（CSS规则树），

浏览器会将CSS规则树附着在DOM树上，并结合两者生成渲染树（Render Tree）

生成布局（flow），浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点

合成绘制生成页面。

8.对MVC和MVVM的理解⭐⭐

M:model(数据模型)，V：view(视图)，C：controller(逻辑处理)，VM：(连接model和view)

MVC:单向通信。必须通过controller来承上启下。

MVVM：数据双向绑定，数据改变视图，视图改变数据。

9.深拷贝，浅拷贝⭐⭐⭐

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

总而言之，浅拷贝改动拷贝的数组原数组也会变（慎用！项目中很多地方共用的数组都会变）。深拷贝修改新数组不会改到原数组。

10.防抖与节流⭐⭐⭐

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

应用场景：

提交按钮、用户注册时候的手机号验证、邮箱验证、

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

应用场景：

window对象的resize、scroll事件

拖拽时候的mousemove

射击游戏中的mousedown、keydown事件

文字输入、自动完成的keyup事件

vue中使用详情可以看vue中使用防抖和节流

11.性能优化⭐⭐

举例：

减少http请求次数

减少DNS查找

避免重定向

使用Ajax缓存

少用全局变量、减少DOM操作的使用

优化图片大小，通过CSS Sprites（精灵图）优化图片，

将css放在顶部，将js放在底部

keep-alive缓存

路由懒加载

按需引入组件

V-if v-show的合理使用

防抖节流

图片懒加载

seo优化 预渲染

cdn打包第三方模块

12.webSocket ⭐

webSocket：可以让服务器主动向客户端发送消息，适合开发聊天室，多人游戏等协作应用。

WebSocket协议是基于TCP的一种新的网络协议。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

16.事件循环（Event Loop）⭐⭐⭐

原因：JavaScript是单线程，所有任务需要排队，前一个任务结束，才会执行后一个任务。

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不进入主线程、而进入"任务队列"的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

同步和异步任务分别进入不同的执行环境， 先执行同步任务，把异步任务放入循环队列当中挂起，等待同步任务执行完，再执行队列中的异步任务。异步任务先执行微观任务，再执行宏观任务。一直这样循环，反复执行。

微任务：Promise.then、catch、finally、async/await。

宏任务：整体代码 Script、UI 渲染、setTimeout、setInterval、Dom事件、ajax事件。

13.什么是单页面应用（SPA）⭐

一个系统只加载一次资源，之后的操作交互、数据交互是通过路由、ajax来进行，页面并没有刷新。

在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。

优点：

前后端分离

良好的交互体验——用户不用刷新页面，页面显示流畅

减轻服务器压力——服务器只出数据

共用一套后端代码——多个客户端可共用一套后端代码

加载速度快,内容的改变不需要重新加载整个页面,对服务器压力小

缺点：

SEO难度高——数据渲染在前端进行

页面初次加载比较慢,页面复杂提高很多

多页面:一个应用多个页面,页面跳转时整个页面都刷新,每次都请求一个新的页面

优点:SEO效果好

缺点:页面切换慢,每次切换页面需要选择性的重新加载公共资源