主讲人
- 李成银
- 360前端技术专家
- 奇舞团
浏览器在网页中的位置
请求过程
HTTP是应用层协议
联网细节交给了通用的传输协议：TCP/UDP
http格式：
头信息，请求头和响应头
response：页面内容
格式简单
请求格式：
<method> <request-URL> <version>
<headers>
<entity-body>
响应格式
<version> <status> <respon-phrase>
<headers>
<entity-body>
请求类型：
| 请求类型 | 描述 |
|---|---|
| GET | 获取一个资源内容 |
| POST | 新增一个资源 |
| PUT | 更新资源内容 |
| DELETE | 删除资源 |
| OPTIONS | 根据返回判断是否有对其请求的权限 |
| HEAD | 只返回 head，不返回实体内容（主要做测试） |
| PATCH | 更新部分内容 |
状态码：
| 状态码 | 描述 |
|---|---|
| 1xx | 请求已接受，需要继续处理 |
| 2xx | 请求已经正确处理 |
| 3xx | 重定向 |
| 4xx | 客户端错误 |
| 5xx | 服务端错误 |
常见：
| 状态码 | 描述 |
|---|---|
| 101 | 切换协议，如：将 HTTP 协议切换为 WebSocket 协议 （聊天室）(将http协议通过101状态码切换成WebSocket 协议) |
| 200 | 成功 |
| 206 | 返回部分内容，如：大文件下载 |
| 301 | 永久重定向，如：资源更换路径或改名 |
| 302 | 临时重定向，如：当前请求需要登录，临时跳转到登录页 |
| 304 | 资源未修改，不返回实体内容，客户端可直接读取本地缓存内容 |
| 400 | 错误请求 |
| 403 | 拒绝执行，如：无对应的访问权限 |
| 404 | 资源找不到，如：服务器已经删除该资源 |
| 413 | 请求实体过大，如：服务端限制了上传的文件大小 |
|---|---|
| 500 | 服务端内部错误，如：数据处理异常导致报错 |
| 502 | 作为网关或代理服务器时，上游服务器异常 |
| 504 | 作为网关或代理服务器时，上游服务器处理超时 |
URL
规则：
<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>
http://<host>:<port>/<path>?<query>#<frag>
ftp://<user>:<password>@<host>:<port>/<path>;<params>
受限字符：%/.#?;:$+@&= 以及非US-ASCⅡ字符集字符先通过encode再传
Header：
通用header:
* Date: Tue, 3 Oct 2019 02:16:00 GMT
* Connection: close
请求:
* User-Agent: Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
* Accept: */*
响应:
* Server: Nginx
* Last-Modified: Thu, 16 Oct 2019 10:15:16 GMT
实体
* Content-Type: text/html; charset=utf-8
* Content-Length: 100
扩展（自定义）
* X-Powered-By: thinkjs-3.0.4
* X-Cache: hit
跟其他区分开（X开头）
Cookie
http无状态，利用cookie设置身份
相应通过Set-Cookie设置
格式：
Set-Cookie: <name>=<value>[; <name>=<value>]
如：expires=<date>domain= path=<some_path>][ secure][ httponly][ samesite=]
响应头里也可以有多个 Set-Cookie(但太大，会影响请求)
cookie安全策略：
path
domain (hostonly*)
expires (max-age)
secure
httponly
SameSite
如果url和规则匹配才携带
XSS 漏洞盗取 Cookie，设置 httponly避免获取
CSRF 漏洞，设置 token/samesite
cookie和session关系：
服务器侧对应为 Session，基于 Cookie 存放用户信息
Cookie 有效期为 Session（随浏览器进程退出而失效）
Content-Type
标识返回内容的类型
标识提交数据的类型
提交
application/x-www-form-urlencoded（key-value）
multipart/form-data（有文件上传）
application/json(json)
text/xml(以前比较多)
可以自定义
性能优化：
keep-alive
减少网络传输大小
缓存
http2/http3
keep-alive：
HTTP 1.0 原本不支持 Keep-Alive，后来扩充了 Connection: Keep-Alive
HTTP 1.1 默认支持 Keep-Alive，除非显式指明 Connection: close
减少传输大小 使用gzip 压缩（也需要时间，并加标记）太小不宜去gzip大于1k文本内容
缓存：
首次请求加载后缓存 通过 304状态码
- 协商缓存
last-Modified 服务端通过他判断时间是否有效，返回响应头值日期
Etag 编码值，为了解决上面不准问题，服务器比较，
请求也不发直接判断是否
- expires 强缓存
Cache-Control 更多规则 解决expire是日期问题:
其他缓存
-
LocalStorage
保存js，css，维护一些版本，提升页面打开速度
-
ServiceWorker
拦截请求，定制规则，控制缓存
HTTP2
二进制传输
多路复用
头部压缩
server push
HTTP3
基于 QUIC 协议（UDP）udp更快
HTTP 抓包工具
Wireshark
Fiddler
Firebug for Firefox
Chrome 开发者工具
IE8+ 自带的开发者工具
HTTP 发包工具
telnet / curl
Fiddler *
Tamper for Firefox
Postman for Chrome *
-
Paw for OSX
推荐书籍：
推荐书籍.PNG
