从输入URL到页面加载发生了什么

总体来说分为以下几个过程:

• DNS解析
• TCP连接
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器解析渲染页面

DNS解析

DNS解析是一个递归查询的过程

DNS解析是一个递归查询的过程。首先在本地域名服务器中查询IP地址，如果没有找到的情况下，本地域名服务器会向根域名服务器发送一个请求，如果根域名服务器也不存在该域名时，根域名服务器会向顶级域名服务器发送一个请求，依次类推下去。直到最后本地域名服务器得到域名对应的IP地址并把它缓存到本地，供下次查询使用。

DNS缓存：
DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

• 在 chrome 浏览器中输入:chrome://dns/，你可以看到chrome浏览器的DNS缓存。
• 系统缓存主要存在/etc/hosts中（Linux系统）。

几种域名解析方式：

• A记录，A代表的是Address，用来指定域名对应的IP地址
  例如，指定 www.abc.com 的A记录IP地址为 123.123.123.123
  注意：A记录可以将多个域名解析到一个IP地址，但是不能将一个域名解析到多个IP地址

• MX记录，表示的是Mail Exchange，就是可以将某个域名下的邮件服务器指向自己的Mail Server
  例如，指定 www.abc.com 的A记录IP地址为 123.123.123.123，对应的MX设置为 123.123.123.124，是 [email protected] 的邮件路由。
  DNS会将邮件发送到 123.123.123.124 所在的服务器，而正常通过Web请求的话仍然解析到A记录的IP地址 123.123.123.123。

• CNAME记录，全称是Canonical Name（别名解析），所谓的别名解析就是可以为一个域名设置一个或者多个别名
  例如，将 www.a.com 解析到 www.abc.com，将 b.com 也解析到 www.abc.com，其中 www.abc.com 分别是 www.a.com 和 b.com 的别名。

• NS记录，为某个域名指定DNS解析服务器，也就是这个域名由指定的IP地址的DNS服务器去解析

• TXT记录，为某个主机名或域名设置说明
  例如，可以为 abc.com 设置TXT记录为 “你好 ABC” 这样的说明。

内容分发网络（CDN）

DNS返回的IP地址是否每次都一样？No.
DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡，又叫做DNS重定向。
CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容。

通常，HTML/CSS/JS，图片和视频等静态内容由 CDN 提供。将内容存储在 CDN 上可以从两个方面来提供性能：

• 从靠近用户的数据中心提供资源
• 通过 CDN 你的服务器不必真的处理请求

CDN 推送（push）

当你服务器上内容发生变动时，推送 CDN 接受新内容。直接推送给 CDN 并重写 URL 地址以指向你的内容的 CDN 地址。
例如 www.abc.com/123.jpg 重写为 www.cdn.com/123.jpg

你可以配置内容到期时间及何时更新。内容只有在更改或新增是才推送，流量最小化，但储存最大化。

CDN 拉取（pull）

CDN 拉取是当第一个用户请求该资源时，从服务器上拉取资源。你将内容留在自己的服务器上并重写 URL 指向 CDN 地址。直到内容被缓存在 CDN 上为止，这样请求只会更慢，

存活时间（TTL）决定缓存多久时间。CDN 拉取方式最小化 CDN 上的储存空间，但如果过期文件并在实际更改之前被拉取，则会导致冗余的流量。

高流量站点使用 CDN 拉取效果不错，因为只有最近请求的内容保存在 CDN 中，流量才能更平衡地分散。

CDN的缺点

• CDN 成本可能因流量而异，可能在权衡之后你将不会使用 CDN。
• 如果在 TTL 过期之前更新内容，CDN 缓存内容可能会过时。
• CDN 需要更改静态内容的 URL 地址以指向 CDN。

TCP连接

参见 TCP 标志位 & 3 次握手 & 4 次握手

发送HTTP请求

参见 HTTP 请求及响应的几个步骤

服务器处理请求并返回HTTP报文

参见 HTTP 请求及响应的几个步骤

浏览器解析渲染页面

浏览器在收到HTML,CSS,JS文件后，它是如何把页面呈现到屏幕上的？

浏览器解析渲染页面

浏览器是一个 边解析边渲染的过程。
首先浏览器 解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repaint(重绘)。

• DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow；
• 当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repaint。

JS的解析是由浏览器中的JS解析引擎完成的。
JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。
JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。
同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。
所有的同步任务在主线程上执行，形成一个执行栈；异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。

---

引用：
前端经典面试题: 从输入URL到页面加载发生了什么？
WEB请求处理一：浏览器请求发起处理