2020-05-19从输入url到页面展示
-
1 输入url过程
浏览器进程检查url,组装协议,构建完成的url -
2 url请求过程
(1)浏览器进程通过通信进程(IPC)把url给网络进程。
(2)网络进程接收到url请求后检查本地是否有缓存。
(2.1) 如果有直接将该资源返回给浏览 器进程
(2.2) 如果没有,网络进程根据DNS解析服务器的IP地址,利用IP地址建立tcp连接,连接后,浏览器端构建 请求行请求头等信息,并把该域名相关的cookie等数据附加在请求头中,向服务器发送请求信息
(2.3)服务器响应后,网络进程接收到响应头和响应信息,并解析响应内容
(3)网络进程解析响应流程
(3.1) 检查状态码,如果是301/302,则需要重定向,从Location自动中读取地址,重新进行第2步
(301/302跳转也会读取本地缓存吗?这里有个疑问),如果是200,则继续处理请求。
(3.2)200响应处理:
检查响应类型Content-Type,如果是字节流类型,则将该请求提交给下载管理器,该导航流程结束,不再进行
后续的渲染,如果是html则通知浏览器进程准备渲染进程准备进行渲染。 -
3 准备渲染过程
浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同,如果相同,则复用原来的进程,如果不同,则开启新的渲染进程 -
4 提交文档过程
导航完成状态
提交文档;浏览器进程将网络进程接收到的html数据提交给渲染进程;过程如下
4.1 浏览器进程接收到网络进程的响应头数据之后,向渲染进程发起 “提交文档" 的消息;
4.2 渲染进程接收到 ”提交文档" 的消息后便和网络进程建立传输数据的 “管道”
4.3 数据传输完毕之后,渲染进程就返回 "确认提交"的消息给浏览器进程
4.4 浏览器进程在收到 “确认提交 ”后,便更新浏览器界面状态包括了安全状态、地址栏的 URL、前进后退的历史状态,并更新 Web 页面。
-
5 渲染页面过程
渲染进程对文档进行页面解析和子资源加载,HTML 通过HTM 解析器转成DOM Tree(二叉树类似结构的东西),CSS按照CSS 规则和CSS解释器转成CSSOM TREE,两个tree结合,形成render tree(不包含HTML的具体元素和元素要画的具体位置),通过Layout可以计算出每个元素具体的宽高颜色位置,结合起来,开始绘制,最后显示在屏幕中新页面显示出来