浏览器渲染原理_从输入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并顺序执行至最后

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