浏览器的基本职责是把web资源显示出来,这些资源包括网页,图片。借助一些插件甚至能呈 现pdf和视频等。这些资源在网络上都是以URI标示出来的。

基础架构

浏览器一般有下面的基础架构:

  1. 图形界面。浏览器的界面元素,快进、后退、关闭等操作元素,还有菜单栏,甚至窗体本 身。
  2. 浏览器引擎。通过这个引擎去查询访问渲染引擎。
  3. 渲染引擎。渲染和绘制网页元素。
  4. 网络。负责网络请求。
  5. UI后端。绘制基础组件,它提供平台外观的接口,本身则会按照当前操作系统的接口实现。
  6. js引擎。进行解析JavaScript。
  7. 数据存数。管理需要的本地存储方案例如cookie。html5还定义了一些web数据库,也在这 里帮你实现。

浏览器基础架构

渲染引擎

对于浏览器,渲染引擎是它的基因,我们常根据渲染引擎对浏览器进行分类:

  • Webkit (safari, chrome, opera)
  • Gecko (firefox)
  • MSHTML (ie)

不同的渲染引擎对同网页的渲染结果可能不同。虽然业界有统一的标准来规范它(w3c),但 是实践总是走在理论前,并且各大厂商对这些规范的理解也不一致,所以导致了同一规范的 不同结果,最终导致了渲染外观也不一样,前端工程师必须对这种不一样进行代码上的兼容。

虽然各有不同,但是大体上,渲染引擎还是以这样的方式运行的:

首先从网络层得到相应的html,解析html得到dom树。然后根据dom树再加上样式生成对应的 render树,最总渲染树通过ui后端把结果显示出来。

解析html

在网络层得到html后,渲染引擎会对标签逐个解析,生成对应的dom,如果碰到外联资源,会 异步加载这些元素,例如图片、样式。但是因为js能操作dom元素,如果这时js对dom进行删 除或者添加,那么dom树就还得重新解析,所以,浏览器对于js是同步加载的。

还有一种情况,如果js操作依赖相应的样式,这时候有会不好使了,所以,浏览器就设定在 下载样式的时候,脚本解析是被阻塞的。

所以,我们为了体验,会把样式放到顶部,脚本会在底部。

dom树

dom即文档对象模型,是访问html元素的接口。在解析每个html标签元素的时候会根据DTD( 文档类型定义)来生成对应的dom,文档类型定义常用的HTML4.0,常说的HTML5其实就是最新 定义,在不同的文档类型定义下dom对象所含的属性和方法会有不同。在得到html元素对应的 dom后,会根据元素的子父级关系生成对应的树状结构,这个就是dom树。

render树

render树(渲染树),如果说dom是给外部程序员用的,那么render树则是给系统自己用的。 在生成dom树的时候,浏览器还会解析相应的样式,并对需要渲染的dom生成对应的render节 点。例如看不见的元素就是不需要生成对应的render节点,例如input:hidden,head,还有 display:none的元素。并且最终根据视觉前后顺序进行排序,跟dom树无关。