HTTP——MST

网络协议

1、前端优化手段

1、减少HTTP请求数量
1）.图片处理，字体图标代替图片
2）.合并文件，合并公共包文件、不同页面单独合并
3）.减少重定向，使用301永久重定向
4）.使用缓存
2、减少资源大小
3、资源加载优化
1）.css文件放在head标签中，js文件放在body的地步 先加载外联，后加载内置；
2）.优化加载时机：预加载和懒加载
4、优化网络罗请求
1）.CDN分发网络
2）.DNS预解析
5、减少重绘回流
6、webpack优化
动态导入和按需加载；打包公共文件

2、浏览器输入网址到页面渲染中间发生了什么？

1、输入url，浏览器根据域名寻找ip地址；
2、浏览器发起http请求给服务器，服务器接收到请求后处理请求，并生成HTML代码。返回给浏览器，这个时候的HTML代码可能是经过压缩。
3、浏览器接收服务器的返回结果，如果判断HTML代码又压缩，则会先进行解压操作。
4、浏览器开始渲染HTML
5、浏览器重新发起请求，获取HTML内的文件，比如css，js，img等资源，这些资源的获取都会经历一个与HTML获取类似的过程。

3、三次握手四次挥手：

握手：
       第一次建立连接时，客户端发送TCP报文，syn(发起一个新连接)到服务器，并进入SYN—send状态，等待服务器确认；
       第二次，服务器收到syn，确认客户端的SYN，并回复客户端SYN+ACK(确认序号)，服务器进入等待接收状态；
       第三次客户端收到服务器的包，向服务器发送确认包，发送完毕周，两端进入建立状态，完成三次握手；
挥手：
       第一次：客户端进程发出连接释放报文，并且停止发送数据。
       第二次：服务器收到连接释放报文。
       第三次：客户端收到服务器的确认请求后，等待服务器发送连接释放报文，需要接受服务器发送的最后数据。
       第四次：客服端收到服务器的连接释放报文后，必须发出确认，完成四次挥手。

4、HTTP状态码

2XX 成功
200 OK，表示从客户端发来的请求在服务器端被正确处理
3XX 重定向
301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
4XX 客户端错误
400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源
5XX 服务器错误
500 internal sever error，表示服务器端在执行请求时发生了错误
501 Not Implemented，表示服务器不支持当前请求所需要的某个功能
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求
504 Gateway Timeout 网管请求超时

5、cookie session localStroge和sessionStroge的区别

都是保存在浏览器端，都是同源的
1、存储大小限制：
cookie不超过4kb； sessionStroge和localStrige可以达到5M以上；
2、cookie在浏览器和服务器间来回传递：
sessionStroge和localStrige不会自动把数据发送给服务器，仅用于本地保存。
cookie还有路径（path）的概念，可以限制cookie只属于某个路径下。
3、数据有效期不同
cookie只在设置的cookie过期之前有效，即使窗口或浏览器关闭；
sessionStroge只在当前浏览器关闭之前有效；
localStroge不管浏览器关闭与否，数据永久保存。
4、作用域不同
cookie数据在所有同源窗口中都是共享的；
sessionStroge在不同浏览器窗口不共享，即使是同一个页面

6、前端缓存

HTTP缓存分为两种：一个是强缓存，另一个是协商缓存，主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力，

强缓存
不需要发送请求到服务端，直接读取浏览器本地缓存，在CHrome的NetWork中显示的HTTP状态码是200，在 Chrome 中，强缓存又分为 Disk Cache (存放在硬盘中)和 Memory Cache (存放在内存中)，存放的位置是由浏览器控制的。是否强缓存由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共同来控制。
协商缓存
当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置了If-Modified-Since 或者 If-None-Match 的时候，会将这两个属性值到服务端去验证是否命中协商缓存，如果命中了协商缓存，会返回 304 状态，加载浏览器缓存，并且响应头会设置 Last-Modified 或者 ETag 属性。