一个页面从输入URL 到页面加载显示完成，这个过程中都发生了什么？

0.0

先来一个前情提要哈：当我拿到这道题的时候，我确实是不太清楚如何表达这些内容，立刻意识到：作为一个科班生，这玩意都不懂，真的是对不起我的专业 0.0 。所以就有了下面这篇文章

说明：本次文章是结合了其他的高手的CSDN博客上的观点以及Jobbole上的一篇非常详细的文章而写的

jobbole上的这篇文章：现代浏览器工作原理 —在render engine等方面上讲解的很有深度（我不太明白其中的一些，在下面的文章就不会copy出来哈 大家伙可以自己去看看 http://blog.jobbole.com/12749/）

下面进入正题：

user-Interface 输入URL后
|
|
调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
|
|
通过DNS解析获取网址的IP地址
|
|
浏览器向服务器发送请求
|
|
服务器接受并处理http请求 并返回一个 HTTP 响应
|
|
浏览器显示 HTML 浏览器发送请求获取嵌入在 HTML 中的资源（如图片、视频、CSS、JS等等）
|
|
浏览器发送异步请求

说明1：在浏览器想服务器发送请求前会有一个网络连接：（下面这段是我从“前端网一篇博文copy下的”）

HTTP请求的建立

建立TCP连接：在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能，才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。在TCP/IP协议中，TCP协议提供可靠的连接服务，采用三次握手建立一个连接。

第一次握手：主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器，主机B由SYN=1知道，A要求建立联机；

第二次握手：主机B收到请求后要确认联机信息，向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包

第三次握手：主机A收到后检查ack number是否正确，即第一次发送的seq number+1,以及位码ack是否为1，若正确，主机A会再发送ack number=(主机B的seq+1),ack=1，主机B收到后确认seq值与ack=1则连接建立成功。

完成三次握手，主机A与主机B开始传送数据。

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。

浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。

说明2：当浏览器接受到服务器发来的资源后的过程：

在讲解之前先说一下:浏览器的构成以及主要功能

主要功能：是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，
aa1d
也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置

浏览器的界面元素包含：

▲用来输入URI的地址栏

▲前进、后退按钮

▲书签选项

▲用于刷新及暂停当前加载文档的刷新、暂停按钮

▲用于到达主页的主页按钮

主要构成：

用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

浏览器引擎－ 用来查询及操作渲染引擎的接口

渲染引擎－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来

网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作

UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口

JS解释器－ 用来解释执行JS代码

数据存储－ 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术



下面主要说一下：Rendering engine

The main flow：



parsing：(这段不是我写的，但是表达的很清楚，我就不想在写啦)

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

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

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

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