从 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元素（<head>…</head> display=none）不会被插入渲染树中。还有像一些节点的位置为绝对或浮动定位（需要css知识理解），这些节点会在文本流之外，因此会在两棵树上的不同位置，渲染树标识出真实的位置，并用一个占位结构标识出他们原来的位置。
