网页加载全过程

过程概述

  • 浏览器查找域名对应的 IP 地址;

  • 浏览器根据 IP 地址与服务器建立 socket 连接;

  • 浏览器与服务器通信: 浏览器请求,服务器处理请求;

  • 浏览器与服务器断开连接。

查找域名对应IP地址

访问服务器需要先知道服务器的ip地址,所以第一步是通过 DNS 把域名解析成一个 IP 地址, DNS 具体的查找过程:(浏览器缓存->系统缓存->路由器缓存)

  1. 浏览器搜索自己的 DNS 缓存(维护一张域名与 IP 地址的对应表);
  2. 搜索操作系统中的 DNS 缓存(维护一张域名与 IP 地址的对应表);
  3. 搜索操作系统的 hosts 文件( Windows 环境下,维护一张域名与 IP 地址的对应表);
  4. 操作系统将域名发送至 LDNS(本地区域名服务器),LDNS 查询 自己的 DNS 缓存(一般查找成功率在 80% 左右),查找成功则返回结果,失败则发起一个迭代 DNS 解析请求:

建立连接(TCP的三次握手)

  1. 主机向服务器发送一个建立连接的请求;

  2. 服务器接到请求后发送同意连接的信号;

  3. 主机接到同意连接的信号后,再次向服务器发送了确认信号 ;

⚠️注意:这里的三次握手中主机两次向服务器发送确认,第二次是为了防止已失效的连接请求报文段传至服务器导致错误。

网页请求与构建

请求

  1. 浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;

  2. 服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;

  3. 服务器将得到的 HTML 文件发送给浏览器;

  4. 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;

  5. 在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML ;

页面构建

  1. HTML代码转化为DOM(DOM Tree)

  2. CSS代码转化成CSSOM(CSS Object Model)

  3. 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)(Render Tree)

  4. 生成布局(layout),即将所有渲染树的所有节点进行平面合成

  5. 布局绘制(paint)在屏幕上

断开连接(TCP的四次挥手)

  1. 主机向服务器发送一个断开连接的请求;

  2. 服务器接到请求后发送确认收到请求的信号;(此时服务器可能还有数据要发送至主机)

  3. 服务器向主机发送断开通知;(此时服务器确认没有要向主机发送的数据)

  4. 主机接到断开通知后断开连接并反馈一个确认信号,服务器收到确认信号后断开连接;

posted @ 2017-03-03 13:39  Bigdots  阅读(582)  评论(0编辑  收藏  举报