从输入url到页面加载完成的过程中都发生了什么？（针对前端）

1、输入url地址后，浏览器查找域名的IP地址，这一步涉及到DNS的解析；

2、当解析完成找到目标服务器，浏览器会向web服务器发送一个http请求；

3、服务器接受并处理http请求；

4、服务器构造并发送响应报文；

5、浏览器 接收报文开始构建html页面；

6、浏览器发送静态资源请求，具体步骤略，服务器会把一些图片视频等资源返回给浏览器；

7、浏览器发送Ajax请求；

8、页面构建完成；

注：其中浏览器构建页面的时候有这样几个步骤：

解析html构建DOM树->构建render树->布局render树 ->绘制render树

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

从图3和4中可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。下面将讨论流程中的各个阶段。