从浏览器输入URL地址到显示页面经历了什么过程？

前言

从浏览器输入url到浏览器窗口显示出想呈现的内容，中间任何一步都能做一篇文章，这里只是简述一下该过程中的大致步骤

一，浏览器查找解析域名IP地址

① 在浏览器中输入www.baidu.com域名，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。经常浏览的网页在开发者模式下可以看到部分资源缓存在内存中（memory cache），打开新的网站就会看见全是http请求，没有缓存。

② 如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。本地DNS服务器一般由网络接入服务器商提供，比如中国电信，中国移动。

③如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/IP参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，如果没有，本地DNS服务器还要向DNS根服务器进行查询。
④本地DNS就把请求发至 “根DNS服务器”，根DNS服务器没有记录具体的域名和IP地址的对应关系，而是收到请求后判断这个域名(.com)是谁来授权管理的，告诉本地DNS服务器，你可以到相应的域服务器上去继续查询，并给出域服务器的地址。
⑤本地DNS服务器继续向域服务器发出请求，请求的对象是 .com 域服务器 。 .com域服务器收到请求之后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址(baidu.com)给本地DNS服务器。
⑥最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，方便下次访问时直接返回结果，加快网络访问。

注：

若网站和用户之间加入过CDN，DNS经过本地域名解析后将最终域名解析权交给CDN专用的DNS服务器，然后CDN的DNS服务器将CDN的全局负载均衡设备IP地址返回用户，用户向其发起URL访问，CDN全局负载均衡设备根据用户IP地址，以及用户请求的内容URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求。服务商能使用Web Cache技术在本地缓存用户访问过的Web页面和对象，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求（但是一般问输入url的过程不是指这个）。

二，TCP连接

在拿到域名对应的IP地址后，会以随机端口（1024~~65535）向WEB服务器程序80端口发起TCP的连接请求，这个连接请求进入到内核的TCP/IP协议栈（用于识别该连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，最终到达WEB程序，最终建立了TCP/IP的连接，对于客户端与服务器的TCP连接的三次握手具体细节我之前博客写的有: 简述TCP连接与释放过程中的三次握手和四次挥手

三，发送HTTP请求

建立起安全的加密信道后，浏览器开始发送 HTTP 请求，一个HTTP请求报文由请求行（request line）、请求头部（headers）、空行（blank line）和请求数据（request body）4个部分组成。

四、服务器端处理

服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。完成一次 HTTP 请求后，服务器并不是马上断开与客户端的连接。在 HTTP/1.1 中，Connection: keep-alive 是默认启用的，表示持久连接，以便处理不久后到来的新请求，无需重新建立连接而增加慢启动开销，提高网络的吞吐能力。在反向代理软件 Nginx 中，持久连接超时时间默认值为 75 秒，如果 75 秒内没有新到达的请求，则断开与客户端的连接。同时，浏览器每隔 45 秒会向服务器发送 TCP keep-alive 探测包，来判断 TCP 连接状况，如果没有收到 ACK 应答，则主动断开与服务器的连接。注意，HTTP keep-alive 和 TCP keep-alive 虽然都是一种保活机制，但是它们完全不相同，一个作用于应用层，一个作用于传输层。

断开连接

五，关闭TCP连接

避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求，四次挥手关闭TCP连接，了解可转 简述TCP连接与释放过程中的三次握手和四次挥手.

六，浏览器解析渲染

首先解析html，构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

解析过程中，浏览器首先会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。在浏览器显示HTML时，会获取其他地址内容的标签。浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片，CSS，JS文件等浏览器自上而下执行，过程中如遇到css、图片等，此时是异步请求。当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。因为JS有可能会修改DOM；所以在编写代码时尽可能的把js写在html的底部，等html主体和css加载完之后再进行加载js；浏览器已经知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置是哪里，最后一步painting（渲染）,按照算出来的规则，通过显卡，把内容画到屏幕上，显示出内容。

两个概念
reflow（回流）：几乎无法避免。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏），文字和窗口的改变，都将引起浏览器的reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。
repain（重绘）：如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。

注：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。
有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。