这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天。
在对HTTP协议的定义及使用场景解析有一定的了解后，我们在此基础上继续学习在不同的环境中，在日常的开发中，我们要如何实现去发起一个协议，了解浏览器环境的应用实战，进一步基于不同环境下，做到网络优化，提升用户体验。
本节课重点“HTTP协议实战-浏览器”，“HTTP协议实战-Node篇”，“网络优化手段”，“HTTP协议拓展-通信方式”。
实战-浏览器篇
AJAX之XHR
- XHR: XMLHttpRequest
- readyState
0 UNSENT 代理被创建，但尚未调用open()方法。
1 OPENEDopen()方法已经被调用。
2 HEADERS_ RECEIVED send()方法已经被调用，并且头部和状态已经可获得。
3 LOADING 下载中; responseText属性已经包含部分数据。
4 DONE 下载操作已完成。
AJAX之Fetch
- XMLHttpRequet的升级版
- 使用Promise
- 模块化设计，Response,Request，Header对象
- 通过数据流处理对象，支持分块读取
实战-node篇
标准库：HTTP/HTTPS
- 默认模块，无需安装其他依赖
- 功能有限/不是十分友好
常用的请求库 axios
- 支持浏览器、nodejs环境
- 丰富的拦截器
实战-用户体验
网络优化
- CDN是否开启H2的性能对比数据参考
| Testing | Site Location | H2 | Http 1.1 |
|---|---|---|---|
| GTMetrix | Dallas | 0.9s | 1.5s |
| Pingdom tools** | Dallas | 1.6s | 1.65s |
| GTMetrix | London | 1.9s | 2.2s |
- 预解析、预连接
稳定性
- 重试是保证稳定的有效手段，但要防止加剧恶劣情况
- 缓存合理使用，作为最后一道防线
扩展-通信方式
WebSocket
- 浏览器与服务器进行全双工通讯的网络技术
- 典型场景:实时性要求高，例如聊天室
- URL使用ws://或wss://等开头
QUIC：Quick UDP Internet Connection
- o-RTT建联(首次建联除外),
- 类似TCP的可靠传输。
- 类似TLS的加密传输，支持完美前向安全。
- 用户空间的拥塞控制，最新的BBR算法。
- 支持h2的基于流的多路复用，但没有TCP的HOL问题。
- 前向纠错FEC。
- 类似MPTCP的Connection migration。
