从输入url到渲染页面，浏览器到底发生了什么

从输入url到渲染页面， 浏览器到底发生了什么

首先这是一个全过程分析 图

然后 再来分析一下第一步

解析url地址

输入url地址以后 ，他会先从缓存中找对应的ip地址，如果没有找到就会进行DNS解析，会进行本地域名服务器进行查找，
当以上均未完成，则会由本地DNS开始进行迭代查询：

• 向根域名服务器查询，得到顶级域名服务器的IP地址
• 向顶级域名服务器查询，得到权威域名服务器的IP地址
• 向权威域名服务器查询，最终得到域名的ip

则进入根服务器进行查询。全球仅有13台根域名服务器，1个主根域名服务器，其余12为辅根域名服务器。根域名收到请求后会查看区域文件记录，若无则将其管辖范围内顶级域名（如.com）服务器IP告诉本地DNS服务器；
本地域名服务器把查询的结果保存在缓存，以便下一次使用。

建立TCP连接

客户端与服务端进行三次握手（三次确认）
为什么是三次握手而不是两次握手
“已失效的连接请求报文段”的产生在这样一种情况下：client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况，client不会向server的确认发出确认。server由于收不到确认，就知道client并没有要求建立连接。”

发送http请求

一般前端意义上的http请求

服务端返回数据，将数据渲染在页面上

渲染页面 一般是：
解析html 渲染DOM树，
解析css 渲染出css规则树
js代码由js引擎处理
DOM树建立后根据CSS样式进行构建内部绘图模型，生成RenderObject树(渲染树)
一旦生成渲染树 ，页面就会根据网页结构进行重排（回流）
依赖2D和3D图形库渲染成图像结果呈现在浏览器中（重绘）
注意： css的下载过程不会阻塞解析，但JS会等待其下载并执行完成后才会继续解析。JS下载时，会并行下载其他的资源。
也就是说要等待执行完js代码 才会解析Dom

注： 重绘和重排

一旦渲染树构建完成，就要开始绘制（paint）页面元素了。当DOM的变化包括

• 添加或删除可见的DOM元素
• 元素位置改变
• 元素本身的尺寸发生改变
• 内容改变
• 页面渲染器初始化
• 浏览器窗口大小发生改变

导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。

简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘。

减少重排的方式：
1.一般用类改变样式，这样就会只引发一次重排
2.可以先将元素隐藏起来，再进行改变元素，再显示出元素。
3.将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素