从 URL 输入到页面展现发生了什么

浏览器解析URL

首先看浏览器能通过URL (Uniform Resource Locator，统一资源定位符)直接获取什么信息
例如：https://www.producthunt.com:443/posts/progress:

协议部分：HTTPS
即Browser与Server程序之间使用HTTPS进行数据传输。常见的应用层协议还有HTTP、FTP、Telnet等
网络地址：www.producthunt.com
端口号：443
HTTP默认端口号为80，HTTPS默认443。
资源路径:/posts/process

域名解析

域名解析，即将域名映射为IP的过程。可能的流程依次如下：

查找浏览器缓存
浏览器会缓存DNS记录一段时间。不同浏览器缓存的策略不同。
查找系统缓存
浏览器做一个系统调用，获取系统缓存记录。Linux系统中从hosts文件中查找。
查找路由器缓存
根据网卡配置（或自动获取的）的DNS Server地址发起DNS请求查找，这个DNS Server通常是同一个局域网内的Router。Router会查询是否有匹配的DNS缓存
请求Local DNS Server（ISP提供）
迭代向根DNS服务器、顶级域DNS服务器、权威DNS服务器查询

TCP连接建立

浏览器调用 Socket API，请求一个TCP流套接字，建立TCP连接。

TCP被称为是面向连接的，即在一个应用进程向另一个应用进程发送数据之前，这两个进程必须先相互“握手”，即它们必须相互发送某些预备报文段，以建立确保数据传输的参数。因此在发送HTTP请求之前，需要先三次握手建立TCP连接。

三次握手

三次握手.png

发送HTTP Reqeust

内核对数据进行底层协议栈的封装后，由网卡发送

HTTP首部

HTTP请求信息由3部分组成：

请求方法URI协议/版本
常见的请求方法有POST和GET（区别见附录）。
请求头(Request Header)
请求正文
请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息：
username=jinqiao&password=1234

例如

GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

username=admin&password=admin

数据包转发

数据包会在网络中经过网络节点传送给服务器。
其中，在同一局域网内传输时，需查找本地ARP表或者广播ARP请求来获知目的MAC地址。
在不同局域网中传输时，三层节点（如路由器）会读取数据包的网络层头部，查找本地路由表来决定将数据包向哪条链路转发。路由表的建立和维护由一些动态/静态的选路算法决定。

服务器响应HTTP请求

HTTPD(HTTP Daemon)在服务器端处理请求/相应。最常见的 HTTPD 有 Linux 上常用的 Apache 和 nginx，与 Windows 上的 IIS。

HTTPD接收请求
↓
服务器根据请求的路径获取相应的响应内容
↓
服务器使用指定的处理程序，使用后端语言分析处理后，将输出结果发送给请求者。

浏览器接收到回复后呈现页面

浏览器解析HTTP Response后，需加载html和html文件中包含的外部引用文件，及文件内涉及的图片或者多媒体文件。

加载HTML、CSS、JS等资源文件

浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染
解析到link 标签后重新发送请求获取css
解析到script标签后，发送请求获取js，并执行代码。js文件加载和执行过程，html会挂起渲染的线程。
解析到img标签后发送异步请求获取图片资源，不影响html加载。

解析

HTML文档解析生成解析树即dom树，由dom元素及属性节点组成，树的根是document对象。
css解析将css文件解析为样式表对象。该对象包含css规则，该规则包含选择器和声明对象。

css.png

js解析文件在加载的同时也进行解析。

渲染

即为构建渲染树的过程，他是原来DOM树的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。
渲染树和DOM树的关系，不可见的dom元素（… display=none）不会被插入渲染树中。还有像一些节点的位置为绝对或浮动定位（需要css知识理解），这些节点会在文本流之外，因此会在两棵树上的不同位置，渲染树标识出真实的位置，并用一个占位结构标识出他们原来的位置。