1.用户输入
当用户在地址栏中输入一个查询关键字时,地址栏会判断输入的关键字是搜索内容,还是请求的url
- 如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的url
- 如果判断输入内容符合url规则,比如输入的time.geekbang.org,那么地址栏会根据规则,把这段内容加上协议,合成为完整的url
当用户输入关键字并键入回车之后,这意味着当前页面即将要被替换成新的页面,在这个流程继续之前,浏览器还给了当前页面一次执行beforeupload事件的机会,beforeupload事件允许页面在退出之前执行一些数据清理操作,还可以询问用户是否要离开当前页面,比如当前页面可能有为提交的表单
标签页进入加载状态,但是页面并没有立马被替换成为新的页面,因为需要等待提交文档阶段,页面内容才会被替换
url请求过程
接下来,进入页面资源请求过程。这是浏览器进程会通过进程间通信(ipc)把url请求发送进网络进程,网络进程接收到url请求后,会在这里发起真正的url请求流程。
首先,网络进程会查找本地缓存是否缓存了该资源,如果有缓存资源,那么直接返回资源给浏览器进程;如果在缓存中没有查到资源,那么直接进入网络请求流程。这请求前第一步是dns解析,以获取域名的服务器的ip地址,如果请求协议是https,那么需要建立tls链接
接下来就是ip地址和服务器建立tcp链接。链接建立之后,向服务器发送请求信息,服务器接收到请求信息后,会根据请求信息生成相应数据并发给网络今晨g 。多个页面同时运行在同一个渲染进程中(chrome的默认策略是,每个标签对应一个渲染进程,但是如果从一个页面打开了另一个新页面,而新页面和当前页面属于统一站点的话,那么新页面会复用父页面的渲染进程。)
同一站点定义为:定义为根域名加上协议,还包含了该根域名下的所有子域名和不同的端口
1. https://time.geekbang.org
2. https:www.geekbang.org
3. https://www.geekbang.org:8080
//他们都属于同一站点,因为他们协议都是https,而且根域名也都是geekbang.org
若新页面和当前页面不属于同一站点,那么新页面会使用一个新的渲染进程
- 提交文档
渲染进程准备好之后,通知浏览器进程,可以替换当前旧的文档了,具体是以下几个步骤
- 首先“提交文档”的消息是由渲染进程发出给浏览器继承的,这是告诉浏览器进程,它准备好了,可以执行解析渲染等后续操作了
- 浏览器进程接收到当前渲染进程的“提交文档”消息后,便开始清理当前的旧文档,然后发出“确认提交”的消息给渲染进程。同时浏览器进程会更新浏览器界面状态,包括安全状态,地址栏的url,前进后退的历史状态,并更新web页面
- 当渲染进程收到“确认提交”的消息后,便开始执行解析数据、下载字资源等后续流程,并时实向浏览器进程更新最新渲染的状态
导航完成状态,这也就解释了为什么浏览器的地址栏里面输入了一个地址后,之前的页面没有立马消失,而是要加载一会儿才更新页面
- 渲染阶段
一旦文档被提交,渲染进程便开始页面解析和字资源加载。一旦页面生成完成,渲染进程会发送一个消息给浏览器进程,浏览器接收到消息后,会停止标签图标上的加载动画