前端与HTML青训营笔记

55 阅读2分钟

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

HTTPS概述

  • HTTPS:Hypertext Transfer Protocol Secure
  • 经过TSL/SSL加密
  • 对称加密: 加密和解密都是使用同一个密钥
  • 非对称加密:加密和解密需要使用两个不同的密钥:公钥和私钥

场景分析-静态资源

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

  • CDN:Content Delivery Network
  • 通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务

场景分析-登录

  • 业务场景
    1. 表单登录
    2. 扫码登录
  • 技术方式
    1. SSO

  • 账号密码登录
  • 打开控制台-network-勾选preserve log - 过滤quick_login
  • 观察请求

跨域解决方案

  • CORS
  • 代理服务器
    1. 同源策略是浏览器的安全策略,不是HTTP的
  • Iframe
    1. 诸多不便

  1. 向什么地址做了什么动作
  • 使用POST方法
  • 目标域名
  • 目标path
  1. 携带了什么信息,返回了哪些信息
  • 携带信息
    1. Post body,数据格式为form
    2. 希望获取的数据格式为json
  • 返回信息
    1. 数据格式json
    2. 种cookie的信息

鉴权

504D0D078297A30F7E37E4F0983639E9.png

  • SSO:单点登录

用户体验

网络优化

11678F2B07E8AC5BCD00F32F1E71BA49.png

稳定性

53B0A8143E2CE3F8CEE6DC71981F37B3.png

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

扩展-通信方式

WedSocket

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

QUIC:Quick UDP Internet Connection

  • 0-RTT建联(首次建联除外)
  • 类似TCP的可靠传输
  • 类似TLS的加密传输,支持完美前向安全
  • 用户空间的拥塞控制,最新的BBR算法
  • 支持h2的基于流的多路复用,但没有TCP的HOL问题
  • 前向纠错FEC
  • 类似MPTCP的Connection migration