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

我心飞翔 分类:javascript
  1. 打开浏览器

  2. 在浏览器的地址栏输入 URL

  3. 浏览器查看 缓存

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

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

    • 此处省略 -> 开启网络请求线程、dns查询、TCP/IP请求、五层因特网协议栈等
  6. 服务器收到请求,并且在后台接收请求,解析浏览器发送的数据,将响应给浏览器的数据返回

    • 此处省略 -> 前后端 HTTP交互(HTTP头部响应码报文结构cookie编码解码gzip压缩等)
  7. 浏览器收到数据包,开始解析流程,各自的引擎开始工作

    • 解析流程
      • 解析 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等。

回复

我来回复
  • 暂无回复内容