从输入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协议的缓存机制上做区分更容易理解，此处更侧重’向服务端发送请求及其返回值’这方面做一下区别）