浏览器工作原理

[liazei33]

  首先我们一起来看浏览器工作流程：
  构建请求：浏览器开启网络请求线程，向服务器发送完整的http请求。

  查找缓存：真正发起网络请求之前，浏览器会先在数据存储中查询是否有需要请求的文件。如果没有任何缓存，说明第一次请求，则进入网络请求过程。当浏览器有缓存的时候，会拦截请求，返回缓存，拦截请求。缓存优点：缓解服务器压力，提升性能，实现快速加载资源。
准备IP地址和端口：通过 URL 地址获取 ip 地址和端口信息，通过 DNS 解析返回域名对应的 ip 和 port ，浏览器也提供了 dns 数据缓存，通常 url 没有指明端口号，则默认80。

  等待TCP队列：chrome 有个机制，同一域名下同时最多只能建立6个TCP连接，如果同时有10个请求发生，其中4个就会进入等待队列，直至进行中的请求完成，如果小于6个，则直接进入TCP 连接。

  建立TCP连接：浏览器与服务器之间通过 TCP 建立连接。TCP协议提供可靠的连接服务，采用三次握手建立一个连接。

  发送http请求：连接建立成功之后，浏览器就可以与服务器之间通讯了。浏览器会向服务器发送请求信息，包括请求方法、请求 URL、http 版本协议。

  服务器处理请求：服务端收到请求信息以后，会根据浏览器的请求信息返回结果，返回结果中包含三部分：响应行、响应头、响应体。响应行内包含状态码，告诉浏览器处理结果，http状态码有很多。响应头包含服务器自身的一些信息，响应体就包含了网页的 html 实际内容。

  服务器响应和断开连接：通常服务器向浏览器返回请求数据之后，就会关闭连接，经过四次分手之后，就断开连接了。

  用户界面：浏览器的界面，有标签页、地址栏、前进、后退、刷新、收藏等。除了请求到的内容页面。

  浏览器引擎：用来查询和操作渲染引擎的接口。

  渲染引擎：也叫做 “浏览器内核” ，用来解析 html、css 并将结果以网页的形式显示，不同浏览器内核不同，同理渲染引擎也不同。

  网络：用来网络调用，如前后端数据交互中的http请求。

  js 解释器：用来解释执行js代码。

  UI 后端：绘制基础原件，如组合框与窗口，提供平台无关的接口，内部使用操作系统的相应实现。

  数据存储：属于持久层。浏览器需要把所有数据存到硬盘上，如 cookie、图片、css 等。