前端与 HTML | 青训营笔记——第五课

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

一、初始：什么时HTTP，其基本特点

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

二、协议分析

• 单行协议
• 构建可拓展性
• 准化协议
• 更优异的表现
• 草案

协议分析—报文：

1. Method
2. 状态码
3. RESTful API：一种API设计风格；REST-Representational State Transfer
4. 缓存：强缓存和协商缓存
5. cookie

协议分析—发展

1. HTTP/2概述：更快、更稳定、更简单

   帧、消息、数据流、HTTP/2、流控制、服务器推送

三、场景分析

1. 打开chrome

2. 输入网址

3. 打开控制台

   右键——检查——F12

4. 切换到network

   静态资源

   登陆

1、场景分析—静态资源

缓存策略是怎样的？

• 强缓存
• Cache-control：一年

还有什么信息吗？

• 允许所有域名访问
• 资源类型：css

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

2、场景分析—登录

• 账号密码登陆
• 打开控制台—network—勾选preserve log—过滤quick-login
• 观察请求

3、场景分析—跨域

四、实战

浏览器篇

AJAX之Fetch

• XMLHttpRequet的升级版
• 使用Promise
• 模板化设计，Response，Request，Header对象
• 通过数据流处理对象，支持分块读取

node篇

常用的请求库：axios

• 支持浏览器、nodejs环境
• 丰富的拦截器

用户体验

网络优化

• CDN是否开启H2的性能对比数据参考
• 预解析、预连接

稳定性

• 重试是保证稳定的有效手段，但要防止加剧恶劣情况
• 缓存合理使用，作为最后一道防线

五、了解更多

扩展—通信方式

WebSocket

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

扩展

QUIC