这是我参与「第五届青训营」伴学笔记创作活动的第 5 天，主要对课上的知识点作简单归纳。

一、本堂课重点内容：

HTTP简介
HTTP应用场景
HTTP实战常用工具

二、详细知识点介绍：

HTTP简介

输入网址后的响应过程：

首先browser进程处理输入信息，然后在浏览器内核中通过Internet想服务器发起请求，然后浏览器内核读取服务器的响应，并进行网页渲染，最后在browser进程中页面加载完成

HTTP就和这其中的浏览器内核与服务器通信部分相关

HTTP是什么：

Hyper Text Transfer Protocol 超文本传输协议
应用层协议，基于TCP协议
功能：请求与响应
特点：简单可扩展

发展：

在发展中：

丰富了承载的语义
提高了可扩展性
逐渐标准化

协议分析

安全方法：不会修改服务器数据的方法
幂等方法：执行一次和连续多次的效果一样，服务器状态也一样的方法

状态码：

1开头：1xx：指示信息，表示请求已接收，继续处理
2xx：成功，表示请求已被成功接收、理解、接受
3xx：重定向，要完成请求必须进行更进一步的操作
4xx：客户端错误，请求有语法错误or请求无法实现
5xx：服务器端错误，服务器未能和实现合法的请求

RESTful API 一种API设计风格

每个URI代表一种资源
客户端与服务端之间，传递这种资源的某种表现层
客户端通过HTTP method，对服务器端资源操作，实现表现层状态转化

协议分析-报文

常用请求头

如cookie、origin等

常用响应头

如content-type、cache-control等

缓存

强缓存：根据响应头中的Expires 或者 Cache-Control 两个字段来控制的，都是表示资源的缓存有效时间。
协商缓存：由服务器端确定缓存资源是否可用，是否过期。

cookie

当一个浏览器访问某web服务器时，web服务器会调用HttpServletResponse的addCookie()方法，在响应头中添加一个名叫Set-Cookie的响应字段用于将Cookie返回给浏览器，当浏览器第二次访问该web服务器时会自动的将该cookie回传给服务器，来实现用户状态跟踪。

如自动登录、跟踪用户上次访问站点的时间、显示最近浏览信息等。

HTTP/2

更快更稳定更简单
连接是永久的，具有链接复用性
可主动拒绝发送方的大量数据。有主动性
服务器推送

HTTPS

对称加密
非对称加密
两种加密混用

场景分析

以今日头条官网为例

静态资源

缓存策略：强缓存，cache-control：一年

即是在本地缓存中读取的页面
资源类型是CSS

静态资源部署：

性能优化：

越快看到页面or越快能够进行交互（响应）越好，即静态资源访问速度
缓存：优先从本地读取缓存文件，速度会更快
CDN（一种内容分发网络）：第一次打开没有缓存，则利用CDN保证用户以更快的速度得到请求响应服务
文件名hash：保持缓存内容的更新

跨域请求：

复杂请求时会先有一个预请求，获知服务端是否允许该跨域请求，若允许，则正式进入跨域请求流程。

代理服务器：

可绕开浏览器的同源（安全）策略，直接解决跨域问题
如webpack 的插件有代理服务器功能，实现多人联调，访问线上资源等

鉴权方案：

session+cookie

登录成功时，本地会存储session，在cookie中会携带本地的session，通过一些解析，就能生成之前的登录信息，就无需再次登录

还有一种：JSON web token

具有token唯一性

登录信息共享：

SSO单点登录
子网站会请求SSO站点查询登录态，即登录信息实际是存储到SSO站点的，每次进入子网站时通过请求SSO站点进行一些解析，重定向操作，种下cookie，就可以省了多次登录的麻烦

浏览器工具

AJAX的XHR

浏览器的一个内置对象，用于发起请求

AJAX的Fetch

XHR升级版，解决回调地域问题，处理大数据时表现好

其他工具

Node

HTTP/HTTPS默认模块，功能有限

axios常用请求库

丰富API，浏览器，node.js环境均支持

网络优化

使用HTTP2
CDN动态加速
DNS预解析
网络预连接
域名
压缩
https性能优化

稳定性

重试机制解决超时与错误
缓存
数据安全

扩展

websocket ：

全双工
实时性要求高

QUIC：

用UDP，无连接，发送数据快
HTTP3草案一部分
目前应用不多

三、实践练习例子：

今日的内容没有适合实践的例子，所以复习一下前面的课堂实验

简易轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link href="css/1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="my-slider" class="slider-list">
    <ul>
        <li class="slider-list_item_selected">
            <img src="https://img.zcool.cn/community/0187b161124a3111013eaf70066bd6.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100" alt=""/>
        </li>
        <li class="slider-list_item">
            <img src="https://p1.itc.cn/images01/20210503/7d60ce97b8174f84acd18dfdbf2509ce.jpeg" alt=""/>
        </li>
        <li class="slider-list_item">
            <img src="https://img.zcool.cn/community/01b65261124a3111013f47202f77d9.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100" alt=""/>
        </li>
        <li class="slider-list_item">
            <img src="https://puui.qpic.cn/qqvideo_ori/0/h3257gp43x7_1280_720/0?max_age=7776000" alt=""/>
        </li>
    </ul>
</div>
<script src="scripts/1.js"></script>
</body>
</html>

#my-slider{
    position: relative;
    width: 800px;
}

.slider-list ul{
    list-style-type: none;
    position: relative;
    padding: 0;
    margin: 0;
}

.slider-list_item,
.slider-list_item_selected{
    position: absolute;
    transition: opacity 1s;
    opacity: 0;
    text-align: center;
}

.slider-list_item_selected{
    transition: opacity 1s;
    opacity: 1;
}

class Slider{
    constructor(id,cycle){
        this.container = document.getElementById(id);
        this.items = this.container
            .querySelectorAll('.slider-list_item, .slider-list_item_selected');
        this.cycle=cycle;

    }
    getSelectedItem(){
        return this.container.querySelector('.slider-list_item_selected');
    }
    getSelectedItemIndex(){
        return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    slideTo(idx){
        let selector = this.getSelectedItem();
        if (selector){
            selector.className = 'slider-list_item';
        }
        let item = this.items[idx];
        if(item){
            item.className = 'slider-list_item_selected';
        }
    }
    slideNext(){
        let currentIdx = this.getSelectedItemIndex();
        let nextIdx = (currentIdx + 1) % this.items.length;
        this.slideTo(nextIdx);
    }
    start(){
        this.stop();
        this._timer = setInterval(()=> this.slideNext(),this.cycle );
    }
    stop(){
        clearInterval(this._timer);
    }
}

const slider = new Slider('my-slider',3000);
slider.start();

实现效果

2023-01-20 21-38-51 00_00_00-00_00_30.gif

是根据老师最初指定图片跳转的版本改进的，没有控件，仅实现了自动轮播的效果。

四、课后个人总结：

今天有较多的介绍性内容，需要自己课下去慢慢了解，HTTP部分内容可能需要结合计算机网络的一部分知识才能更好的理解，其中的许多如协议、报文、请求、响应等都是计算机网络的相关知识。随着学习的逐渐深入，需要慢慢联系其他的知识去消化新的知识，所以，要一边坚持学习，一边复习旧知识，才能逐渐提高自己。

文章如有错误请指出，十分感谢。

五、引用参考：

blog.csdn.net/qq_40925189…

青训营-轮播图-1 - 码上掘金 (juejin.cn)

[ HTTP 使用指南 | 青训营笔记]