浏览器的工作原理

人的尊严就在于,能够对我们看似前后矛盾的命运逻辑,反复的质疑。—— 英格玛·伯格曼《第七封印》

浏览器的主要功能

  • 浏览器的主要功能是将用户选择的web资源呈现出来,需要从数据库请求资源,并将其显示在浏览器窗口中,资源的格式通常是html,也包括PDF、image以及其他格式。用户用URL(Uniform Resource Identifier统一资源标识符)来指定请求资源的位置
  • HTML和CSS规范中规定了浏览器解释html文档的方式,由 W3C组织对这些规范进行维护,W3C是负责制定web标准的组织。
  • 虽然各大浏览器厂商纷纷开发自己的扩展,遵循的规则并不完善,为web开发者带来严重的兼容性问题,但是浏览器的用户界面差不多,常见的用户界面
    • 用来输入URL的地址栏
    • 前进、后退按钮
    • 书签选项
    • 用于刷新、暂停当前加载文档的刷新、暂停按钮
    • 用于到达主页的主页按钮

浏览器的主要构成

  • 用户界面——包括 地址栏、前进后退按钮、书签目录、(所看到的除了用来显示你所请求的页面的主窗口之外的部分)
  • 浏览器引擎——用来查询以操作渲染引擎的接口
  • 渲染引擎——显示请求的内容,例如如果请求的html,他负责解析html及css,并将解析后的结果显示出来
  • 网络——用来完成网络调用,例如http请求,它是平台无关的接口
  • UI后端——用来绘制类似组合选择框和对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口
  • JS解释器——用来解释执行js代码
  • 数据存储——属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据

主流程

渲染引擎在取得内容之后的基本流程:
解析html以构建dom树——>构件render树——>布局render树——>绘制render树

  • 解析 渲染引擎首先解析html,并将标签转化为内容树中的dom节点
  • 解析外部css文件以及style标签中的样式信息。
  • 这些样式信息以及html中的可见性指令用来构建render树
  • render树构建好了之后,将会执行布局过程,确定每个节点在屏幕上的确切坐标
  • 绘制 即遍历render树,并使用UI后端层绘制每个节点