浏览器原理

樊衍
201 阅读6分钟

首先我们先安利一下curl,获得服务器返回的响应头以及响应体

curl -I https://www.baidu.com/

结果为:
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
Connection: keep-alive
Content-Length: 277
Content-Type: text/html
Date: Thu, 30 Sep 2021 04:26:18 GMT
Etag: "575e1f59-115"
Last-Modified: Mon, 13 Jun 2016 02:50:01 GMT
Pragma: no-cache
Server: bfe/1.0.8.18

线程与进程

  • 多线程可以并行处理任务，但是线程不能单独存在，需要进程启动与管理

四个特点

  • 进程中的任一线程执行出错，都会导致整个进程崩溃
  • 线程之间可以贡献数据
  • 当一个进程关闭之后，操作系统会回收所有的内存
  • 进程之间的内容相互隔离，互不影响

单线程浏览器 ， 不稳定，不流畅，不安全

打开谷歌浏览器的任务管理器我们可以看到四个进程

  • 浏览器主进程 GPU进程 网络进程 渲染进程 + 插件进程(额外)

UDP TCP TCP协议

  • UDP 协议传输速度快，但不保证正确性。如在线视频，直播
  • 同时对于UDP来说，浏览器请求以及邮件要求可靠的应用，存在两个问题
  • 数据传输过程中的丢失
  • 大文件分解为小文件包来进行传输，文件经过不同的路由，在不同的时间到达接收端。UDP并不知道如何组装这些文件，从而还原为完整的大文件

UDP IP+端口号 TCP ip + 端口号+排序的序列号

TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。

  • 两个优势
  • 丢包，重传
  • 数据排包
TCP 完成的机制

建立连接(三次握手) 传输数据 断开连接(四次挥手)

  • 传输数据的过程中，接收端在接收到数据包之后，会发送确认数据包给发送端。 否则触发发送端的重发机制
HTTP 请求流程

浏览器发送HTTP请求

GET /index.html HTTP1.1
  • 查找缓存 若存在，则拦截请求，返回缓存
  • 准备IP地址以及端口号
    • DNS 解析 域名和IP相对应
  • 等待TCP队列 chrome同一个域名只能建立6个TCP连接,其余的处于等待状态
  • 发送HTTP请求 服务器处理HTTP请求
  • 返回请求
  • 断开连接
  • 重定向 curl 在Cmder里直接运行可查看服务端返回的数据
    • 重定向会返回 302状态码 location为重定向的正确地址

浏览器中的HTTP请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备IP和端口、等待TCP队列、建立TCP连接、发起HTTP请求、服务器处理请求、服务器返回请求和断开连接。 然后我还通过HTTP请求路径解答了两个经常会碰到的问题，一个涉及到了Cache流程，另外一个涉及到如何使用Cookie来进行状态管理。

cache

Cache-Control:Max-age=2000
If-None-Match:"4f80f-13c-3a1xb12a"

从输入URL到展示页面中间都发生了什么

主要的过程有

  • 用户输入，
  • 网络进程发起URL请求，
  • 服务器响应URL请求之后，浏览器进程准备渲染进程
  • 渲染进程准备好后，需要先向渲染进程提交页面数据，文档提交阶段
  • 渲染进程接收完文档信息之后，便开始解析页面和加载子资源，完成页面渲染
用户输入

地址栏首先会检索输入的为关键字或者url地址

  • 关键字使用搜索引擎
  • 请求的URL则会根据规则添加响应的协议

而后标签转圈状态则为加载状态。此时需要等待提交文档阶段，页面才会进行解析

URL请求过程
  • 浏览器进程首先会通过进程间通信(IPC),把URL请求发送至网络进程，网络进程进行真正的URL请求
  • 网络进程检查本地缓存，若没有。则进行进行网络请求。 DNS解析。域名服务器的IP地址
  • 随后利用IP地址和服务器建立TCP连接。而后浏览器端构建请求头和请求行等信息，并将cookie等配置文件放入请求头中。而后向服务器发送请求数据
  • 服务端接收之后，生成响应数据。并发给网络进程(响应行，响应头，响应体)，并发给网络进程。网络进程接收后。开始解析响应头的内容
重定向
  • 网络进程解析响应头 若出现状态码301，302，则表示为重定向，网络进程会读取响应头location字段里面的内容。重新发起HTTPS请求
响应的数据类型

URL请求的数据有时为HTML，有时为下载类型

  • content-type HTML OR application
准备渲染进程

process-per-site-instance, 不知道现在还适用吗

  • 由于极客邦和极客时间的标签页拥有相同的协议和根域名，所以它们属于同一站点，并运行在同一个渲染进程中

  • 文档此时还在解析阶段 ，没有提交给应用程序，下一步为提交文档阶段

提交文档

文档指的是URL请求的响应体数据

  • 文档消息是由浏览器进程提供的，渲染进程接收后。会和网络进程建立管道
  • 传输完成后，提供 确认提交给浏览器进程
  • 而后浏览器更新页面状态 安全状态 历史状态 地址栏的URL，并更新web页面
渲染阶段
  • 一旦文档被提交，渲染进程便开始页面解析和子资源加载。页面生成完成后，会停止标签图标上的加载动画

总结

  • 用户在地址栏中输入URL
  • 浏览器进程构建完整的url
  • 浏览器进程通过进程间通信(IPC)将url请求发送给网络
  • 如果有本地缓存，则返回给浏览器进程
  • 若没有，网络进程向服务器发送http请求
    • DNS解析 域名 -》 ip
    • 建立TCP连接
    • 构建请求头信息
    • 发送请求头信息
    • 服务器响应后，网络进程接收响应头和相应信息，解析响应内容。
  • 网络进程解析响应数据
    • 302，301 状态码便是重定向，从location中读取重定向地址
    • 200 OK 首先检查content-type 如果是application, 则交由下载管理器处理，如果是HTML，则通知浏览器处理渲染进程
  • 准备渲染进程
  • 传输数据，更新状态
    • 准备好后，提交文档信息。网络进程与渲染进程建立管道。
    • 渲染进程接收完数据后，向浏览器发送“确认提交”
    • 浏览器接收到相关消息以后，更新浏览器页面状态: 安全，历史状态，地址栏 ，web页面
avatar
文章
阅读
粉丝