原文链接：输入URL到展现页面的全过程 - 咖啡机（K.F.J） - 博客园

输入url到展示页面的全过程

1、域名解析；

2、建立TCP连接；

3、发送HTTP请求；

4、浏览器响应HTTP请求；

5、浏览器渲染页面；

一、基础概念

1）TCP/IP是互联网相关的各类协议族的总称

TCP/IP

2）TCP/IP分为4层：应用层、传输层、网络层、链路层

发送端从应用层往下走，接收端从链路层往上走。

IP（Internet Protocol）：网络协议位于网络层，IP地址可以和MAC地址配对。

ARP（Address Resolution Protocol）：ARP是一种以解析地址的协议，根据通信方的IP地址反查出对应的MAC地址。

Routing：路由选择，有点像快递公司的送货过程。

TCP（Transmission Control Protocol）：传输控制协议，提供可靠的字节流传输，将大数据分割成报文段（segment），TCP协议能够确认数据最终是否送达到对方。

客户端-服务器

3）数据信息包装

发送端-接收端

4）域名解析DNS服务

DNS（Domain Name Sustem）位于应用层，提供域名与IP地址之间的解析服务。

5）URI与URL

URI（Uniform Resource Identifier）：统一资源标识符。

URL（Uniform Resoure Locator）：统一资源定位符，通俗的将就是网址。

URI表示某一互联网资源，而URL表示资源地点，所以URL是URI的子集，下面是几个URI资源。

URI资源

6）RFC

RFC（Request For Comments）：征求修正意见书，RFC是互联网的设计文档。

要是不按照RFC标准执行，就有可能导致无法通信的状态。

7）HTTP

HTTP是无状态协议，协议对于发送过的请求或响应都不做持久化处理。

HTTP／1.1为了实现保持状态的功能，引入了Cookie。

二、域名解析

在《What really happens when you navigate to a URL》中曾提到DNS会先在缓存中查找记录。

浏览器缓存、系统缓存、路由器缓存、ISP DNS缓存、递归搜索。

域名解析

三、建立TCP连接

三次握手

1）发送端发送一个带SYN标志的数据包给对方

发送端发送一个带SYN标志的数据包给对方

Sequence Number：序号；

Acknowledgment Number：确认号。

2）接收端回传一个带有SYN和ACK标志的数据包以示传达确认信息

接收端回传一个带有SYN和ACK标志的数据包以示传达确认信息

3）发送端再回传一个带ACK标志的数据包，代表“握手结束”

发送端再回传一个带ACK标志的数据包，代表“握手结束”

四、发送HTTP请求

HTTP（Hyper Text Transfer Protocol）：超文本传输协议，由请求和响应构成。

1）请求报文

请求报文

报文首部内容如下：

报文首部内容

“Connection:keep-alive”：持久连接，只要任意一端没有明确提出断开，就保持TCP连接状态。

Connection:keep-alive

2）响应报文

响应报文

报文首部内容如下：

报文首部内容

上图中的200是HTTP状态码

状态码

五、服务器响应HTTP请求

从上面的响应报文中可以看到服务器软件是Nginx，并且请求的是一张PHP页面。

1）Apache

Apache对HTTP的请求

Apache对HTTP的请求可以分为连接、处理和断开连接3个阶段。同时也可以分为上图所示的11个小的阶段。

2）FastCGI

FatCGI可以让一个客户端，从网页浏览器向向执行在Web服务器上的程序请求数据。

比如现在请求的是‘index.php’，根据配置文件，Apache知道这个不是静态文件，需要去找PHP解析器来处理，那么他会把这个请求简单处理后交给PHP解析器。

Apache会传url、查询字符串、POST请求、HTTP header等，而CGI就是规定要传哪些数据、以什么样的格式传递给后方处理这个请求的协议。

3）PHP脚本执行

PHP程序完成基本的准备工作后启动PHP及Zend引擎，加载注册的扩展模块。

初始化完成后读取脚本文件，Zend引擎对脚本文件进行词法分析，语法分析。

编译成opcode执行。

服务器最终将生成的HTML代码返回给浏览器。

六、浏览器渲染页面

从Chrome的网络工具中可以看出，浏览器会先下载HTML代码，再去下去CSS或JS资源。

加载顺序

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成，下面是引擎基本流程：

解析HTML以构建DOM树->构建Render（渲染）树->布局Render树->绘制Render树

渲染流程

下图是Webkit的主流程：

Webkit主流程

HTML页面加载顺序

浏览器在运行JS代码之前会进行预解析，首先解析函数声明、定义变量，解析完成之后再对函数进行运行、变量进行赋值。

-不论var声明的变量处于当前作用域的第几行，在预解析过程中都会被提升到作用域的顶部，并初始化为undefined；

-而let声明的变量同样不论处于当前作用域的第几行，都会到作用域的顶部；【但是直接用let声明变量不赋值是会打印undefined，还是初始化了，只是let放在赋值之后，let声明会提前但不会初始化。】