在浏览器地址栏输入URL到显示页面，中间经历了什么？

打开浏览器

在浏览器的地址栏输入 URL

浏览器查看 缓存

1. 资源没有缓存 -> 向服务器发起资源请求
2. 资源有缓存
   1. 资源足够新鲜 -> 提供给客户端，渲染资源 ----
   2. 资源新鲜度待定 -> 与服务器验证缓存资源的新鲜度
   3. 如何检查资源是否新鲜
      • 判断条件 -> http 头的 Expires 和 Cache-Control
      • HTTP1.0提供 Expires，值为一个绝对时间 , 表示缓存新鲜日期
      • HTTP1.1增加了Cache-Control: max-age=, 值为以秒为单位的最大新鲜时间

浏览器解析 URL，获取协议，主机，端口，path

浏览器内部组装一个HTTP(GET)请求报文

• 此处省略 -> 开启网络请求线程、dns查询、TCP/IP请求、五层因特网协议栈等

服务器收到请求，并且在后台接收请求，解析浏览器发送的数据，将响应给浏览器的数据返回

• 此处省略 -> 前后端 HTTP交互（HTTP头部，响应码，报文结构，cookie，编码解码，gzip压缩等）

浏览器收到数据包，开始解析流程，各自的引擎开始工作

• 解析流程
  • 解析 html -> 生成 dom树
  • 解析 css -> 生成 css规则树
  • 将以上两个合并成 render 树
  • 渲染
  • 处理外链资源
  • ...
• 浏览器引擎
  • 渲染引擎 layout engineer || Rendering Engine (又称为排版引擎)
    • 负责取得网页的内容，以及计算网页的显示方式，然后输出至输出设备（显示器或打印机）。
    • 浏览器的内核不同，对于语法解析会有所不同，渲染的效果也不相同。
    • 所有需要编辑，显示网络内容的应用程序，都需要内核
  • JS引擎
    • 解析和执行 javascript 来实现网页的动态效果
• 常见的浏览器内核

  • Trident内核 (又称MSHTML)：IE, MaxThon, TT, The World, 360, 搜狗浏览器等。

  • Gecko内核: Netscape6及以上版本，FF, MozillaSuite/SeaMonkey等。

  • Blink内核(原来为 Presto): Opera7及以上。

  • Webkit内核: Safari,Chrome等。