url 浏览器请求响应过程分析

SSL 和 TLS

• SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。

• TLS 与 SSL 在传输层与应用层之间对网络连接进行加密。

SSL 的会话状态

• 会话（Session）和连接（Connection）是 SSL 中两个重要的概念。

  1. SSL 连接：用于提供某种类型的服务数据的传输，是一种点对点的关系。一般来说，连接的维持时间比较短暂，并且每个连接一定与某一个会话相关联。

  2. SSL 会话：是指客户和服务器之间的一个关联关系。会话通过握手协议来创建。它定义了一组安全参数。

HTTPS

HTTPS（Hypertext Transfer Protocol Secure）安全超文本传输协议

• 它是由 Netscape 开发并内置于其浏览器中，用于对数据进行压缩和解压操作，并返回网络上传送回的结果。

• HTTPS 实际上应用了 Netscape 的安全套接字层（SSL）作为 HTTP 应用层的子层。（HTTPS 使用端口 443，而不是像 HTTP 那样使用端口 80 来和 TCP/IP 进行通信。）SSL 使用 40 位关键字作为 RC4 流加密算法，这对于商业信息的加密是合适的。HTTPS 和 SSL 支持使用 X.509 数字认证，如果需要的话用户可以确认发送者是谁。

• https 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版。即 HTTP 下加入 SSL 层，https 的安全基础是 SSL。

从输入 URL 到页面加载发生了什么？

• 总体分为以下过程：

  1. DNS 解析

  2. TCP 连接

  3. 发送 HTTP 请求

  4. 服务器处理请求并返回 HTTP 报文

  5. 浏览器解析渲染页面

  6. 连接结束

一. DNS 解析

通过主机名，最终得到该主机名对应的 IP 地址的过程叫做域名解析（或主机名解析）。

• 实现了网址到 IP 地址的转换。网址到 IP 地址转换的过程是如何进行的?

  1. 浏览器缓存：浏览器会按照一定的频率缓存 DNS 记录。

  2. 操作系统缓存：如果浏览器缓存中找不到需要的 DNS 记录，那就去操作系统中找。

  3. 路由缓存：路由器也有 DNS 缓存。

  4. ISP 的 DNS 服务器：ISP 是互联网服务提供商(Internet Service Provider)的简称，ISP 有专门的 DNS 服务器应对 DNS 查询请求。

  5. 根服务器：ISP 的 DNS 服务器还找不到的话，它就会向根服务器发出请求，进行递归查询（DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址，然后再问.com 域名服务器，最后问主域名服务器。（依次类推））。

• www.google.com 事实上，真正的网址是 www.google.com.，这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，为了方便用户，通常都会省略，浏览器在请求 DNS 的时候会自动加上。

所有网址真正的解析过程为: . -> .com -> google.com. -> www.google.com.

dns 负载均衡（重定向）

• 例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，DNS 可以返回一个合适的机器的 IP 给用户。

二. TCP 连接（3 次握手建立连接，4 次握手释放连接）

• 连接建立

  1. client --> sever (检验client发送能力)
  2. server --> client (检验server接收能力)
  3. client --> sever (正式通信)

• 连接释放

  1. client --> sever (请求)
  2. server --> client (接受) --此后client无发送能力，sever无接受能力
  3. server --> client (确认关闭)
  4. client --> server (确认)

三. 发送 HTTP 请求

这部分又可以称为前端工程师眼中的 HTTP，它主要发生在客户端。

• 发送 HTTP 请求的过程就是构建 HTTP 请求报文并通过 TCP 协议中发送到服务器指定端口(HTTP 协议 80/8080, HTTPS 协议 443)。

HTTP 请求报文是由三部分组成: 请求行, 请求报头和请求正文。

1. 请求行

   Method Request-URL HTTP-VersionCRLF

   eg: GET index.html HTTP/1.1
   

   • 常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。

2. 请求报头

   • 请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息

   • 常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent 等。

3. 请求正文

   • 当使用 POST, PUT 等方法时，通常需要客户端向服务器传递数据，这些数据就储存在请求正文中。
   • 在请求包头中有一些与请求正文相关的信息，例如: 现在的 Web 应用通常采用 Rest 架构，请求的数据格式一般为 json。这时就需要设置 Content-Type: application/json。

四. 服务器处理请求并返回 HTTP 报文

对应的就是后端工程师眼中的 HTTP

• 后端从在固定的端口接收到 TCP 报文开始，这一部分对应于编程语言中的 socket。它会对 TCP 连接进行处理，对 HTTP 协议进行解析，并按照报文格式进一步封装成 HTTP Request 对象，供上层使用。

• 这一部分工作一般是由 Web 服务器去进行，例如 Tomcat, Jetty 和 Netty 等等。

HTTP 响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

1. 状态码

• 状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值:

  • 1xx：指示信息–表示请求已接收，继续处理。

  • 2xx：成功–表示请求已被成功接收、理解、接受。

  • 3xx：重定向–要完成请求必须进行更进一步的操作。

  • 4xx：客户端错误–请求有语法错误或请求无法实现。

  • 5xx：服务器端错误–服务器未能实现合法的请求。

• 平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500。

2. 响应报头

• 常见的响应报头字段有: Server, Connection…。

3. 响应报文

• 服务器返回给浏览器的文本信息，通常HTML, CSS, JS, 图片等文件就放在这一部分。

五. 浏览器解析渲染页面

• 浏览器在收到HTML,CSS,JS文件后，它是如何把页面呈现到屏幕上的？（WebKit渲染的过程。）浏览器是一个边解析边渲染的过程。

  1. 首先浏览器解析HTML文件构建DOM树；

  2. 然后解析CSS文件构建渲染树；

  3. 等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上，涉及到两个概念: reflow(回流)和repain(重绘)。

  -reflow:

  DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为reflow。
  

  -repain:

   当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain
  

  页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain

js文件解析解析（同步、异步）

• JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行，在同一个时间内只能做一件事，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。

• JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件。脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。

注意

*　浏览器在解析过程中，如果遇到请求外部资源时，如图像,iconfont,JS等。浏览器将重复1-6过程下载该资源。
请求过程是异步的，并不会影响HTML文档进行加载，但是当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。

原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因。

• CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

六. 连接结束

web优化

• 上面部分主要介绍了一次完整的请求对应的过程，了解该过程的目的无非就是为了Web优化。

• web前端的本质： 将信息快速并友好的展示给用户并能够与用户进行交互。

• 如何尽快的加载资源？
  方法：尽量不从网络中加载的资源，当我们合理使用缓存，将资源放在浏览器端，这是最快的方式。

  1. 如果资源必须从网络中加载，则要考虑缩短连接时间，即DNS优化部分，减少响应内容大小，即对内容进行压缩。

  2. 另一方面，如果加载的资源数比较少的话，也可以快速的响应用户。当资源到达浏览器之后，浏览器开始进行解析渲染，浏览器中最耗时的部分就是reflow，所以围绕这一部分就是考虑如何减少reflow的次数。