从输入url到页面渲染完成，发生了什么？（包括回流和重绘）

一，渲染过程

1，在地址栏输入url后，浏览器会先在历史记录中进行匹配，以便用户补全地址

2，进行DNS解析，将域名解析成对应的ip地址

3，拿到ip地址后与服务器连接也就是“三次握手” 

      第一次握手，浏览器向服务器发送连接请求

       第二次握手，服务器接收到浏览器的连接请求，回复ACK报文，并未本次连接分配资源

       第三次握手，浏览器接收ACK报文，并分配资源

4，浏览器解析拿到的资源

      将html解析为DOM tree

      将css解析为 css DOM tree

       将html的DOM tree 和css 的DOM tree 结合起来形成 render tree

       从根节点开始遍历render teee ，计算节点的大小和位置，这个过程就叫做进行reflow(回流)，

       通过遍历render tree和reflow的阶段，浏览器知道了哪些节点是可见的以及可见节点的几何信息，将 render tree上的每个节点转化为屏幕上的实际像素的过程就是repain（重绘）

二，reflow和repain

1，什么时候发生回流？

①，首次渲染

②，添加或者删除可见的元素

③，元素的尺寸或大小发生变化

④，浏览器窗口大小发生变化

2，什么时候发生重绘？

颜色或者背景等发生改变的时候，附图一张

3，我们在开发过程中应该注意什么？

回流必然触发重绘，重绘不一定引发回流，回流的成本比重绘高

①，动画的速度越快，越频繁触发回流

②，使用visiblity代替display：none，前者只触发重绘，后者触发回流

③，最小化回流或重绘