整个过程包含两个子过程:导航 和渲染
一、导航
- 用户输出 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 音讯 生成页面,并显示到显示器上。