Http

http和https的区别

http传输协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。HTTPS是运行在SSL/TLS之上的HTTP协议，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。 对称加密：通信双方都使用用一个密钥进行加密解密，比如特工接头的暗号，就属于对称加密；这种方式虽然简单性能好，但是无法解决首次把密钥发给对方的问题，容易被黑客拦截密钥非对称加密：由私钥＋公钥组成的密钥对 即用私钥加密的数据，只要公钥才能解密；用公钥加密的数据，只有私钥才能解密通信双方都有自己的一套密钥对，通信前将自己的公钥发给对方然后拿着这个公钥来加密数据响应给对方，等对方收到之后，再用自己的私钥进行解密

---

http2相比http1的新特性

多路复用。 http2子啊一个连接里面，客户端可以同时发送多个请求或回应，较少了tcp连接的数量和tcp连接慢启动的问题。同时http2可以对请求制定优先级，优先级高的响应越快，可以把js和css的优先级设置高一点，让他们有限下载并执行。同时，优先级也能够动态的修改。

压缩请求头

TTP是无状态的，每次请求都需要附带一些信息。但是许多字段都是重复的，会浪费带宽影响速度。 HTTP/2对头部信息采用HPACK压缩算法来减少报文头的大小。具体做法是把报文头信息中常见的名和值对应一个索引，维护了一张静态字典，index从1到61，比如把：method:GET映射成2，这样就能达到压缩头部的作用。但是对于一些动态的资源，比如，user-agent，需要维护一份可动态添加内容的共同动态字典，这份动态字典在数据传输的过程中逐步建立，index从62开始。然后将映射之后的数据用huffman编码。

服务器推送

游览器向服务器请求一个页面，http1需要等到游览器收到并解析html后，如果发现里面有静态资源，游览器才会再向发送静态资源的请求。但是现在http2允许服务器可以直接将页面和所需的静态资源一并返回。

新的二进制格式（Binary Format），

HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。

---

解析html页面的过程

简单过程：

HTML解析构建DOMCSS解析构建CSSOM树根据DOM树和CSSOM树构建render树根据render树进行布局渲染render layer根据计算的布局信息进行绘制详细过程

详细过程：

HTML解析构建DOM树：其中HTML Parser就起到了将HTML标记解析成DOM Tree的作用，HTML Parser将文本的HTML文档，提炼出关键信息，嵌套层级的树形结构，便于计算拓展；这其中也有很多的规则和操作，比如容错机制，识别特殊标签<br></br>等

CSS解析构建CSSOM树：CSS Parser将很多个CSS文件中的样式合并解析出具有树形结构Style Rules，也叫做CSSOM。

※其中还有一个细节是浏览器解析文档：当遇到<script>标签的时候会停止解析文档，立即解析脚本，将脚本中改变DOM和CSS的地方分别解析出来，追加到DOM Tree和CSSOM上]

根据DOM树和CSSOM树构建Render树：Render Tree的构建其实就是DOM Tree和CSSOM Attach的过程，在webkit中，解析样式和创建呈现器的过程称为"附加"，每个DOM节点都有一个"attach"方法，Render Tree其实就相当于一个计算好样式，与HTML对应的Tree

根据Render树进行布局渲染render layer：创建渲染树后，Layout根据根据渲染树中渲染对象的信息，计算好每一个渲染对象的位置和尺寸，将其放在浏览器窗口的正确位置，某些时候会在文档布局完成之后进行DOM修改，重新布局的过程就称为回流

※其中计算（样式计算）一个复杂的过程，因为DOM中的一个元素可以对应样式表中的多个元素，Firefox采用了规则树和样式上下文树来简化样式计算，规则树包含了所有已知规则的匹配路径，样式上下文包含端值，webkit也有样式对象，但它们不保存在类似上下文树这样的结构中，只是由DOM节点指向此类对象的相关样式

根据计算的布局信息进行绘制：绘制阶段则会遍历呈现树，并调用呈现器的paint方法，将呈现器的内容显示在屏幕上，绘制的顺序其实就是元素进入堆栈样式上下文的顺序，例如，块呈现器的堆栈顺序如下：1.背景颜色，2.背景图片，3.边框，4.子代，5.轮廓

---

get请求与post请求的区别

get请求相对post请求更加安全。

post请求并不是安全的，只是相对安全

get请求会把数据放在url上，也就是http协议头。post请求会把数据放在http的包体内。

get请求会产生一个tcp数据包，浏览器会把http header和data一并发送出去，服务器响应200(返回数据)。POST产生两个TCP数据包，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)。

get请求长度最多1024kb，post对请求数据没有限制

ET方法提交的url参数数据大小没有限制，在http协议中没有对url长度进行限制（不仅仅是querystring的长度），这个限制是特定的浏览器及服务器对他的限制

为什么还要用get请求？ 效率高。对应上面第3点

---

request 的组成

request消息包括以下格式：请求行（request line）、请求头部（header）、空行、请求数据

服务端响应response也由四个部分组成，分别是：状态行、消息报头、空行、响应正文

---

TCP和UDP区别有哪些

TCPUDP是否连接面向连接面向非连接传输可靠性可靠不可靠应用场景少量数据传输大量数据速度慢快 TCP是面向连接的；UDP则是无连接的，即发送数据之前不需要建立连接TCP提供的可靠的服务，即TCP连接传送的数据，无差错，不丢失，不重复，且按序到达；而UDP尽最大努力，不保证可靠交付TCP面向字节流，TCP把数据看成一连串无结构的字节流；UDP是面向报文的每一条TCP连接只能是点到点的；UDP支持一对一，一对多，多对一和多对多的交互通信TCP首部开销较大，20字节；UDP只有8字节TCP的逻辑通信信道是全双工的可靠信道；而UDP则是不可靠信道

---

前端性能优化的方案有哪些

前端性能优化七大常用的优化手段：减少请求数量，减小资源大小，优化网络连接，优化资源加载，减少回流重绘，使用更好性能的API和构建优化

减少请求数量

文件合并，并按需分配（公共库合并，其他页面组件按需分配）图片处理：使用雪碧图，将图片转码base64内嵌到HTML中，使用字体图片代替图片减少重定向：尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输使用缓存：即利用浏览器的强缓存和协商缓存不使用CSS @import：CSS的@import会造成额外的请求避免使用空的src和href：a标签设置空的href，会重定向到当前的页面地址，form设置空的method，会提交表单到当前的页面地址

减小资源大小

压缩：静态资源删除无效冗余代码并压缩webp：更小体积开启gzip：HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术

优化网络连接

使用CDN使用DNS预解析：DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度 // 方法是在 head 标签里面写上几个 link 标签 <link rel="dns-prefecth" href="https://www.google.com"> <link rel="dns-prefecth" href="https://www.google-analytics.com"> 并行连接：由于在HTTP1.1协议下，chrome每个域名最大并发数是6个。使用多个域名，可以增加并发数管道化连接：在HTTP2协议中，可以开启管道化连接，即单条连接的多路复用

优化资源加载

减少重绘回流

使用性能更好的API

构建优化：如webpack优化