整个过程包含两个子过程:导航和渲染
一、导航
- 用户输出url并回车
- 浏览器过程查看url,组装协定,形成残缺的url
- 浏览器过程通过过程间通信(IPC)把url申请发送给网络过程
- 网络过程接管到url申请后查看本地缓存是否缓存了该申请资源,如果有则将资源返回给浏览器过程
如果没有,网络过程向服务器发动http申请(网络申请),申请过程如下:
进行DNS解析,获取服务器的ip地址,端口
- 本地域名服务器查看本地缓存
- 根域名服务器
- 顶级域名服务器
- 权威域名服务器
- 利用ip地址和端口构建过程间通信的接口socket套接字,后续TCP端到端的传输的端也是指的是socket套接字
- 建设tcp连贯(三次握手)
- 结构申请行、申请头和申请体,利用建设好的tcp连贯发送构建好的申请信息
- 服务器收到申请信息,结构响应行、响应头和响应体,利用建设好的tcp连贯发送给客户端
- 客户端浏览器的网络过程接管响应头和响应信息,并解析响应内容
网络过程解析响应流程
- 查看状态码,如果是301/302,则须要重定向,从Location主动读取地址,从新进行第4步操作,如果是200,则持续解决申请
200响应解决
- 查看响应的Content-Type,如果是字节流类型,则将该申请提交给下载管理器,该导航流程完结,不再进行后续的渲染。如果是text/html类型,则告诉浏览器过程筹备渲染过程筹备进行渲染
筹备渲染过程
- 浏览器过程查看以后的url是否和之前关上的页面的url主域名是否雷同,如果雷同,则复用之前页面的渲染过程。如果不同,则创立新的渲染过程
传输数据,更新状态
- 渲染过程筹备好后,浏览器过程向渲染过程发送“提交文档”信号
- 渲染过程接管到信号后建设“管道”与网络过程进行数据的传输
- 数据传输结束后,渲染过程发送“确认提交”信号给浏览器过程
- 浏览器过程接管到确认信号后更新浏览器界面的状态:平安信息、地址栏url、后退后退的历史状态、更新web页面等
二、渲染
- 渲染过程将 HTML 内容转换为可能读懂的 DOM 树构造。(应用栈来实现,遇到“<p"就入栈,遇到"</p"就出栈
- 渲染引擎将 CSS 样式表转化为浏览器能够了解的 styleSheets,计算出 DOM 节点的款式。结构渲染树。
- 创立布局树,并计算元素的布局信息。
- 对布局树进行分层,并生成分层树。
- 为每个图层生成绘制列表,并将其提交到合成线程。
- 合成线程将图层分成图块,并在光栅化线程池中将图块转换成位图。
- 合成线程发送绘制图块命令 DrawQuad 给浏览器过程。
- 浏览器过程依据 DrawQuad 音讯生成页面,并显示到显示器上。