从url输入到页面渲染完成答题可以分为三步：
1、DNS解析
2、浏览器发起请求与服务器交互的过程
-
发起TCP连接
-
发送HTTP请求
-
服务器处理请求并返回HTTP报文
3、浏览器解析渲染页面
一、DNS解析
DNS（Domain Name System 的缩写）是一个分布式数据库系统。它提供将域名转换成对应IP地址的信息。
DNS 就是根据域名查出IP地址。这种将名称转换成IP地址的方法称为域名解析。
示例： www.dnscache.com (域名) - DNS解析 -> 11.222.33.444 (IP地址)
一、DNS查询过程
1、浏览器缓存，浏览器会缓存DNS记录一段时间
2、系统缓存
如果浏览器缓存里没有找到需要的记录，浏览器会做一个操作系统调用（windows里是gethostname），会读取操作系统的hosts文件看是否存在对应的映射关系
Chrome浏览器看本身的DNS，在地址栏输入：chrome://net-internals/#dns
3、路由缓存
路由器也有DNS缓存
4、本地 DNS 服务器（ISP服务器）
每一个ISP（网络服务提供商），或一个大学，甚至是一个大学里的系都会有一个自己的本地域名服务器,他会在url第一次访问时缓存该域名的指向。
5、域名服务器
到此处的过程为：根域服务器（.） -> 顶级域名服务器（eg: .com，.org）->主域名服务器（eg: google.com）->...->，
域名服务器之间进行迭代查询，直到查到主机的ip地址。
主机向本地域名服务器的查询一般都是采用递归查询。
本地域名服务器向根域名服务器的查询通常是采用迭代查询。
当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么返回给本地域名服务器所要查询的IP地址，要么返回给本地域名服务器下一步应当查询的域名服务器的IP地址。
复制代码(1)递归查询
(2)迭代查询
二、浏览器发起请求与服务器交互的过程
1、发起TCP连接
TCP提供一种可靠的传输，这个过程涉及到三次握手，四次挥手。
2、发送HTTP请求
HTTP服务器，默认端口号为80，HTTPS（securely transferring web pages）服务器，默认端口号为443
发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口 请求报文由请求行，请求头，请求正文组成。
HTTP缓存：详解
3、服务器处理请求并返回HTTP报文
HTTP报文也分成三份，状态码 ，响应报头和响应报文
一、状态码
HTTP状态码共分为5种类型：
常见状态码：
- 200 - 请求成功
- 204 - 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
- 301 - 资源（网页等）被永久转移到其它URL
- 302 - 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
- 304 - 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
- 401 - 未授权，请求要求用户的身份认证
- 403 - 禁止，服务器理解请求客户端的请求，但是拒绝执行此请求
- 404 - 请求的资源（网页等）不存在
- 500 - 内部服务器错误
三、浏览器解析渲染页面
浏览器页面渲染过程：
1）浏览器根据深度遍历的方式把html节点遍历成dom 树
2）将css解析成CSS DOM树
3）将dom树和CSS DOM树构造成render树
4）JS根据得到的render树 计算所有节点在屏幕中的位置，进行布局（回流）
5）遍历render树并调用硬件API绘制所有节点（重绘）
浏览器开始渲染并绘制页面: 这个过程涉及两个比较重要的概念回流和重绘，DOM结点都是以盒模型形式存在，需要浏览器去计算位置和宽度等，这个过程就是回流。等到页面的宽高，大小，颜色等属性确定下来后，浏览器开始绘制内容，这个过程叫做重绘。浏览器刚打开页面一定要经过这两个过程的，但是这个过程非常非常非常消耗性能，所以我们应该尽量减少页面的回流和重绘
1、回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
2、重绘
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
参考：