浏览器输入一个url后会做什么

解析url

浏览器先会判断输入的字符是不是一个合法的URL结构，如果不是，浏览器会使用搜索引擎对这个字符串进行搜索
url结构组成
● 协议： URL 的协议部分指示浏览器应该使用哪种协议来获取资源。常见的协议有 http://、https://、ftp:// 等。
● 主机：是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址。有时，在主机名前也可以包含连接到服务器所需的用户名和密码（格式：username:password@hostname）。
● 端口：各种传输协议都有默认的端口号，如http的默认端口为80。如果输入时省略，则使用默认端口号。
● 路径：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

DNS解析

什么是DNS

域名系统DNS（Domain Name System）是因特网使用的命名系统，用来把便于人们使用的机器名字转换为IP地址。IP地址对应着网络上一台计算机。
因特网的域名系统DNS被设计成一个联机分布式数据库系统，并采用客户-服务器方式。DNS大多数名字都在本地进行解析，仅少量解析需要在因特网上通信，因此DNS系统的效率很高。由于DNS是分布式系统，即使单个计算机出了故障，也不会妨碍整个DNS系统的正常运行。
域名到IP地址的解析是由分布在因特网上的许多与域名服务器程序（可简称为域名服务器）共同完成的。域名服务器程序在专设的节点上运行，人们也常把运行域名服务器程序的机器称为域名服务器
域名解析的过程实际是将域名还原为IP地址的过程。

请求一旦发起，浏览器首先要做的事情就是解析这个域名

DNS查询顺序：浏览器缓存→操作系统缓存→路由器缓存→ISP DNS 缓存→迭代 / 递归搜索

从缓存中解析

● 浏览器缓存
○ 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址，如果缓存中有，这个解析过程就将结束
● 操作系统缓存
○ 如果用户的浏览器缓存中没有，浏览器会从本地硬盘的hosts文件查找是否有存储DNS信息，查找是否有目标域名和对应的IP地址，如果有的话就直接使用 hosts 文件里面的 ip 地址。
● 路由缓存
○ 如果系统缓存中也找不到，那么查询请求就会发向路由器，一般会有自己的路由器DNS缓存。
● ISP (Internet Service Provider，Internet服务供应商，用户接入Internet的接口）DNS缓存
○ 电脑会发出一个DNS请求到本地DNS服务器。在我们的网络配置中都会有"DNS服务器地址"这一项，操作系统会把这个域名发送给这里设置的DNS，也就是本地区的域名服务器，通常是给你接入互联网的应用提供商提供。

从因特网上解析

当本地DNS服务器不能回答客户机的DNS查询时，它就需要向其他DNS服务器进行查询并进行解析。此时有两种方式。
● 递归解析
○ 本地域名服务器以DNS客户的身份，一般是先向该域名的根域服务器发出查询请求报文，再由根域名服务器一级级向下查询。最后得到的查询结果返回给本地DNS服务器，再由本地DNS服务器返回给客户端。
因此递归查询返回的查询结果或者是所要查询的IP地址，或者是报错，表示无法查询到所需的IP地址。
● 迭代解析
○ 当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的IP地址，要么告诉本地服务器：“你下一步应当向哪一个域名服务器进行查询（给出IP地址）。”然后让本地域名服务器再继续向这些DNS服务器进行查询（而不是替本地域名服务器进行后续的查询），到得到查询结果为止。
采用哪种递归方式，取决于最初的查询请求报文的设置是要求哪一种查询方式。
找到IP地址后，将它记录在缓存中，供下次使用。

根据找到的ip地址建立TCP连接

得到 IP 地址后，浏览器会开始构造一个 HTTP 请求，应用层客户端向服务器端发送HTTP请求
TCP三次握手：确保浏览器和服务器之间可以稳定地进行数据传输。

● 第一次握手：客户端发送一个带 SYN=1，Seq=x 的数据包到服务器端口 第一次握手，由浏览器发起，告诉服务器我要发送请求了 SYN(synchronous)：请求建立连接 seq(sequence)：随机序列号 请注意TCP规定SYN被设置为1的报文段不能携带数据但要消耗掉一个序号。
● 第二次握手：服务器发回一个带 SYN=1， ACK=1， seq=y, ack= x+1 的响应包以示传达确认信息 第二次握手，由服务器发起，告诉客户端我准备接受了，你赶紧发送吧 ACK(acknowledgement)：确认，是一个确定字符 ack：ack=上一次的seq+1，作用是接受上一次远端主机传来的seq，加一然后再传给客户端，提示客户端已经成功接收上一次所有数据 请注意这个报文段不能携带数据，因为它是SYN被设置为一的报文段但同样要消耗掉一个序号
● 第三次握手：客户端再回传一个带 ACK，seq = x + 1, ack = y + 1 的数据包，代表“握手结束” 第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧 确认报文段可以携带数据。但如果不携带数据则不消耗序号，在这种情况下所发送的下一个数据报文段的序号仍是x + 1
然后双方就正确建立连接，开始传输数据

浏览器发送请求

● 连接建立成功之后，浏览器向服务器发送HTTP请求报文，来获取自己想要的数据。
○ 这个请求包括请求方法（GET、POST等）、路径、HTTP版本、请求头部等信息。
● 如果发生重定向，状态码是3开头，那么返回第一步，继续匹配重定向的服务器
● 服务器处理请求，并且服务器发送html响应
● tcp断开连接
● 根据响应，得到html，渲染出界面

浏览器解析渲染页面

HTML解析过程

解析HTML，会 构建DOM Tree
当遇到我们的script文件的时候，我们是不能进行去构建DOM Tree的。它会停止继续构建，首先下载JavaScript代码，并且执行JavaScript的脚本，只有等到JavaScript脚本执行结束后，才会继续解析HTML，构建DOM树。

生成CSS规则

● 在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件
○ 注意:下载CSS文件是不会影响DOM的解析的
● 浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出对应的规则树
○ 我们可以称之为 CSSOM (CSS Object Model，CSS对象模型）

构建Render Tree

当有了 DOM Tree 和 CSSOM Tree 后，就可以两个结合来 构建 Render Tree

● 注意一：link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程
○ 因为Render Tree在构建时，需要对应的CSSOM Tree。当我们DOMTree解析完成的时候，如果CSSOM Tree没解析完成就会阻塞。当然一般情况下浏览器会进行优化处理，不会傻傻的等待
● 注意二：Render Tree和DOMTree并不是一一对应的关系
○ 比如对于display为none的元素，压根不会出现在render tree中

布局(layout)和绘制(Paint)

● 第四步是在**渲染树(Render Tree)**上运行 布局(Layout) 以计算每个节点的几何体。 渲染树会 表示 要显示哪些节点以及其他样式，但是 不表示 每个节点的尺寸、位置 等信息 布局的主要目的是为了确定呈现树中所有节点的宽度、高度和位置信息
● 第五步是将每个节点 绘制(Paint) 到屏幕上 在绘制阶段，浏览器将布局阶段计算的 每个frame（在网页开发中，frame通常指的是HTML的frame标签，它允许将网页分割成不同的框架或区域）转为屏幕上实际的像素点 包括 将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）

特殊解析：composite合成

● 绘制的过程,可以将布局后的元素绘制到多个合成图层中【这是浏览器的一种优化手段】
● 默认情况下，标准流中的内容都是被绘制在同一个图层(Layer)中的
● 而一些特殊的属性，会创建一个新的合成层（Compositinglayer )，并且新的图层可以利用GPU来加速绘制
○ 因为每个合成层都是单独渲染的
● 那么哪些属性可以形成新的合成层呢?常见的一些属性：
○ 3D transforms
○ video、canvas、iframe
○ opacity动画转换时
○ position: fixed
○ will-change:一个实验性的属性，提前告诉浏览器元素可能发生哪些变化
○ animation或 transition设置了opacity、transform
● 分层确实可以提高性能，但是它以内存管理为代价，因此不应作为web性能优化策略的一部分过度使用