浅析浏览器输入URL到页面展现

  • 白小霁
  • 3 Minutes
  • March 25, 2017

前言

我们每天都在浏览器中输入URL,再到页面呈现也就几秒的时间。看似一个随意的举动,但是作为一个前端工程师,便要知道短短的这段时间里发生了什么?

主要概念

URL(uniform resource location)统一资源定位符: 俗称网页地址,是因特网上标准的资源地址(Address)。
在一个简单的地址中包括一下部分,如图:

IP(Internet Protocol):网络之间互联的协议。链接互联网的每一台设备都有且只有一个IP地址,用来标识自己。有不同的类型,感兴趣自己去查阅。

域名(Domain Name): IP协议规定使用数字来标记一个地址,但日常生活中人们很难记忆若干地址,所以发明了一些好记的字符来标识设备地址,那就是域名。

DNS(Domain Name System): 既然有了域名让人类记忆一个地址,但是计算机记录的还是各个设备的IP地址,这样需要一个能够将域名转化为IP地址的相互映射一个分布式数据库,DNS提供的就是这样的服务。

HTTP(HyberText Transfer Protocol)超文本传输协议:所有的www文件都必须遵守这个标准。

浅析

地址解析

敲下回车之后,浏览器就开始解析域名,为了寻找域名映射的IP地址(目标: 域名 –> IP地址),解析的经历这几个阶段:

  1. 查询浏览器本身DNS缓存中是否有域名相关的信息
  2. 查询本机的host文件中是否有域名相关的信息
  3. 查询离本地最近的路由器中DNS的缓存中是否有域名相关的信息
  4. 查询ISP(互联网服务提供商,例如电信,移动)中的DNS服务器中是否有目标域名的信息
  5. 查询根域名服务器是否有目标域名的信息,如果没有,则传至子域名服务器进行查询, 以此递推,直到找到了IP地址为止

发送请求

找到了IP地址后,开始建立TCP链接(三次握手),与目标服务器建立连接,浏览器(客户端)通过HTTP发送请求到目标服务器。
请求报文

  1. 报文首部
    1.1 请求行 方法、URI、HTTP版本 (GET / HTTP/1.1)
    1.2 请求首部字段
    1.3 通用首部字段
    1.4 其他 cookie之类
  2. 空行
  3. 报文主体

服务器处理阶段

假设用户请求的访问的是PHP文件,Web服务器(自身不能处理PHP文件)收到了请求后,将对应的请求的PHP文件交给PHP应用服务器处理,若文件中有对数据库的数据进行处理,PHP服务器会链接数据库,通过SQL语句对数据进行处理,待PHP服务器将最终的数据生成HTML文件交给Web服务器,Web服务器将文件传输给客户端。

响应阶段

客户端接收服务器发来的响应结果,解析响应报文。
响应报文

  1. 报文头部
    1.1 状态行 HTTP版本、状态码、状态语句(HTTP1.1 200 ok)
    1.2 响应首部字段
    1.3 通用首部字段
    1.4 实体首部字段
    1.5 其他 cookie之类
  2. 空行
  3. 报文主体

解析、渲染阶段

  1. 浏览器解析HTML文件,顺序自上而下
  2. HTML解析器将HTML结构构建为DOM树
  3. CSS解析器将CSS解析为CSSOM树
  4. DOM树和CSSOM树开始渲染每一个节点的样式,最终将整个渲染树显示在浏览器上

注:如果解析过程中遇见<script>标签,会去下载JS文件并执行它,解析器也会停止对HTML的解析,这就是白屏闪屏现象产生的原因,所以会建议将<script>写在文档的最后