浏览器运行原理
一、浏览器简介
浏览器是指可以显示网页服务器或则文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与那些文件交互的一种软件。
浏览器的主要功能就是向服务器发出恳求，在浏览器窗口中展示您选择的网路资源。这里所说的资源通常是指 HTML 文档，也可以是 PDF、 图片或其他的类型。 资源的位置由用户使用URI（统一资源标符）指定。多年以来，各浏览器都没有完全遵照这种规范，同时还在开发自己独有的扩充程序，这给网路开发人员带来了严重的兼容性问题。 如今，大多数的浏览器都是或多或少地遵照规范。
HTML和CSS规范中规定了浏览器解释html文档的形式，由W3C组织对这种规范进行维护，W3C是负责拟定web标准的组织。
这些年来，浏览器厂商纷纷开发自己的扩充，对规范的遵守并不建立，这为web开发者带来了严重的兼容性问题。
但是，浏览器的用户界面则差不多，常见的用户界面元素包括：
目前使用的主流浏览器有五个：Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。
浏览器根据引擎分类：
Trident引擎：Internet ExplorerWebkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和SafariGecko引擎：FirefoxPresto引擎：早期Opera采用，后用webkit引擎。
二、浏览器的主要构成
浏览器的主要组件包括：
用户界面：包括地址栏、后退/前进按键、书签目录等，也就是你所看见的不仅拿来显示你所恳求页面的主窗口之外的其他部份。浏览器引擎：用来查询及操作渲染引擎的插口。渲染引擎：用来显示恳求的内容，例如，如果恳求内容为html，它负责解析html及css，并将解析后的结果显示下来。网络：用来完成网路调用，例如http请求，它具有平台无关的插口，可以在不同平台上工作。UI前端：用来勾画类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用插口，底层使用操作系统的用户插口。JS类库：用来解释执行JS代码。数据储存：属于持久层，浏览器须要在硬碟中保存类似cookie的各类数据，HTML5定义了web database技术，这是一种轻量级完整的客户端储存技术。
浏览器主要组件（如图）：
三、渲染引擎
渲染引擎的职责就是渲染，即在浏览器窗口中显示所恳求的内容。
默认情况下，渲染引擎可以显示html、xml文档及图片浏览器工作原理是怎样的，它也可以利用插件（一种浏览器扩充）显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式，将由专门一章讲解插件及扩充，这里只讨论渲染引擎最主要的用途——显示应用了CSS以后的html及图片。
渲染引擎简介：
Firefox、Chrome和Safari是基于两种渲染引擎打造的，Firefox使用Geoko——Mozilla自主研制的渲染引擎，Safari和Chrome都使用webkit。
渲染主流程：
渲染引擎首先通过网路获得所恳求文档的内容，通常以8K分块的形式完成。
下面是渲染引擎在取得内容以后的基本流程：
解析html以建立dom树 -> 构建render树 -> 布局render树 -> 绘制render树
渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的款式信息。这些款式信息以及html中的可见性指令将被拿来建立另一棵树——render树。
Render树由一些包含有颜色和大小等属性的圆形组成，它们将被根据正确的次序显示到屏幕上。
Render树建立好了以后，将会执行布局过程，它将确定每位节点在屏幕上的准确座标。再下一步就是勾画，即遍历render树，并使用UI后端层勾画每位节点。
值得注意的是，这个过程是逐渐完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成以后再去建立和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网路下载其余内容。
从图3和4中可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的低格元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称借助dom节点及款式信息去建立render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的鞋厂。下面将讨论流程中的各个阶段。
四、解析
既然解析是渲染引擎中一个十分重要的过程，我们将稍稍深入的研究它。首先简略介绍一下解析。
解析一个文档正式其转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果一般是抒发文档结构的节点树，称为解析树或语法树。
文法（Grammars）
解析基于文档根据的语法规则——文档的语言或格式。每种可被解析的格式必须具有由词汇及句型规则组成的特定的文法，称为上下文无关文法。人类语言不具有这一特点，因此不能被通常的解析技术所解析。
解析器－词法分析器（Parser－Lexer combination）
解析可以分为两个子过程——语法剖析及词法剖析
词法剖析就是将输入分解为符号，符号是语言的词汇表——基本有效单元的集合。对于人类语言来说，它相当于我们字典中出现的所有词组。
语法剖析指对语言应用语法规则。
解析器通常将工作分配给两个组件——词法分析器（有时也叫分词器）负责将输入分解为合法的符号，解析器则按照语言的语法规则剖析文档结构，从而建立解析树，词法分析器晓得如何跳过空白和换行之类的无关字符。
解析过程是迭代的，解析器从词法分析器处取到一个新的符号，并试着用这个符号匹配一条语法规则，如果匹配了一条规则，这个符号对应的节点将被添加到解析树上，然后解析器恳求另一个符号。如果没有匹配到规则，解析器将在内部保存该符号，并从词法分析器取下一个符号，直到所有内部保存的符号才能匹配一项句型规则。如果最终没有找到匹配的规则，解析器将抛出一个异常，这意味着文档无效或是包含句型错误。
转换（Translation）
很多时侯，解析树并不是最终结果。解析通常在转换中使用——将输入文档转换为另一种格式。编译就是个反例，编译器在将一段源码编译为机器码的时侯，先将源码解析为解析树，然后将该树转换为一个机器码文档。
解析器类型（Types of parsers）
有两种基本的解析器——自顶向下解析及自底向下解析。比较直观的解释是，自顶向下解析，查看句型的最高层结构并试着匹配其中一个；自底向下解析则从输入开始，逐步将其转换为语法规则，从底层规则开始直至匹配高层规则。
自底向下解析会扫描输入直至匹配了一条规则，然后用该规则代替匹配的输入，直到解析完所有输入。部分匹配的表达式被放置在解析堆栈中。
自底向下解析器称为shift reduce解析器，因为输入往右联通（想象一个表针首先指向输入开始处，并往右联通），并逐步简化为语法规则。
自动化解析（Generating parsers automatically）
解析器生成器这个工具可以手动生成解析器，只须要指定语言的文法——词汇表及语法规则，它就可以生成一个解析器。创建一个解析器须要对解析有深入的理解，而且自动的创建一个由较好性能的解析器并不容易，所以解析生成器很有用。Webkit使用两个著名的解析生成器——用于创建语法分析器的Flex及创建解析器的Bison（你可能接触过Lex和Yacc）。Flex的输入是一个包含了符号定义的正则表达式，Bison的输入是用BNF格式表示的语法规则。
HTML解析器（HTML Parser）
HTML解析器的工作是将html标示解析为解析树。
HTML文法定义（The HTML grammar definition）
W3C组织拟定规范定义了HTML的词汇表和句型。
非上下文无关文法（Not a context free grammar）
正如在解析简介中提及的，上下文无关文法的句型可以用类似BNF的格式来定义。
不幸的是，所有的传统解析方法都不适用于html（当然我提出它们并不只是由于好玩，它们将拿来解析css和js），html不能简单的用解析所需的上下文无关文法来定义。
Html有一个即将的格式定义——DTD（Document Type Definition文档类型定义）——但它并不是上下文无关文法，html更接近于xml，现在有很多可用的xml解析器，html有个xml的变体——xhtml，它们间的不同在于，html更包容，它容许忽视一些特定标签，有时可以省略开始或结束标签。总的来说，它是一种soft句型，不像xml沉闷、固执。
显然，这个看起来很小的差别却带来了很大的不同。一方面，这是html流行的诱因——它的包容使web开发人员的工作愈加轻松，但另一方面，这也使很难去写一个低格的文法。所以，html的解析并不简单，它既不能用传统的解析器解析，也不能用xml解析器解析。
HTML DTD
Html适用DTD格式进行定义，这一格式是用于定义SGML家族的语言，包括了对所有容许元素及它们的属性和层次关系的定义。正如上面提及的，html DTD并没有生成一种上下文无关文法。
DTD有一些变种，标准模式只遵循规范，而其他模式则包含了对浏览器过去所使用标签的支持，这么做是为了兼容先前内容。最新的标准DTD在
DOM
输出的树，也就是解析树，是由DOM元素及属性节点组成的。DOM是文档对象模型的简写，它是html文档的对象表示浏览器工作原理是怎样的，作为html元素的外部插口供js等调用。
树的根是“document”对象。
