更新于 

计算机网络

HTTP3

介绍

基于udp并封装了一层quic协议进行实现

优点

彻底解决tcp阻塞

参考文章

https://zhuanlan.zhihu.com/p/143464334?from=from_parent_mindnote
https://zhuanlan.zhihu.com/p/143464334?from=from_parent_mindnote

HTTP2

优点

  • 多路复用
  • 使用二进制传输
  • 头部压缩
  • server push

缺点

  • 依然存在TCP阻塞，部分情况下可能回避HTTP1.1还慢

✍️基于HTTPS协议，但是加密是可选的

HTTP

状态码

  • 1xx 信息
    • 101 切换协议
  • 2xx 请求成功
    • 200 成功
    • 204 预见请求
    • 206 范围请求，如果Range和if-range 将返回206
  • 3xx 重定向
    • 301 永久重定向
    • 302 临时重定向
    • 304 存在协商缓存
  • 4xx 客户端错误
    • 400 客户端错误
    • 401 认证失败
    • 403 服务端接受到了请求，但是拒绝访问
    • 404 文件不存在
    • 405 请求方式错误
    • 415 未知的媒体类型
  • 5xx 服务端错误
    • 500 服务器异常
    • 502 网关错误
    • 503 服务器繁忙中
    • 504 服务器废了

请求方式

  • GET 传输数据
  • POST 向服务端发送数据
  • OPTIONS 检查服务器是否支持给请求，（握手）
  • PUT 发送文件
  • HEAD
  • DELETE
  • TRACE
  • CONNECT

TCP 队头阻塞

  • TCP 在传输的过程中，会通过滑动窗口的形式进行拥塞控制
原因

在传输的过程中，报文可能会因为网络原因导致传输失败，可能后面的已经接收到了，而前面的发生了丢失，这时候就会把断掉的报文后面的包丢失掉，然后重新传

解决方案
  • 慢开始
  • 阻塞避免
  • 快重传
  • 快恢复

HTTPS

在HTTP的基础上，增加了TLS/SSL协议进行加密传输、身份认证网络协议，通过数字证书、加密算法（RSA）、非对称加密进行传输

对称加密

客户端和服务端都采用一样的密钥，比如DES、AES

非对称加密

客户端和服务端都采用不用的密钥，一把作为私钥，一把作为公钥，公钥加密的信息只能被私钥加密，反之，私钥加密的信息，只能被公钥解密

安全

参考文章

https://www.cnblogs.com/lulianqi/p/10558719.html?from=from_parent_mindnote#:~:text=%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%BB%8D%E5%8F%AF%E8%83%BD%E7%9C%8B%E8%BF%99%E9%87%8C%EF%BC%88%20https%253A%252F%252Fzh.wikipedia.org%252Fwiki%252F%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%20%EF%BC%89%E3%80%82%20%E5%A4%A7%E8%87%B4%E6%98%AF%E8%AF%B4%E4%B8%80%E7%A7%8D%E5%9C%A8%E7%BD%91%E7%BB%9C%E4%B8%AD%E5%8A%AB%E6%8C%81%E4%BC%9A%E8%AF%9D%E7%9A%84%E6%94%BB%E5%87%BB%E6%96%B9%E6%A1%88%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%8F%AA%E7%9B%91%E5%90%AC%E6%B5%81%E9%87%8F%E7%A7%B0%E4%B9%8B%E4%B8%BA%E8%A2%AB%E5%8A%A8%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB%EF%BC%88passive%20network,attack%EF%BC%89%EF%BC%8C%E5%A6%82%E4%BD%95%E6%94%BB%E5%87%BB%E8%80%85%E4%B8%BB%E5%8A%A8%E4%BF%AE%E6%94%B9%E6%95%B0%E6%8D%AE%E6%B5%81%E7%A7%B0%E4%B9%8B%E4%B8%BA%E4%B8%BB%E5%8A%A8%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB%EF%BC%88active%20network%20attack%EF%BC%89%E3%80%82%20%E4%B8%8A%E5%9B%BE%E7%AE%80%E5%8D%95%E7%9A%84%E8%A1%A8%E8%BF%B0%E4%BA%86%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E7%9A%84%E4%B8%BB%E8%A6%81%E8%BF%87%E7%A8%8B%EF%BC%88%E4%B8%8A%E9%83%A8%E4%B8%BA%E6%AD%A3%E5%B8%B8https%E6%B5%81%E9%87%8F%EF%BC%8C%E4%B8%8B%E9%83%A8%E4%B8%BA%E8%A2%AB%E5%8A%AB%E6%8C%81%E7%9A%84https%E6%B5%81%E9%87%8F%EF%BC%89%EF%BC%8C%E5%90%8E%E9%9D%A2%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB%A5%E5%AF%B9%E7%9D%80%E8%BF%99%E4%B8%AA%E5%9B%BE%E6%9D%A5%E5%AE%9E%E6%96%BD%E6%88%91%E4%BB%AC%E8%87%AA%E5%B7%B1%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E3%80%82%201%EF%BC%9AFiddler%20%EF%BC%88%E6%B3%A8%E6%84%8F%E8%99%BD%E7%84%B6Fiddler%E6%8A%93%E5%8F%96HTTPS%E6%8A%A5%E6%96%87%E7%9A%84%E5%AE%9E%E9%99%85%E5%8E%9F%E7%90%86%E5%B0%B1%E6%98%AFMITM%EF%BC%8C%E4%B8%8D%E8%BF%87%E8%BF%99%E9%87%8C%E5%BD%93%E7%84%B6%E4%B8%8D%E6%98%AF%E7%94%A8Fiddler%E5%AE%9E%E6%96%BD%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E3%80%82
https://www.cnblogs.com/lulianqi/p/10558719.html?from=from_parent_mindnote#:~:text=%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%BB%8D%E5%8F%AF%E8%83%BD%E7%9C%8B%E8%BF%99%E9%87%8C%EF%BC%88%20https%253A%252F%252Fzh.wikipedia.org%252Fwiki%252F%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%20%EF%BC%89%E3%80%82%20%E5%A4%A7%E8%87%B4%E6%98%AF%E8%AF%B4%E4%B8%80%E7%A7%8D%E5%9C%A8%E7%BD%91%E7%BB%9C%E4%B8%AD%E5%8A%AB%E6%8C%81%E4%BC%9A%E8%AF%9D%E7%9A%84%E6%94%BB%E5%87%BB%E6%96%B9%E6%A1%88%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%8F%AA%E7%9B%91%E5%90%AC%E6%B5%81%E9%87%8F%E7%A7%B0%E4%B9%8B%E4%B8%BA%E8%A2%AB%E5%8A%A8%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB%EF%BC%88passive%20network,attack%EF%BC%89%EF%BC%8C%E5%A6%82%E4%BD%95%E6%94%BB%E5%87%BB%E8%80%85%E4%B8%BB%E5%8A%A8%E4%BF%AE%E6%94%B9%E6%95%B0%E6%8D%AE%E6%B5%81%E7%A7%B0%E4%B9%8B%E4%B8%BA%E4%B8%BB%E5%8A%A8%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB%EF%BC%88active%20network%20attack%EF%BC%89%E3%80%82%20%E4%B8%8A%E5%9B%BE%E7%AE%80%E5%8D%95%E7%9A%84%E8%A1%A8%E8%BF%B0%E4%BA%86%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E7%9A%84%E4%B8%BB%E8%A6%81%E8%BF%87%E7%A8%8B%EF%BC%88%E4%B8%8A%E9%83%A8%E4%B8%BA%E6%AD%A3%E5%B8%B8https%E6%B5%81%E9%87%8F%EF%BC%8C%E4%B8%8B%E9%83%A8%E4%B8%BA%E8%A2%AB%E5%8A%AB%E6%8C%81%E7%9A%84https%E6%B5%81%E9%87%8F%EF%BC%89%EF%BC%8C%E5%90%8E%E9%9D%A2%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB%A5%E5%AF%B9%E7%9D%80%E8%BF%99%E4%B8%AA%E5%9B%BE%E6%9D%A5%E5%AE%9E%E6%96%BD%E6%88%91%E4%BB%AC%E8%87%AA%E5%B7%B1%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E3%80%82%201%EF%BC%9AFiddler%20%EF%BC%88%E6%B3%A8%E6%84%8F%E8%99%BD%E7%84%B6Fiddler%E6%8A%93%E5%8F%96HTTPS%E6%8A%A5%E6%96%87%E7%9A%84%E5%AE%9E%E9%99%85%E5%8E%9F%E7%90%86%E5%B0%B1%E6%98%AFMITM%EF%BC%8C%E4%B8%8D%E8%BF%87%E8%BF%99%E9%87%8C%E5%BD%93%E7%84%B6%E4%B8%8D%E6%98%AF%E7%94%A8Fiddler%E5%AE%9E%E6%96%BD%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB%E3%80%82

HTTP和HTTPS握手（浏览器）

渲染过程

  • 输入网址，浏览器交给浏览器进程开始处理你输入的内容
  • 执行beforeUnload实践，卸载当前页面
  • 如果不是网址，则开始跳到默认搜索引擎，执行搜索
  • 如果是网址，判断是否存在缓存，是的话，读取缓存并渲染，否则向服务器发送请求
  • 之后把控制权交给网络进程
  • 网络进程会开始执行DNS解析，获取IP地址，并开始建立连接
  • 请求会发送到对方服务器，然后交给nginx进行处理（如果有负载均衡，会发送到各地对应的服务器进行处理）
  • 建立连接
    • HTTP连接
      • 客户端发送SYN到服务器
      • 服务端接收到SYN，并生成ACK，发送给客户端
      • 客户端接收到服务的SYN和ACK，标志连接建立成功
        [HTTP连接]
        [HTTP连接]
    • HTTPS连接
      • 客户端发送支持的加密协议和版本给服务端
        • Client Hello
      • 服务端找到适合的加密协议
        • Sever Hello
      • 服务端返回证书和公钥
      • 客户端使用根证书验证证书合法性，生成对称密钥，通过证书的公钥加密，发送给服务端
      • 服务端使用私钥解密，获取对称密钥，使用对称密钥加密数据
      • 客户端解密数据，建立SSL连接
  • 连接建立完成后，浏览器开始读取服务器返回的数据
  • 读取HTTP或者HTTPS响应的状态码
    • 是否返回301和302。如果是，浏览器将读取HTTP的Location字段，执行重定向，并执行beforeUnload之后的过程
    • 返回200，开始读取Content-Type字段，判断文件MIMIE类型。并根据MIMIE构建其他请求进行请求渲染
    • 返回404，nginx是否有404页面或者自定义nginx404内容
      • 没有：执行浏览器默认的异常
      • 有：nginx返回相关数据，开始渲染
    • 其他异常
  • 所有数据传输完成，断开连接
    • HTTP
      • 客户端发送FIN=1到服务器
      • 服务器接收到后，发送ACK到客户端，进入等待关闭状态，此时依然可以发送接收数据
      • 服务端发送FIN=1，表示数据已经发送完成
      • 客户端收到内容，断开连接
        [HTTP]
        [HTTP]
    • HTTPS
      • 客户端断开连接，发送close_notify
  • 渲染过程，将交给渲染进程和GPU进程去负责
  • 解析的过程，其实是根据相关语义，通过词法分析和语法分析，开始构建Token，如果不合法，将会在解析过程中抛出异常
  • 解析HTML，构建DOM树
  • 解析CSS，构建stylesheets（可以通过document.styleSheets查看浏览器解析好的一个CSS结构，浏览器在CSS解析的时候，是从后往前进行解析的，这样做的好处是可以更快的找到对应的DOM）

参考文章

http://jartto.wang/2017/11/13/Exploring-the-principle-of-CSS-parsing/?from=from_parent_mindnote
http://jartto.wang/2017/11/13/Exploring-the-principle-of-CSS-parsing/?from=from_parent_mindnote
  • 合并HTML、CSS，生成render tree
  • 根据生成好的render tree，计算每个节点的层级，transform等，并生成layout tree
  • 浏览器执行完分层后，会开始进行光栅化，并对每个渲染区域进行分块，这里浏览器做了优化（渲染的时候，并不是全部都渲染的，由于内容过多，所以浏览器只会渲染可视区域的部分）
    • 重绘Repaint：只会改变颜色，不改变位置、宽高
    • 重排（回流）Reflow：元素宽高、位置发生变化

      ✍️重绘一定会触发回流

  • 浏览器通过显卡把需要显示的内容发送给显示器，显示器读取缓存区的内容，根据逐行扫描的方式进行渲染
  • 渲染完成
  • 其他问题

    • 在渲染的过程中，CSS是否会阻塞渲染，还有js？

      在渲染过程中，CSS会阻塞渲染，但不会阻塞解析，应该是因为需要计算样式的原因。js一定会阻塞解析和渲染，设置了async的script会进行下载，并立即执行，defer会在dom解析的时候下载，但是会等到完成后再去执行，所以head内的js尽量不要操作dom，也不要放，不然会等js下载完成才会继续解析dom，造成白屏。

    • CSS的解析规则是怎样的？

      CSS的解析规则是从后往前进行解析的，这样的好处就是可以最快的找到被选择的样式。如果从前往后解析，可能会导致解析到一般发现不对，会再次重新解析

缓存

参考文章

https://juejin.cn/post/6993358764481085453?share_token=20ce80d0-b8e6-44d2-a47b-58b24fb9ebfe&from=from_parent_mindnote#heading-6
https://juejin.cn/post/6993358764481085453?share_token=20ce80d0-b8e6-44d2-a47b-58b24fb9ebfe&from=from_parent_mindnote#heading-6

跨域

进程

  • 渲染进程
  • GPU进程
  • 浏览器进程
  • 插件进程

web安全

  • 跨站脚本共计XSS（Cross Site Scripting）
  • 跨站请求伪造CSRF（Cross-site request forgery）
  • 内容安全策略CSP（Content Security Policy）

浏览器引擎

  • webkit 苹果
  • blink 谷歌
  • gecko 火狐

TCP阻塞

参考文章

https://juejin.cn/post/6844904004711874567?from=from_parent_mindnote
https://juejin.cn/post/6844904004711874567?from=from_parent_mindnote

DNS

查询的时候，会向域名服务器进行查询，接收这个查询请求的域名服务器首先会在自己的数据库进行查找，如果有该域名的ip则返回，没有则继续上上一层根域名服务器进行查询，直到根域名服务器。解析器和域名服务器将最新的域名会缓存，方便下次查找。

OSI

应用层

为应用程序提供服务并规定通信的相关细节

表示层

将应用处理的信息转换为适合网络传输的格式，或者将下一层的数据转换为上一层能处理的格式，主要负责数据转换

会话层

负责建立和断开连接，以及书的分割等数据传输的相关内容

传输层

管理两个点的数据传输（确保数据被送达）

网络层

将数据传输到目标地址，目标地址可以是多个网络通过路由器连接而成的地址，主要负责寻址和路由选择

数据链路层

负责物理层上互联，节点之间的通信传输，将0、1序列划分为具有意义的数据帧传送给对方（数据帧的生成和接收）

物理层

负责0、1比特流与高压的高低、灯光闪灭的转换

CDN

快来参与讨论吧