从输入URL到渲染页面的流程示意图:
从图中可以看出,整个过程需要各个进程之间的配合,chrome浏览器使用的是多进程多线程模式,下面是各个进程的作用。
浏览器进程:浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
网络进程:网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
渲染进程:渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为 可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的,会存在一些恶意代码利用浏览器漏洞对系统进行攻击,所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里,就是为了保证系统的安全。
下面是流程步骤: ? ? ? 1、首先输入url并回车 ? ? ? 2、浏览器进程会检查url,组装协议,构成完整的url ? ? ? 3、浏览器进程通过进程间的通信(IPC)把url请求发送给网络进程 ? ? ? 4、网络进程收到URL会检查本地缓存是否缓存了该请求的资源,如果有则会中断请求直接返回缓存资源 ? ? ? 5、如果没有,网络进程想web服务器发起http请求(网络请求),请求流程如下 ? ? ? ? ? ? 5.1 进行DNS解析,根据域名获取服务器ip地址 ? ? ? ? ? ? 5.2 利用ip地址和服务器建立tcp连接 ? ? ? ? ? ? 5.3 建立连接之后浏览器会构建请求行、请求头等信息并把Cookie等数据附加到请求头中 ? ? ? ? ? ? 5.4 然后向服务器发送请求信息 ? ? ? ? ? ? 5.5 服务器收到请求信息后,会根据请求信息生成响应数据(包括响应行、响应头和响应体的信息 ),并发送给网络进程 ? ? ??6、网络进程解析响应流程如下 ? ? ? ? ? ? 6.1 检查状态码,如果是301或302则需要重定向,从响应头中Location字段中读取地址并 重新发送请求 ? ? ? ? ? ??6.2 检查状态码,是200检查响应类型Content-Type,字段值是text/html返回的就是html格式,? 并将响应头信息发送给浏览器进程 ? ? ??7、准备渲染流程如下 ? ? ? ? ?? ?7.1 当浏览器进程收到网络进程的响应头数据之后,便向渲染进程发起"提交文档"的消息,html数据 ? ? ? ? ? ? 7.2 渲染进程接收的"提交文档"的消息后,会和网络进程建立传输数据的"管道",开始传输数据 ? ? ? ? ? ? ?7.3 数据传输完毕后,会向浏览器进程发送"确认提交"的消息 ? ? ? ? ? ? ?7.4 浏览器接收到消息后,会更新包括安全状态、地址栏的URL、前进后退的历史状态,并更新Web页面,进入渲染阶段 ? ?? ?8、渲染阶段 ? ? ? ? ? ?渲染进程开始页面解析和子资源加载,构建dom数,加载完成后页面就渲染完成了。(加载中时浏览器标题上的图标周围会一直转圈)
|