美文网首页
Web学习笔记3 -- HTTP

Web学习笔记3 -- HTTP

作者: mmmmichelleeeee | 来源:发表于2018-02-02 17:35 被阅读0次

HTTP1.1与HTTP2在web应用中都很常见,但是他们有什么区别和联系一直很困扰我,于是花了一阵子看了一些文章和书记,对这两个版本的协议有所了解,下面做一个总结。

异步并发

HTTP1.1 与 HTTP2请求响应如下:

HTTP1.x与HTTP2请求响应

HTTP1.x的请求响应是顺序执行,即第一个请求结束后才会发送第二个请求,以此类推。如果第一个请求响应时间过长,导致后续请求无法进行,就会造成所谓的队首阻塞,影响web性能。HTTP2引入了异步操作,即请求发送和响应是异步时时的,并不受到请求发送顺序限制,但是在HTTP2中为了让服务器按照需要的顺序处理请求,加入了一个priority优先级的属性,浏览器在发送请求时,自动指定资源的优先级从而让服务器按照处理优先级进行处理请求。

HTTP1.x管道

关于HTTP1.x队首阻塞问题,影响前端性能可以通过管道技术进行优化。通过管道技术,浏览器可以不用等待一个请求发送响应完成再进行下一个请求的发送,而是可以直接发送多个请求,服务器在接受到请求后,遵循FIFO先进先出队列原则进行请求处理并响应。这样降低了对手阻塞造成的请求延迟,如下图:

管道优化HTTP1.x

头部压缩

HTTP1.1在请求资源时,加入了请求头,但通常该请求头包含的都为纯文本内容,一般有500~800字节,如果再携带了cookie则会更多。如果请求头部未定义keepalive属性(保持tcp连接)则每一次请求,都需要请求头进行信息验证,当一个页面请求多达100个时,占有资源和带宽时相当多的。所以连接复用,是HTTP1.x的一个优化点,消除不必要的cookie开销也是一个优化点。连接复用,即tcp复用不但可以减少首部开销,还可以减少由于tcp建立连接时的三次握手时间。对于HTTP2而言,连接一旦建立就是持久化的,所以不需要额外的建立连接消耗。

多路复用和域名区分

HTTP1.x只支持连接建立单一连接,并不能利用多个tcp连接进行多路复用操作,从而提升性能。为了解决该多路复用的问题,域名区分被引入。我们可以在一个主机域名上建立多个子域名,即只建立一个主机的连接,通过该域名下的子域名达到多路复用的效果,提高并行能力。域名区分使用的越多,并行能力就越强,但区分越多,新的域名都有额外的DNS查询开销,耗费时间,所以在实际运用中根据需求合理控制域名的个数。

连接与合并

在HTTP性能优化的一个关键点就是,请求越少越好,那么如何实现这一点,有一个办法,就是对请求资源进行连接合并,即把多个图片合并成一个,把多个css和javascipt文件合并成一个css和javascript。这样可以大大提升页面的性能,但从另外一个层面,当css文件越大,会造成页面首次渲染速度降低(耗时),并且当javascript文件越大,执行响应的时间也会越久,这些都是在做优化时,需要考虑的平衡点。

相关文章

  • Web学习笔记3 -- HTTP

    HTTP1.1与HTTP2在web应用中都很常见,但是他们有什么区别和联系一直很困扰我,于是花了一阵子看了一些文章...

  • HTTP学习笔记

    HTTP学习笔记 1. web与网络基础 1.1使用HTTP协议访问Web 客户端(client, 浏览器brow...

  • Arduino学习笔记3(Web Server控制LED灯)

    Arduino学习笔记3(Web Server控制LED灯)

  • HTTP学习笔记(3)

    这两天一直在帮同事做VBA的编程。主要实现的是自动判断人员考核类型,以及自动匹配考核关系。是目前以来碰到的逻辑最复...

  • HTTP学习笔记#3

    一、HTTP的缺点 1. 通信使用明文(不加密),内容有可能会被窃听 因为按TCP/IP协议族的工作机制,通信内容...

  • Web开发学习笔记——HTTP概述

    接着了解HTTP的一些基本知识。 什么是HTTP 如果说TCP/IP是一套约定计算机如何交流通信的规则的话,HTT...

  • HTTP协议学习笔记(3)

    三次握手与四次挥手 1. 三次握手 还是要祭出那张熟悉的图 第一次握手:首先由客户端主机主动发起建立连接的请求该请...

  • 以太坊开发资料汇总

    0.2中文手册:http://web3.tryblockchain.org/Web3.js-api-refrenc...

  • 《图解HTTP》(下)

    学习笔记。 第7章 确保Web安全的HTTPS 7.1 HTTP的缺点 通信使用明文(不加密),内容可能被窃听 不...

  • Web3.js的decrypt接口报错问题

    decrypt方法英文文档http://web3js.readthedocs.io/en/1.0/web3-eth...

网友评论

      本文标题:Web学习笔记3 -- HTTP

      本文链接:https://www.haomeiwen.com/subject/rzcezxtx.html