web和http相关知识点总结

文章目录

Web标准概述
Web标准介绍
- HTTP
- BOM
- DOM
HTTP协议在浏览器网络的位置
Header分类
Cookie
Cookie的安全策略
Session
Content-Type
性能优化
- keep-alive
- 减少网络传输大小
- 缓存
- - 强缓存
  - 协商缓存
  - LocalStorage
  - ServiceWorker
- HTTP2 / HTTP3
- - HTTP2
  - HTTP3
Something else
- HTTP 抓包工具
- HTTP 发包工具
- 推荐书籍

Web标准概述

Web是World Wide Web（万维网）的简称。World Wide Web由Tim Berners-Lee在1989年发明

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

Web标准介绍

HTTP

HTTP/0.9：https://www.w3.org/Protocols/HTTP/AsImplemented.html
HTTP/1.0：https://tools.ietf.org/html/rfc194
HTTP/1.1：
https://tools.ietf.org/html/rfc2068
https://tools.ietf.org/html/rfc2616
https://tools.ietf.org/html/rfc7230…https://tools.ietf.org/html/rfc7235
The Transport Layer Security (TLS) Protocol Version 1.3
https://tools.ietf.org/html/rfc8446
HTTP/2：https://tools.ietf.org/html/rfc7540

HTTP/2新增：
http2.0是基于1999年发布的http1.0之后的首次更新

更新内容：
· 提升访问速度
相比于http1.0请求资源所需时间更少，访问速度更快

· 允许多路复用
允许通过单一的HTPP2.0连接发送多重请求-响应信息

· 二进制分帧
http2.0会将所有的传输信息分割成更小的信息或者帧，并对他们进行二进制编码

· 首部压缩

· 服务器端推送

BOM

BOM（Browser Object Model，浏览器对象模型）HTML5规范中有一部分涵盖了BOM的主要内容，因为W3C希望将JavaScript在浏览器中最基础的部分标准化。
window对象：
window是BOM 的核心对象，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。网页中所有全局对象、变量和函数都暴露在这个对象上。

location对象：
location 对象提供了当前窗口中加载的文档有关的信息，还提供了一些导航功能。 location既是 window 对象的属性，也是 document 对象的属性。通过location对象可以以编程方式操纵浏览器的导航系统。

navigator对象：
对象提供关于浏览器的信息，通常用于检测显示网页的浏览器类型。

screen对象：
保存着客户端显示器的信息。

history对象：
history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起，提供了操纵浏览器历史记录的能力。
使用go（）方法可以在用户的历史记录中任意跳转，可以向后也可以向前。

DOM

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。DOM现在是真正跨平台、语言无关的表示和操作网页的方式。

DOM0：不是W3C规范。
DOM1：开始是W3C规范。专注于HTML文档和XML文档。
DOM2：对DOM1增加了样式表对象模型(DOM2)
DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。

DOM2和DOM3是按照模块化的思路来制定标准的，每个模块之间有一定关联，但分别针对某个DOM子集。
DOM Core：在DOM1核心部分的基础上，为节点增加方法和属性。
DOM Views：定义基于样式信息的不同视图。
DOM Events：定义通过事件实现DOM文档交互。
DOM Style：定义以编程方式访问和修改CSS样式的接口。
DOM Traversal and Range：新增遍历DOM文档及选择文档内容的接口。
DOM HTML：在DOM1 HTML部分的基础上，增加属性、方法和新接口。
DOM Mutation Observers：定义基于DOM变化触发回调的接口。这个模块是DOM4级模块，用于取代Mutation Events

HTTP协议在浏览器网络的位置

HTTP1.0，HTTP2.0，HTTP3.0

HTTP是应用层协议
服务端与客户端之间请求与响应
HTTP传输的细节交给了底层的传输协议，如：TCP/UDP

HTTP请求/响应报文:

// An highlighted block
<methods><request-URL><veision>
<headers><entity-body><version><status><respon-phrase>
<headers><entity-body>

HTTP请求类型:
GET POST PUT DELECT OPTIONS HEAD PATCH

HTTP常用状态码：
101：切换协议，如：将HTTP协议转换为socket协议
200：成功
206：返回部分内容
301：永久重定向
302：临时重定向
304：资源未修改，不返回实体内容，客户端从缓存中取
400：错误请求
403：拒绝执行
404：资源找不到
413：请求实体过大，如：服务器限制了上传的文件大小
500：服务器内部错误
502：作为网关或代理服务器时，上有服务器异常
503：作为网关或代理服务器时，上有服务器处理超时

Header分类

1）通用
Date
Connection:close
2）请求
User-Agent
Accept
3)响应
Server:Nginx
Last-Modified
4)实体
Content-Type:text/html；charset=utf-8
Content-Length:100
5)扩展（自定义）
X-powered-By
X-Cache:hit

Cookie

客户端
GET/HTTP/1.1
Cookie

服务端也可以设置cookie
HTTP/1.1 200 OK
Set-Cookie
当有一个请求时，可以通过判断服务端设置的cookie值判断是否一样

响应头里面可以有多个Set-Cookie
（cookie值如果过大，就会产生一些问题）

Cookie的安全策略

与以下因素相关
path
domain（hostonly*)
expires(max-age)
secure
httponly
samesite

XSS漏洞盗取cookie，设置httponly，可以避免cookie被获取
CSRF漏洞，设置token/samesite

Session

服务器端对应为Session，基于cookie存放用户信息（cookie特定的值作为key)
cookie的有效期为session，cookie的时间不是一个具体的时间，而是随浏览器的进程退出而消失

Content-Type

Content-Type: text/html;

一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件。

作为请求首部字段时，通常出现在PUT请求中，GET 请求一般是没有的。

常见类型举例

application/x-www-form-urlencoded：提交的数据按照 key1=val1&key2=val2 方式进行编码，同时进行了 URL 转码

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

multipart/form-data ：一般用于表单文件上传，包含复杂的二进制数据
application/json：使用 JSON.parse() 解析数据即可

POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8{"title":"test","sub":[1,2,3]}

text/xml：逐渐被 JSON 取代，仍有使用场景，如微信公众号

POST http://www.example.com HTTP/1.1
Content-Type: text/xml<?xml version="1.0"?>
<methodCall><methodName>examples.getStateName</methodName><params><param><value><i4>41</i4></value></param></params>
</methodCall>

使用建议

可以根据场景自定义数据格式，服务端进行对应的数据解析。比如前端进行大文件传输，可以使用gzip进行压缩，服务端进行对应的解压缩操作。

性能优化

keep-alive

HTTP 1.0 原本不支持 Keep-Alive，后来扩充了 Connection: Keep-Alive
HTTP 1.1 默认支持 Keep-Alive，除非显式指明 Connection: close

减少网络传输大小

通过编码的方式压缩内容，减少传输大小

// Response Headers
content-encoding: gzip// Request Headers
accept-encoding: gzip, deflate, br

主要是针对文本资源，大约可减少60%；
文件过小不宜压缩（< 1k），图片或音频等本身就是压缩格式的文件也不宜压缩。

缓存

Status 304

服务器端资源未改变，可以直接使用客户端未过期的缓存。

根据是否需要向服务器发送请求，可以分为强缓存（不需要发送）和协商缓存（需要发送）。

强缓存

Expires

Expires即过期时间，存在于服务端返回的响应头中，告知浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求。

Cache-Control

采用过期时长来控制缓存，而非过期时间：

协商缓存

强缓存失效之后，浏览器向服务器发请求，由服务器来决定缓存是否可用，这就是协商缓存。

Last-Modified

浏览器接收响应报文中的Last-Modified字段作为最后修改时间。
浏览器再次请求时，会在请求头中携带If-Modified-Since字段，表示服务器传来的最后修改时间。
服务器拿到请求头中的If-Modified-Since的字段后，判断缓存是否可用。

ETag

服务器根据当前文件的内容，给文件生成的唯一标识。

浏览器接收响应报文中的ETag字段作为文件的唯一标识。
浏览器在下次请求时，将这个值作为If-None-Match字段的内容，发送请求报文。
服务器接收到If-None-Match后，与服务器上该资源的ETag进行比对。

LocalStorage

最初设计目的并不是为了用于缓存。可以存储CSS、JS等文件，通过JS进行读写控制，提高缓存利用率和响应速度，减少不必要的网络传输。

ServiceWorker

Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。

本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理,旨在（除其他之外）创建有效的离线体验。

HTTP2 / HTTP3

HTTP2

二进制传输

HTTP1使用文本传输，HTTP2使用二进制传输，便于进行压缩。

多路复用

针对“队头阻塞”问题，使用数据流的方式复用TCP连接。在同一个连接里，客户端和服务器可以同时发送多个请求或回应，而不用严格按照顺序。

头部压缩

HTTP1是无状态的协议，每次请求都必须附上所有信息，很多字段都是重复的。HTTP2 引入头信息压缩机制，头信息使用gzip或compress压缩后再发送；客户端和服务器同时维护一张头信息表，只发送索引号即可。

server push

允许服务器未经请求，主动向客户端发送资源，成称为服务器推送。

HTTP3

基于 QUIC 协议（UDP）

Google 开发了基于UDP的QUIC协议，在协议层提升页面访问速度，可以实现多路复用、有序交付、超时重传等功能。

Something else

HTTP 抓包工具

Wireshark
Fiddler
Firebug for Firefox
Chrome 开发者工具
IE8+ 自带的开发者工具

HTTP 发包工具

telnet / curl
Fiddler *
Tamper for Firefox
Postman for Chrome *
Paw for OSX