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

对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式，下面的详细过程针对"在地址栏输入URL，按enter(回车)键加载资源"此种操作方式做解析，其它的方式的过程大同小异，差异会在后面再做分析。

　　1. 浏览器开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；

　　2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容（此时没有向服务端发请求）。若没有，则进行下一步操作（后面需要向服务端发送请求）；

　　3. 通过DNS解析获取网址的IP地址;

　　4. 向真实IP地址服务器发起tcp连接，与浏览器建立tcp三次握手。

　　5. 握手成功后，进行HTTP协议会话，浏览器发送报头(请求报头);

　　6. 进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;

　　7. 进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;

　　8. 处理结束回馈报头，将数据返回至浏览器;

　　9. 浏览器开始下载html文档(响应报头，状态码200)，同时设置缓存;

　　10. 之后浏览器对整个 HTML 结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS 文件进行解析，形成 CSS 树（CSSOM）。    

     　　接下来，需要结合 DOM + CSSOM，形成一个绘制树（Render Tree）;

　　11. 得到绘制树之后，需要计算每个结点在页面中的位置，这一个过程称为layout ；

　　12. layout的过程是在一个连续的二维平面上进行的，接下来，需要将这些结果栅格化，映射到屏幕的离散二维平面上，这一过  

    　　 程称为 paint ;  现代浏览器为提升性能，将页面划分多个 layer，各自进行 paint 然后组合成一个页面（composite layers）。

　

PS: 开头说到的"对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式"中其他方式的过程与上面方式差不多，只是在处理缓存这一环节上有些不同：

1. “转至”或地址栏里回车刷新：见上

2. F5刷新：没有第2步，在第8步判断返回值，如果返回304则表示有缓存，且此时直接用缓存；如果返回200则表示没有缓存，顺序执行至最后

3. Ctrl+F5刷新网页的区别：没有第2步，且在第8步一定返回200并顺序执行至最后

（对于以上3种不同方式更好的应该从http协议的缓存机制上做区分更容易理解，此处更侧重'向服务端发送请求及其返回值'这方面做一下区别）

 

 

PS: 10-12步更侧重于前端渲染页面过程，详细可参考：http://www.jianshu.com/p/016e8e78eb1f