浅析浏览器输入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>写在文档的最后