john-book
  • 测试
    • vue单元测试
  • 介绍
  • 设计模式
    • 单例模式
  • 个人收藏
    • 房价未来趋势
  • TodoList
  • TaskList
  • 前端架构设计
  • 时间管理
    • 2019前端自检与思考
  • 前端技术点
    • 异步编程和同步编程
    • 继承实现的几种方式
    • Http请求
    • 前端CI/CD持续集成持续交付
    • Promise
    • 其他工具
    • iphonex以及适配
    • 前端骨架屏方案
    • nginx
      • nginx配置upstream负载均衡
      • nginx配置gzip压缩
      • nginx转发配置
    • ajax
    • Dom&BOM
    • flexible
    • jsonp
    • 跨域
    • nunjucks
    • 水平垂直居中
    • 原型和原型链
    • 本地存储方式
    • 无头浏览器
    • chrome插件开发
    • webpack
      • DllPlugin
      • webpack升级
    • 宏任务微任务
    • 页面加载流程
    • http请求流程
    • 图形绘制技术
    • 节流和防抖
    • webpack单页面改多页面
    • redis安装使用
    • git
      • gitignore的使用
  • 算法
  • 前端资料
    • 开源技术库
    • 资料&文档
      • 信息流页面闪开总结
    • 每日收藏
  • 工具
    • UML图
    • Markdown
    • 测试工具
    • 产品工具
  • 站点博客
    • 站点集锦
  • 框架&库
    • React
    • Vue
    • vue3.0
  • 性能优化
    • 性能优化原则和方法
    • Http协议
      • Http Request Header
      • Http Response Header
  • LowCode
    • landingpage
    • landingpage自动化部署
    • landingpage相关
  • 加密
  • 腾讯云服务器
  • 微信公众号开发
  • 微信小程序
    • 小程序埋点统计
    • app分享小程序绑定
  • 数据库
    • 数据库实时抽取
  • 效率
    • 快速生成层级结构图
    • vscode插件vue模版
    • vscode文件头部注释插件
    • 快速生成项目目录结构树
    • vscode格式化配置
    • 前端组件化
  • 前端工作
  • 可视化
    • 页面可视化搭建
  • 前端规范
    • Javascript规范
    • git提交规范
    • eslint三大通用规范
Powered by GitBook
On this page
  • http协议历史:
  • http协议优化:
  • HTTP1.0和HTTP1.1的区别
  • HTTPS和HTTP的一些区别
  • SPDY: HTTP1.X的优化
  • HTTP2.0
  • HTTP2.0和SPDY的区别:
  • HTTP2.0和HTTP1.x的新特性:
  • 强缓存(本地缓存)和协商缓存

Was this helpful?

  1. 性能优化

Http协议

Previous性能优化原则和方法NextHttp Request Header

Last updated 6 years ago

Was this helpful?

http协议历史:

  • 早期:为了将超文本标记语言(HTML)文档从web服务器输出到客户端;

  • web2.0: 前端复杂化,HTML页面有了CSS,JAVASCRIPT丰富前端功能,又加入ajax与服务器进行资源交互;

  • 移动互联网:这个时代网络情况更加复杂,需要对HTTP做更多的优化处理;

http协议优化:

影响一个HTTP网络请求的因素有两个:带宽,延迟

  • 带宽:主要受限于基础网络及客户段网络情况;

  • 延迟:

  • 浏览器阻塞:浏览器同源请求最大链接数限制(不同浏览器内核最大链接数不同),超过最大数请求被阻塞;

  • DNS解析:域名解析成对应IP叫DNS解析,知道IP才能请求服务,可以通过DNS缓存减少解析时间;

  • 建立连接:HTTP基于TCP协议,TCP协议需要三次握手,一次完整的HTTP请求需要三次握手才真正建立连接,但是这就导致了多个情况必须每次都三次握手,这些连接无法复用,大量请求的情况下,延迟较大的情况下影响非常明显,能否服用连接可以是一个重要的优化点;

以上:延迟是影响HTTP请求的主要因素,也是HTTP发展可以优化的主要点。

HTTP1.0和HTTP1.1的区别

  • 缓存处理

   **1.0**: header: If-Modified-Since, Expires

   **1.1**: header: Etag(Entity tag),If-Unmodified-Since, If-Match, If-None-Match
  • 带宽优化及网络连接使用

   **1.0**: 不支持断点续传,获取响应的全部内容,http200状态码;

   **1.1**: header引入头域range,只请求需求的部分,支持断点续传,请求状态码206;可以通过curl命令确认是否支持206
  • 长连接

   **1.1**: 开始支持长连接(PersistentConnection)和流水线处理(pipelining),在一个TCP连接上可以传送多个HTTP请求和响应,
   减少建立和关闭连接的消耗和延迟;1.1默认开启keep-alive长连接。HTTP的Keep-alive是要让一个TCP连接活久点,默认30s,最小15s,可设置。
  • Host头处理

   **1.0**: 认定每台服务器绑定唯一的IP,url请求没有传递hostname;
   **1.1**: 虚拟主机技术发展,一台服务器可以有多个虚拟主机(Multi-homed Web Servers)共享一个IP地址,
   HTTP1.1请求消息和响应消息都支持host头域,请求没有host头域会报400错误
  • 错误通知的管理

   **1.1**:在HTTP1.1中新增了24个错误状态响应码,如409(Conflict)表示请求的资源与资源的当前状态发生冲突;
   410(Gone)表示服务器上的某个资源被永久性的删除

HTTPS和HTTP的一些区别

HTTPS需要到CA申请证书;

HTTPS建立在SSL/TLS之上,SSL/TLS运行在TCP之上;内容经过加密;

HTTP默认端口80,HTTPS默认端口443;

有效防止运营商数据劫持;

SPDY: HTTP1.X的优化

描述:google2012年提出的基于TCP的应用层协议:优化http1.x请求延迟,解决http1.x的安全性问题

  • 降低延迟

多路复用(multiplexing),多个stream请求复用一个tcp连接,解决了HOL blocking的问题,
注:排头阻塞(Head-of-line blocking, HOL):请求排队串行化单线程处理,一旦有某请求超时等,后续请求只能被阻塞
  • 请求优先级

SPDY允许给每个request设置优先级,重要请求可以优先得到响应,比如html
  • header压缩

header很多是多余的,合适的压缩算法可以减小包的大小和数量
  • 基于https加密协议传输

  • 服务器推送

例如请求html的时候,服务器会把style.css,style.js推送过来,再次请求style.js的时候会从缓存直接读取,不再次发送请求

HTTP2.0

可以看成是基于spdy的升级版

HTTP2.0和SPDY的区别:

  1. HTTP2.0支持明文http请求,spdy是强制https请求

HTTP2.0和HTTP1.x的新特性:

  • 新的二进制格式:http1.x的解析基于文本,http2.0的解析基于二进制,实现方便且健壮

  • 多路复用:连接共享,每个request对应一个id,一个连接可以有多个request,不同request可以混杂一起,接收方根据request的id不同再归属到不同的服务端请求中

  • 请求头压缩:通讯双方各自cache一份header fields表,避免重复的header传输,又减少传输header的大小

  • 服务器推送:同SPDY

强缓存(本地缓存)和协商缓存

HTTP2.0 消息头的压缩算法采用HPACK(),而非 SPDY 采用的DEFLATE:()

http://http2.github.io/http2-spec/compression.html
http://zh.wikipedia.org/wiki/DEFLATE