前端与 HTML | 青训营笔记

用户7905203499293
35 阅读3分钟

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

一、本堂课重点内容：

  • HTTP 协议简介
  • HTTP 协议的基本结构与发展历程
  • 常见场景中的 HTTP 协议应用
  • 在不同的环境中发起 HTTP 请求
  • 知识扩展，了解更多网络通信协议

二、详细知识点介绍：

  • 什么是HTTP

    1. Hyper Text Transfer Protocol超文本传输协议
    2. 应用层协议，基于传输层TCP协议
    3. 包含请求和响应
    4. 请求是简单可扩展的
    5. HTTP协议是无状态相互独立的

  • 常见的请求方法

    image.png 方法的特点： image.png

  • 状态码 image.png

  • RESTful API image.png

  • 常用请求头 image.png

  • 常用响应头 image.png

  • 缓存 image.png image.png

  • Cookie image.png

  • HTTP/2

    • 相比于HTTP/1.x，HTTP/2更快、更稳定、更简单
    • 帧 (frame):HTTP/2 通信的最小单位每个帧都包含帧头，至少也会标识出当前帧所属的数据流，在传输过程中以二进制的形式进行传输，使得速度变得更快 image.png
    • 消息:与逻辑请求或响应消息对应的完整的一系列帧。
    • 数据流:已建立的连接内的双向字节流可以承载一条或多条消息
    • 帧可以交错发送，接收方重新组织 image.png
    • HTTP/2连接都是永久的，而且仅需要每个来源一个连接
    • 流控制:阻止发送方向接收方发送大量数据的机制
    • 服务器推送 image.png

  • HTTPS

    HTTPS采用对称加密和非对称加密混用的方式。 image.png

  • 部署静态资源方案

    缓存 + CDN + 文件名hash

    CDN：Content DeliveryNetwork。通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

  • 默认端口号

    http协议默认端口号是80；

    https协议默认端口号是443；

  • 跨域解决方案

    • CORS：首先发出一个预请求(OPTIONS),同时携带相关协议头信息发送给Server，Server若回复能发起跨域的请求，则浏览器会发起真实的请求 image.png
    • 代理服务器：同源策略是浏览器的安全策略，不是HTTP的，代理服务器和当前地址是同一域下的，所以浏览器向代理服务器发送请求时不存在跨域问题 image.png

  • 发起HTTP协议

    • 浏览器环境 ：
      1. xhr
      2. fetch
    • node环境：http/https
    • axios(支持浏览器环境、node环境，有丰富的拦截器)

  • 网络优化 image.png

  • webSocket

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

三、实践练习例子：

头条登录原理，以及跳转后为何仍能保持登录状态的原理。

四、课后个人总结：

了解到HTTP的发展历史，同时知道了目前HTTP/2已成为各大厂使用的一种主流协议。

五、引用参考：

avatar
文章
阅读
粉丝