实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。

<input type="text" x-webkit-speech />
相关的属性设置：
lang
设置语言种类：
<input type="text" x-webkit-speech lang="zh-CN" />
onwebkitspeechchange
语音输入事件，当发声语音改变时触发：
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

x-webkit-grammar
语音输入语法，”builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如「的」
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
还有个值：”builtin:translate”看到taobao在用，但目前还不清楚是什么意义，有时间再仔细看看W3C的文档。

测试了下效果，语音识别率还不错，但中英夹杂的时候就很悲剧了，而且该服务需要走google的服务器所以有时响应速度很慢，另外在mac中遇到提示“麦克风无法使用”的情况，猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性；比较期待能在手机浏览器上实现这个功能，可以做一些比较有趣的应用。

相关资料：
http://www.w3.org/TR/capture-api/
http://www.w3.org/TR/xhtml+voice/
http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html

一、简介

浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。

1.将讨论的浏览器
今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。
本文将基于一些开源浏览器的例子——Firefox、 Chrome及Safari，Safari是部分开源的。
根据W3C（World Wide Web Consortium 万维网联盟）的浏览器统计数据，当前(2011年9月)，Firefox、Safari及Chrome的市场占有率综合已快接近50％。(原文为2009年10月，数据没有太大变化)因此，可以说开源浏览器将近占据了浏览器市场的半壁江山。

2.浏览器的主要功能
浏览器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier 统一资源标识符)来指定所请求资源的位置。
HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。
HTML规范的最新版本是HTML4(http://www.w3.org/TR/html401/)，HTML5还在制定中(译注：两年前)，最新的CSS规范版本是2(http://www.w3.org/TR/CSS2)，CSS3也还正在制定中(译注：同样两年前)。
这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web开发者带来了严重的兼容性问题。
但是，浏览器的用户界面则差不多，常见的用户界面元素包括：

• 用来输入URI的地址栏
• 前进、后退按钮
• 书签选项
• 用于刷新及暂停当前加载文档的刷新、暂停按钮
• 用于到达主页的主页按钮

奇怪的是，并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂商之间相互模仿和不断改进得结果。

HTML5并没有规定浏览器必须具有的UI元素，但列出了一些常用元素，包括地址栏、状态栏及工具栏。还有一些浏览器有自己专有得功能，比如Firefox得下载管理。更多相关内容将在后面讨论用户界面时介绍。

3.浏览器的主要构成
浏览器的主要组件包括：

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

上图：浏览器主要组件

需要注意的是，不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。
对于构成浏览器的这些组件，后面会逐一详细讨论。

4.组件间的通信(Communication between the components)
Firefox和Chrome都开发了一个特殊的通信结构，后面将有专门的一章进行讨论。

二、渲染引擎(The rendering engine)

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。
默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件(一种浏览器扩展)显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

1.渲染引擎(Rendering engines)
本文所讨论得浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Gecko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。
Webkit是一款开源渲染引擎，它本来是为linux平台研发的，后来由Apple移植到Mac及Windows上，相关内容请参考http://webkit.org。

2.主流程(The main flow)
渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。
下面是渲染引擎在取得内容之后的基本流程：
解析html以构建dom树->构建render树->布局render树->绘制render树

上图：渲染引擎基本流程

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

3.主流程图(Main flow examples)

上图：webkit主流程

上图：Mozilla的Geoko 渲染引擎主流程

从上两张图中可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。下面将讨论流程中的各个阶段。

4.语法解析与构造DOM树(Parsing and DOM tree construction)

4.1 解析(Parsing－general)
解析原理介绍，略……

4.2 HTML解析器(HTML Parser)
HTML解析器的工作是将html标识解析为解析树。

4.2.1HTML文法定义(The HTML grammar definition)
W3C组织制定规范定义了HTML的词汇表和语法。

4.2.2 非上下文无关文法(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解析器解析。

4.2.3 HTML DTD
Html适用DTD格式进行定义，这一格式是用于定义SGML家族的语言，包括了对所有允许元素及它们的属性和层次关系的定义。正如前面提到的，html DTD并没有生成一种上下文无关文法。
DTD有一些变种，标准模式只遵守规范，而其他模式则包含了对浏览器过去所使用标签的支持，这么做是为了兼容以前内容。最新的标准DTD在http://www.w3.org/TR/html4/strict.dtd

或者是现在大家都比较关注的Apple iPhone4S产品展示效果原理：

有兴趣的话可以安装一个试试：
安装地址：https://addons.mozilla.org/en-US/firefox/addon/tilt/
想了解Tilt更多信息可以看这里：http://blog.mozilla.com/tilt/

总的来说对Tilt比较期待，希望它能持续更新，添加更多更丰富的面向开发人员的功能。

<!-- HTML 代码 -->
<ul>
    <li data-ID="tab1">trigger1</li>
    <li data-ID="tab2">trigger2</li>
</ul>
<div>
    <p id="tab1">tab1 content</p>
    <p id="tab2">tab2 content</p>
</div>
/* CSS代码 */
/* 当li处在:hover状态时，拥有 id 且与 li 的 data-ID 属性值相同的 p 元素应用样式 */
li:hover /data-ID/ p { border:2px solid #609060; }

3.匹配伪类 E:matches()
匹配伪类语法为div:matches(s1, s2)，表示当div匹配 s1 或 s2 时应用样式，例如：
/*当 label 的状态为 hover 或 focus 时，改变其子元素 input 边框颜色*/
label:matches(:hover, :focus) input{ border:1px solid #ff6600; }
注意：只有 compound selectors 可以应用于 :matches() ，它自己不能嵌套自己，所以像 :not(): :matches(:matches(…)) 和 :not(:matches(…)) 都是不合法的。W3C解释»

4.否定伪类 E:not()
E:not()在CSS3中就有：button:not([DISABLED])，在CSS4中增加了E:not(s1,s2)语法，表示E不匹配 s1 或 s2 时应用样式，例子与E:matches()类似。
注意：伪元素不能应用否定伪类

5.本地链接伪类 E:local-link
该伪类多应用于a标签上，并且可以增加一个数字参数 a:local-link(n)，n表示匹配目录的级数(path/)，序数从 0 开始，例子：

<!-- HTML代码 -->
<a href="http://www.example.com">link1</a>
<a href="http://www.example.com/2011">link2</a>
<a href="https://www.example.com/2011/10">link3</a>
<a href="http://www.example.com/2011/10/09">link4</a>
<a href="http://example.com/2011/03">link5</a>

/* CSS代码 */
a:local-link { color:black;}
a:local-link(0) { color:blue;}
a:local-link(1) { color:grey;}
a:local-link(2) { color:orange;}
a:local-link(3) { color:YellowGreen;}

如果文档的URL为https://www.example.com，那么CSS最后实现的颜色为：
link1 没有目录级数，匹配 a:local-link(0) { color:blue;}
link2 一级目录，匹配a:local-link(0)，a:local-link(1) 注意：样式被a:local-link(1)覆盖。
link3 二级目录，匹配a:local-link(0)，a:local-link(1)，a:local-link(2)
link4 三级目录，匹配a:local-link(0)，a:local-link(1)，a:local-link(2)，a:local-link(3)
link5 因域名不同所以没有匹配样式。

6.默认选项伪类 :default
选中多个子元素中的默认元素。比如 select 中的默认 option，允许有多个 :default。比如在允许多选的 select 中，有多个 :default 元素。

option:default { background:#ffc; }

7.表单限制伪类 :required、：optional
匹配表单项中必选项与可选项。

input:required { color:#f30; }

8.可读可写伪类 :read-write、:read-only
大部分元素都是可读不可写的，所以都是 :read-only；像 text input 这些值可以改变的，和 HTML5 中设置了 contenteditable 的元素其本身是可改变的，这些被认为是具有写属性的，所以是 :read-write

:read-write { font-family: Georgia; }

9.尚不明确的选择器
状态伪类 :current、:pass、:future
状态选择器目前定义不明。是指一切在时间线内的东西。可以看一下这篇吐槽，说是在 twitter 等的回复都说对这个规范都是完全不知所言。按理来说，应该是在页面的有时间线的 canvas, video, audio, 屏幕阅读等的内容上应用样式：

/* 时间线内当前被处理（选中）的元素，如果是 p 或者 li 背景变成浅黄色 */
:current(p, li){ background:#ffc; }

:pass 表示时间线上的前一个元素，如果不在时间线内，则指其前一个元素（相当于 DOM 的 prevSibling）。
:future 表示时间线上的后一个元素，如果不在时间线内，则指其后一个元素（相当于 DOM 的 nextSibling）。
:vaild、:invaild / :in-range、:out-of-range
官方文档表示写得很不容易懂。数据和范围，估计都说是 [XFORMS10] 和 [HTML5] 中的一些内容。

参考文章：
Selectors Level 4 – W3C Working Draft 29 September 2011
CSS4 Preview – Selectors
[selectors4] “time-dimensional canvas”?
CSS4 选择器

引发 reflow 的一些因素：

1. 调整窗口大小（Resizing the window）
2. 改变字体（Changing the font）
3. 增加或者移除样式表（Adding or removing a stylesheet）
4. 内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in an input box）
5. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
6. 操作 class 属性（Manipulating the class attribute）
7. 脚本操作 DOM（A script manipulating the DOM）
8. 计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
9. 设置 style 属性的值 （Setting a property of the style attribute）
10. 未指定图片宽高，载入时会使页面reflow(补充)

对于减少 reflow 优化性能的建议：

1. 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)（Change classes on the element you wish to style (as low in the dom tree as possible)）
2. 避免设置多项内联样式（Avoid setting multiple inline styles）
3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
4. 权衡平滑和速度（Trade smoothness for speed）
5. 避免使用 table 布局（Avoid tables for layout）
6. 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）
7. 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
8. 尽量减少 CSS 规则，去除未用到的 CSS。
9. 如果做复杂的表现变化，如动画，让它脱离文档流。用绝对定位或 fixed 定位来完成。
10. 避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。

相关资料
Reflows & Repaints: CSS Performance making your JavaScript slow?
Notes on HTML Reflow
形象化的reflow