浏览器工作原理. Browser-Principle

原文地址(EN) (Paul Irish) 简单翻译(CN)

主流浏览器 5个: IE、Firefox、Safari、Chrome 、Opera.

  • 完全开源: Chrome Firefox
  • 部分开源: Safari

浏览器主要功能:

  • 向服务器发出请求
  • 在浏览器窗口 展示你选择的网络资源.

    资源定义: HTML,文档,PDF,图片….
    资源位置: URL 统一资源标识符 指定.

浏览器解释&显示 .html 的方式: 由 HTML&CSS 规范指定.

HTML&CSS 规范 由: W3C (万维网联盟) 维护.

各种浏览器都没有完全遵从这些规范, 而是不断的开发自己独有的扩展程序, 这给网络开发 带来严重的兼容性问题.

浏览器主要组件

  • 用户界面
  • 浏览器引擎
  • 呈现引擎
  • 网络
  • 用户界面后端
  • JavaScript 解释器
  • 数据存储

各浏览器呈现引擎 

  • Chrome Safari: Webkit (开源)
  • Firefox: Gecko (自制)

 解析html → dom树 → 绘制dom树结构(这期间附加style rules)→ 布局dom数据(reflow) → 浏览器中绘制 → 呈现

在浏览器屏幕上显示 请求内容. 默认可以显示 html xml 文档 图片… 通过插件 还能显示PDF …

主要用途: 显示 使用css 格式化的HTML 内容和图片.

 解析引擎      通过解析器和词法分析器组合标记化算法

浏览器工作流程:

1. 呈现树构建

解析HTML 文档.把各标记逐个转化成“内容树”上的 DOM 节点。 同时也会解析外部 CSS 文件以及样式元素中的样式数据。 HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树。 呈现树包含多个带有视觉属性(如颜色和尺寸)的矩形。 这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

2. 布局处理阶段

呈现树构建完毕之后,进入“布局”处理阶段: 也就是为每个节点分配一个应出现在屏幕上的确切坐标。

3. 绘制阶段: 

呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来。 需要着重指出的是,这是一个渐进的过程。为达到更好的用户体验,呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后,就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时,呈现引擎会将部分内容解析并显示出来。

4. 解析:

呈现引擎中非常重要的一个环节.

解析文档: 把文档转化成有意义的结构. (可以让代码 理解和使用的结构.) 解析得到的结果 一般是: 代表了文档结构的节点树,也叫 解析树 语法树.

比如解析 2+3-1 这个表达式会返回下面的树:

解析 是以文档遵循的话音规则为基础的. 所有可解析的格式. 必须对应相应的语法.

解析器和词法分析器 解析过程: 词法分析 + 语法分析

  • 词法分析: 输入内容 分割成大量标记的过程. 标记 是语言中的词汇. 即 构成内容的单位. 相当于人类的单词

语法分析: 语法规则.

解析器通常将解析工作分给以下两个组件来处理:词法分析器(有时也称为标记生成器),负责将输入内容分解成一个个有效标记;而解析器负责根据语言的语法规则分析文档的结构,从而构建解析树。词法分析器知道如何将无关的字符(比如空格和换行符)分离出来。

解析: 能检查出语法错误. 语法错误 (缺少对应的标记) 一个迭代过程. 解析器会向词法分析器请求一个新标记,并尝试将其与某条语法规则进行匹配。如果发现了匹配规则,解析器会将一个对应于该标记的节点添加到解析树中,然后继续请求下一个标记。 如果没有规则可以匹配,解析器就会将标记存储到内部,并继续请求标记,直至找到可与所有内部存储的标记匹配的规则。如果找不到任何匹配规则,解析器就会引发一个异常。这意味着文档无效,包含语法错误。

解析通常是在翻译过程中使用的,而翻译是指将输入文档转换成另一种格式。编译就是这样一个例子。编译器可将源代码编译成机器代码,具体过程是首先将源代码解析成解析树,然后将解析树翻译成机器代码文档。

解析器 类型: 自上而下解析器和自下而上解析器

直观地来说,自上而下的解析器从语法的高层结构出发,尝试从中找到匹配的结构。而自下而上的解析器从低层规则出发,将输入内容逐步转化为语法规则,直至满足高层规则。

迭代

CSS 解析

解析器 把 CSS 文件 解析成 stylesheet 对象. 每个对象都包含css 规则对象. 规则对象包含 选择器 和 声明对象. …

脚本: 网络的模型是同步的. 网页制作者 希望 解析器 遇到 script 标记 时候 立即解析并执行脚本. 这时候文档的解析将停止, 直到脚本执行完毕. 如果 脚本是外部的. 那么解析过程会停止.直到脚本加载完毕.

也在 HTML4 和 HTML5 规范中进行了指定。作者也可以将脚本标注为“defer”,这样它就不会停止文档解析,而是等到解析结束才执行。HTML5 增加了一个选项,可将脚本标记为异步,以便由其他线程解析和执行。

预解析 在执行脚本时,其他线程会解析文档的其余部分,找出并加载需要通过网络加载的其他资源。通过这种方式,资源可以在并行连接上加载,从而提高总体速度。请注意,预解析器不会修改 DOM 树,而是将这项工作交由主解析器处理; 预解析器只会解析外部资源(例如外部脚本、样式表和图片)的引用。

样式表

样式规则 来源 外部样式表. HTML 可视化属性(映射到相关的样式规则) <pbgcolor=”blue”/>

CSS 框模型. 描述的是针对文档树中的元素而生成,并根据可视化格式模型进行布局的矩形框。