HTTP实用指南 | 青训营笔记

iam阿缪
91 阅读11分钟

这是我参与第四届青训营笔记创作活动的的第9天

初识HTTP

从输入URL到页面呈现发生了什么

首先在浏览器中输入URL->查找缓存->DNS域名解析->建立TCP连接->发起HTTP请求->服务器响应请求并返回结果->关闭TCP连接->浏览器渲染.

image.png

网络请求——> 网络响应——>构建DOM树——>样式计算——>生成布局树——>建图层树——>生成绘制列表——>生成图块和生成位图——>显示器显示内容

什么是HTTP

HTTP是Hyper Text Transfer Protocol的缩写，该协议是用于从万维网服务器传输超文本到本地浏览器的传送协议，且它是基于TCP/IP通信协议来传递数据，HTTP是一种超文本传输协议。

特点：

  • Hyper Text Transfer Protocol超文本传输协议
  • 应用层协议，基于TCP协议
  • 请求 响应
  • 简单可扩展
  • 无状态

HTTP协议能承载很多类型的文本：HTML CSS JS Web APIs

HTTP是应用层的协议，基于传输层的TCP协议，TCP是一个可靠的协议

image.png

HTTP在设计的时候它是一个Client-Server这样的协议，它是有请求和响应的。

image.png

协议分析

发展过程

  • 1991年，Tim Berners-Lee设计出一个简单的单行超文本交换协议，也就是后人所熟知的HTTP/0.9，这就是最原始的HTTP协议

  • 随着互联网迎来爆炸式的发展，原始的HTTP协议具有很多的问题，许多 HTTP 改进都是自发出现，具有讽刺意味的是，去中心化的 Web 需要一个中心化的管理机构来避免碎片化造成的不兼容问题。Tim Berners-Lee也意识到了危险，1994 年成立万维网联盟，作为为已有环境带来更多规范的第一步。时间已经是到了1996年5月，他们记录了当时 HTTP 中最常用的一些功能，并将其命名为 HTTP/1.0 协议

  • 1997年1月修复了 HTTP/1.0 的不一致之处，并调整了协议，使其在新的 Web 生态系统中具备更好的性能表现，这就是HTTP/1.1 ，新版引入的两个最关键的更改是默认使用持久 TCP 连接（保持活动状态）和 HTTP 管线化。并且在很长的一段时间里，HTTP/1.1 表现得都非常好

  • 谷歌在 2008 年发布了 Chrome 浏览器，这种浏览器因其快速和创新而迅速流行。它使谷歌在互联网技术问题上获得了强大的话语权。在 2010 年代初期，谷歌在 Chrome 中增加了对其 Web 协议 SPDY 的支持。随之事件的推移，在2015年5月，新版本的HTTP协议作为互联网标准正式发布--HTTP/2 ，HTTP/2 标准基于 SPDY，并进行了一些改进，它的发布解决了 Web 上的许多问题，比如多路复用、服务器推送、头部压缩等等

  • 最后就是HTTP/3, HTTP/3也是目前最前沿的互联网标准，虽然目前主体环境还没有全面迭代到 HTTP/3 ，但是 HTTP/3 的发展也必定是不可阻拦的

image.png

报文

对于TCP而言，在传输的时候分为两个部分：TCP头和数据部分,而HTTP类似，也是header+body。

image.png

Method

image.png

> - Safe（安全的）:不会修改服务器的数据的方法：`GET HEAD OPTIONS`\ > - Idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是`一样`的，服务器的状态也是一样的所有safe的方法都是Idemponent的：`GET HEAD OPTIONS PUT DELETE`

状态码

image.png

常见的状态码

  • 200 OK —客户端请求成功

  • 301 永久重定向

  • 302 临时重定向

  • 401 请求未经授权

  • 404 请求资源不存在，可能是输入了错误的URL

  • 500 服务器内部发生了不可预期的错误

  • 504 Gateway Timeut-网关或者代理的服务器无法在规定的时间内获得想要的响应。

其他状态码

  • 100 Continue 继续。客户端应继续其请求

  • 101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到 HTTP 的新版本协议

  • 200 OK 请求成功。一般用于 GET 与 POST 请求

  • 201 Created 已创建。成功请求并创建了新的资源

  • 202 Accepted 已接受。已经接受请求，但未处理完成

  • 203 Non-Authoritative Information 非授权信息。请求成功。但返回的 meta 信息不在原始的服务器，而是一个副本

  • 204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

  • 205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

  • 206 Partial Content 部分内容。服务器成功处理了部分 GET 请求

  • 300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

  • 301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替

  • 302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有 URI

  • 303 See Other 查看其它地址。与 301 类似。使用 GET 和 POST 请求查看

  • 304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

  • 305 Use Proxy 使用代理。所请求的资源必须通过代理访问

  • 306 Unused 已经被废弃的 HTTP 状态码

  • 307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重定向

  • 400 Bad Request 客户端请求的语法错误，服务器无法理解

  • 401 Unauthorized 请求要求用户的身份认证

  • 402 Payment Required 保留，将来使用

  • 403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

  • 404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

  • 405 Method Not Allowed 客户端请求中的方法被禁止

  • 406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求

  • 407 Proxy Authentication Required 请求要求代理的身份认证，与

  • 401 类似，但请求者应当使用代理进行授权

  • 408 Request Time-out 服务器等待客户端发送的请求时间过长，超时

  • 409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务器处理请求时发生了冲突

  • 410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源以前有现在被永久删除了可使用 410 代码，网站设计人员可通过 301 代码指定资源的新位置

  • 411 Length Required 服务器无法处理客户端发送的不带 ContentLength 的请求信息

  • 412 Precondition Failed 客户端请求信息的先决条件错误413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个 Retry-After 的响应信息

  • 414 Request-URI Too Large 请求的 URI 过长（URI 通常为网址），服务器无法处理

  • 415 Unsupported Media Type 服务器无法处理请求附带的媒体格式

  • 416 Requested range not satisfiable 客户端请求的范围无效

  • 417 Expectation Failed 服务器无法满足 Expect 的请求头信息

  • 500 Internal Server Error 服务器内部错误，无法完成请求

  • 501 Not Implemented 服务器不支持请求的功能，无法完成请求

  • 502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

  • 503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的 Retry-After 头信息中

  • 504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

  • 505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本，无法完成处理

RESTful API

  • 早已推广使用
  • 传统API设计：把每个url当做一个功能
  • Restful API设计：把每个url当做一个唯一的资源 RESTful API 是一种API设计风格:
    1. 每一个URI代表一种资源；
    2. 客户端和服务器之间，传递这种资源的某种表现层；
    3. 客户端通过HTTP method，对于服务器端资源进行操作，实现“表现层状态转化”

image.png

常用请求头

image.png

常用响应头

image.png

缓存

image.png

image.png

Cookies

Set-Cookies-response

image.png

HTTP/2概述：

更快、更稳定、更简单 帧（frame）:HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。

image.png

  • 消息：与逻辑请求或响应消息对应的完整的一系列帧。
  • 数据流：已建立的连接内的双向字节流，可以承载一条或多条信息。
  • 交错发送，接收方重组织。

image.png

  • HTTP/2连接都是永久的，而且仅需要每个来源一个连接
  • 流控制：阻止发送方向接收方发送大量数据的机制
  • 服务器推送

image.png

HTTPS概述

HTTPS是经过TSL/SSL加密

  • 对称加密：加密和解密都是使用同一个密钥
  • 非对称加密，加密和解密需要使用两个不同的密钥：公钥（public key）和私钥（private key）

image.png

HTTP与HTTPS的区别

image.png

HTTP

  • 是超文本传输协议
  • 无状态、无连接
  • 明文传输 不安全
  • 端口号80
  • 无证书

 HTTPS

  • 是安全超文本传输协议
  • 基于连接连接
  • 经过TSL/SSL加密 不安全
  • 端口号443
  • 有证书

场景分析

静态资源

image.png

  • cache-control这个指定了过期时间，与强缓存相关。
  • last-modified指定了最后修改时间，与协商缓存相关。
  • access-control-allow-origin允许哪些origin能访问我们，与同源策略有关。
  • content-type指定了实体数据的类型

静态资源方案：缓存+CDN+文件名hash

  • CDN：内容分发网络，通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。

image.png

文件名hash的作用是根据文件内容生成hash值，这样，文件内容变化的时候，请求文件名就不一样，就不会用到缓存，以获取到最新文件内容。

登录

  • HTTP是无状态请求，为什么还能记住用户的登录信息，当登陆后刷新页面还不会丢失？因为会在服务端生成session等信息存储起来 也会存储到本地 自动携带cookie等信息策略就可以实现
  • 也有另一种token的方式
  • 单点登录

实战

浏览器篇

image.png

image.png

node篇

image.png

image.png

用户体验

我们在生产环境中，其实还关心用户的体验，我们希望用户有更优秀的体验效果，那么用户体验去优化它，一方面是大家知道的性能优化，还有一点是在网络上做一些优化，比如用HTTP2，它的传输效率而是更高的，使用CDN，传输获取的数据是更快的等等。我们在生产环境中，其实还关心用户的体验，我们希望用户有更优秀的体验效果，那么用户体验去优化它，一方面是大家知道的性能优化，还有一点是在网络上做一些优化，比如用HTTP2，它的传输效率而是更高的，使用CDN，传输获取的数据是更快的等等。

image.png

image.png

image.png

了解更多

通信方式

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景：实时性高，例如聊天室
  • URL使用ws://或wss://等开头

image.png

QUIC：Quic UDP Internet Connection

虽然基于UDP，但是可以实现类似于TCP的可靠传输及加密传输。QUIC也是HTTP3版本的协议之一，也就是说HTTP3将会是基于UDP的。

image.png

avatar
文章
阅读
粉丝