浏览器从输入URL到页面渲染过程
一．输入网址(URL)
URL
当我们想要打开一个页面时，很简单的会想到去输入一个网址，比如说（www.baidu.com）这里俗称的网址其实就是URL（统一资源定位符，Uniform Resource Locator）用于定位互联网上资源，俗称网址。
URL格式
protocol://host.domain:port /path to the file?parameters#anchor
(协议)://(主机名):(端口号)/(文件名)/(文件路径)(?额外参数)(#锚点)
示例解析
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
(1)http ：http是协议（Protocol），它表明了浏览器使用何种协议，有http、https、ftp、mailto等，其中https是加密认证版的http；
(2)www. http://example.com ：这是域名（Domain name），它表明正在请求哪个Web服务器，其中www是主机名（host）；
(3)80：这是端口（Port）,它表示用于访问Web服务器上的资源的“门”。如果Web服务器使用HTTP协议的标准端口（HTTP为80，HTTPS为443）来授予其资源的访问权限，则通常会被忽略。否则是强制性添加。
(4)/path/to/myfile.html ：是网络服务器上资源的路径（Path to the file）。在Web的早期阶段，像这样的路径表示Web服务器上的物理文件位置。
(5)?key1=value1&key2=value2 :是提供给网络服务器的额外参数（Parameters）。 这些参数是用 &符号分隔的键/值对列表。
(6)#SomewhereInTheDocument：是资源本身的另一部分的锚点（Anchor）。 锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。
在我们真正输入和操作的时候很多东西会被自动补全，也有很多部分可以省略，比如端口、协议等。
《计算机网络》
二. DNS解析 (DNS解析获取域名对应的IP地址)
输入网址（URL）这一步我们很好理解，但是接下来所谓的域名解析是什么呢？又是为什么要进行域名解析呢？在回答这些问题之前，我们先来看看百度百科对IP地址的介绍：
IP 地址（Internet Protocol Address）是互联网协议特有的一种地址，它是 IP 协议提供的一种统一的地址格式。IP 地址为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。Eg：192.168.59.0就是一个主机IP地址。
对于计算机来说，它既可以被赋予IP地址，又可以被赋予主机名和域名。但我们通常使用域名（www.baidu.com）去访问想要的网站，为什么？这是因为对于我们来说去理解、操作和记忆域名远比使用IP地址来的更方便。但是对于计算机来说则不然，理解域名相对来说是件更复杂耗时的事情。简单来理解，IP地址好比是你家的门牌号，域名好比“XXX家”这种笼统的称呼，我们更喜欢去记后者，但对于快递员来说，他并不认识你，因此记忆前者对他来说是件更有帮助的事。
为了解决上述的问题，DNS服务应运而生，它通过我们输入的域名去查找对应的IP地址，或逆向从 IP 地址反查域名的服务。所谓的DNS服务，就是和HTTP协议一样位于应用层的协议，提供域名到IP地址之间的解析服务。
DNS结构
DNS 的核心系统是一个三层的树状、分布式服务，基本对应域名的结构：
(1)根域名服务器（Root DNS Server）：管理顶级域名服务器，返回“com”“net”“cn”等顶级域名服务器的 IP 地址。
(2)顶级域名服务器（Top-level DNS Server）：管理各自域名下的权威域名服务器，比如 com 顶级域名服务器可以返回 apple.com 域名服务器的 IP 地址。
(3)权威域名服务器（Authoritative DNS Server）：管理自己域名下主机的 IP 地址，比如 apple.com 权威域名服务器可以返回 www.apple.com 的 IP 地址。
流程解析
1、在浏览器中输入www.qq.com域名，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。
2、如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。
3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/IP参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。
4、如果要查询的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。
5、如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询。
(1)如果未用转发模式，本地DNS就把请求发至13台根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址(qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找qq.com域服务器，重复上面的动作，进行查询，直至找到www.qq.com主机。
(2)如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。
三．建立TCP/IP链接
世界上几乎所有的 HTTP 通信都是由 TCP/IP 承载的，TCP/IP 是全球计算机及网络设备都在使用的一种常用的分组交换网络分层。 HTTP 的连接实际上就是 TCP 连接以及其使用规则。 ——–《HTTP 权威指南》
当浏览器获取到服务器的 IP 地址后，浏览器会用一个随机的端口（1024 < 端口 < 65535）向服务器的WEB程序的 80 端口发起 TCP 连接请求（注：HTTP 默认约定 80 端口，HTTPS 为 443 端口）。这个连接请求到达服务端后，…省略…，通过 TCP 三次握手，建立 TCP 的连接。
TCP 三次握手介绍请查看我的另一篇博文——TCP(三次握手四次挥手)。
四．发送HTTP请求
HTTP和HTTPS的相关介绍和区别，HTTP的请求报文介绍，请看我的另一篇博文——HTTP和HTTPS
TCP 三次握手结束后确认数据传输可靠后，开始发送 HTTP 请求报文。
五． 服务器处理请求
重定向
服务器给浏览器响应一个301永久重定向响应。为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢？其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://www.yy.com/和http://yy.com/，搜索引擎会认为它们是两个网站，结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差，当一个页面有好几个名字时，它可能会在缓存里出现好几次。
1）301和302的区别。
301和302状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。他们的不同在于301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址；302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。 SEO302好于301
2）重定向原因：
（1）网站调整（如改变网页目录结构）；
（2）网页被移到一个新地址；
（3）网页扩展名改变(如应用需要把.php改成.Html或.shtml)。
这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。
服务器处理请求
经过前面的重重步骤，我们终于将我们的http请求发送到了服务器这里，其实前面的重定向已经是到达服务器了，那么，服务器是如何处理我们的请求的呢？
后端从在固定的端口接收到TCP报文开始，它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。一些大一点的网站会将你的请求到反向代理服务器中，因为当网站访问量非常大，网站越来越慢，一台服务器已经不够用了。于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。此时，客户端不是直接通过HTTP协议访问某网站应用服务器，而是先请求到Nginx，Nginx再请求应用服务器，然后将结果返回给客户端，这里Nginx的作用是反向代理服务器。同时也带来了一个好处，其中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户使用。
六．返回HTTP响应
当服务器收到我们的请求之后，他会生成一个响应，以响应报文的形式返回客户端。
HTTP的响应报文介绍，请看我的另一篇博文——HTTP和HTTPS
七、浏览器渲染页面并展现
当客户端拿到响应文本经过层层解析，最终浏览器拿到HTML响应报文后，便开始渲染页面
1.解析 HTML 标签, 构建 DOM 树
2.解析 CSS, 构建 CSSOM 树
3.把 DOM 和 CSSOM 组合成 渲染树 (render tree)
4.在渲染树的基础上进行布局, 计算每个节点的几何结构
5.把每个节点绘制到屏幕上 (painting)
6.遵循以下的步骤
八．断开连接
四次挥手介绍请查看我的另一篇博文——TCP(三次握手四次挥手)。
总结
1.DNS 解析:将域名解析成 IP 地址
2.建立TCP 连接：TCP 三次握手
3.浏览器发送 HTTP 请求报文
4.服务器处理请求并返回 HTTP 响应报文
5.浏览器渲染页面
6.断开TCP连接：TCP 四次挥手
