您好,欢迎阅读 Firefox 4 beta 9 的文章。如果您正在阅读本文,那么您一定对我们为这款名为 Firefox 4 的出色浏览器最新 Beta 版本所准备的功能感兴趣。我们正在接近 Firefox 下一个版本的开发周期尾声,我认为有必要全面概述我们为 Web 开发者准备的所有功能,与 Firefox 3.6 相比。如果您阅读过之前的版本,其中一些内容可能看起来很熟悉。但这是一个新的 Beta 版本,我们一直在努力,所以每个人都能在这里找到新内容。
性能
Firefox 4 的主要主题之一是性能。因此,我们在改进浏览器整体性能方面做了大量工作,从启动时间到 JavaScript 性能,再到交互性能,以及使用户界面更易于使用和更高效。话虽如此,以下是在 Beta 9 中我们为改进性能所做的一些工作。
JaegerMonkey 已上线。
您可能已经注意到它非常快。这是全球首款第三代 JavaScript 引擎,使用类似于其他浏览器中引擎的基线 JIT 技术,并通过 Firefox 3.6 中的跟踪引擎提升了一个层次。因此,我们在 Sunspider 和 V8 等基准测试中具有竞争力,但在我们期望在下一代 Web 应用程序集中看到的大量事物中,我们也很快,因此有了Kraken。
硬件加速
Firefox 4 通过结合使用 D2D、DX9 和 DX10,支持在 Windows 7 和 Windows Vista 上进行完全硬件加速。这使我们能够加速从 Canvas 绘制到视频渲染的所有操作。Windows XP 用户也将享受许多操作的硬件加速,因为我们正在使用新的图层基础架构以及 DX9。当然,OSX 用户也拥有出色的 OpenGL 支持,因此我们也覆盖了这一点。
隔间
Beta 7 中添加的隔间是我们添加到 Firefox 中的基础架构,用于提高性能,为安全性提供更好的基础,并且从长远来看,由于其对垃圾回收的积极影响,可以提高响应速度。(请注意,隔间的一些部分尚未上线。)如果您想了解隔间为何如此重要,请查看Andreas Gal 关于此主题的精彩文章。他很好地解释了它们是什么以及它们是如何工作的。
改进的 DOM 性能和样式解析
我们也对整体 DOM 和样式解析性能进行了大量改进。尽管 JavaScript 如今获得了大量关注,但事实证明,在页面加载和交互性能方面,DOM 和样式解析(通常作为文档重排的一部分)通常比 JavaScript 对页面性能的影响更大。因此,我们在 Firefox 4 中看到了该领域的全面改进。在一些测试中,我们的速度比 Firefox 3.6 快 2 倍。
JavaScript 类型化数组
如果您正在使用 JavaScript 处理数据并且想要处理低级数据,Firefox 现在支持JavaScript 中的原生类型化数组。如果要进行 WebGL 或图像处理,这可能会极大地改变项目的处理速度。
此外,如果要从 XHR 请求获取数据,则可以使用JavaScript 原生类型化数组通过mozResponseArrayBuffer
快速处理数据。
JavaScript 动画调度 API
我们现在支持允许您从 JavaScript 调度动画的事件。这样做意味着当底层渲染引擎不会绘制动画时,您不会浪费 CPU 和电池来尽可能快地运行动画。(Gecko 现在有一个用于所有绘制的内部计时器,并且将以最高 60fps(人类感知的极限)的速度渲染。它还会将此计时器降低到 1fps 以用于不在前台的选项卡。请使用它。)这对于构建库的人员最有帮助,但您应该意识到在 Gecko 中有一种更好的动画方法。
保留图层
如上所述,Firefox 现在有一个用于改进多种类型网页的绘制性能的内部图层系统。图像、固定背景、内联视频等现在被渲染到一个内部图层,然后以可以利用硬件加速的方式与网页的其他部分合成。这提高了许多网页的页面加载时间和交互性能。
异步插件绘制
在 Windows 和 Linux 上,我们现在异步绘制插件。在以前的版本中,当我们想要绘制包含插件的网页时,我们必须向插件请求要绘制的数据。如果插件速度缓慢或挂起,则会导致浏览器感觉缓慢。现在,我们能够异步获取这些数据,这意味着浏览器的整体响应能力应该会得到提高。
大大改进的缓存
Firefox 4 具有大大改进的磁盘缓存。此磁盘缓存应导致更快的启动性能和运行时性能。但为什么在这里提及它?我们的预期是,随着我们根据最终用户硬盘上的可用空间动态设置缓存大小,网站所有者应该会看到更高的缓存命中率。
WebGL
Firefox 4 现在默认启用了 WebGL。基于 Vladimir Vukićević 最初的3D Canvas 工作,这在浏览器中得到了广泛实施。WebGL 规范正朝着 1.0 版本发布的快速轨道发展,我们非常高兴看到它在现实世界中得到使用。
想要一个演示?试试惊人的飞行员,我们结合了 Firefox 4 中的多项技术——HTML5 视频、音频 API,以及来自网络的实时数据。
JavaScript
Firefox 4 中的新 JaegerMonkey 引擎不仅速度更快,而且还具有一些新技巧。我们的目标是为开发人员带来新工具,这包括发展 JavaScript 语言。以下是在我们进行其他改进的两个示例
ECMAScript 5
Firefox 4 Beta 9 包含了新版 JavaScript 语言的大部分内容。我们使用 Firefox 4 的目标是为 ECMAScript 5 提供行业领先的支持,包括新的strict
模式。您可以跟踪我们在ES5 错误上的进度。
Web 控制台
Firefox 4 将包含Web 控制台。这是一个新工具,可以让您在网页运行时对其进行检查,查看网络活动,查看使用console.log
记录的消息,查看页面 CSS 的警告以及许多其他内容。
请注意,这是我们将直接包含在 Firefox 4 中的内容。它不是一个附加组件。
(Firebug 也将为最终的 Firefox 4 版本做好准备。)
HTML5
Firefox 一直以来都对 HTML5 具有出色的支持,甚至早在 Firefox 3.5 时代就已经如此。Firefox 4 在此历史基础上构建了一系列新的与 HTML5 相关的功能。
表单
我们已开始实施大部分 HTML5 表单。我们包括对新输入类型、datalist
支持、新的输入属性(如autofocus
和placeholder
)、解耦表单、表单选项、验证机制、约束验证以及将它们全部绑定在一起的新 CSS 选择器的支持。有一个关于 Hacks 网站上的精彩文章介绍了 Firefox 4 中的 HTML5 表单支持。如果您想了解更多信息,请查看它。
解析器
Firefox 4 包含一个支持 HTML5 的解析器。此解析器带来了一些新功能,最值得注意的是内联 SVG,而且还通过在自己的处理器上运行解析算法来提高性能。它还使我们的解析器算法更接近标准,并为跨浏览器的一致解析奠定了基础。
对 WebM 的支持
Firefox 4 包含对WebM的支持,WebM 是一种新的免版税网络视频格式。如果您加入他们的HTML5 测试版,它可以在 YouTube 上使用。如果您使用他们新的iframe 嵌入 API,它也可以与嵌入式 YouTube 视频一起使用。(加入测试版并查看本文底部的示例。)
视频缓冲 API
我们现在支持 HTML5 视频的buffered 属性。这意味着可以为用户提供有关已缓冲多少视频的准确度量,而无需根据下载速度和您在流中的当前位置进行猜测。
视频“预加载”支持
我们已“使用新的“preload”属性替换了 HTML5 视频的“autobuffer”属性。此属性可以让您更好地控制如何在页面上包含视频时预缓冲视频,而不是 Firefox 3.5 中包含的旧的开/关系统。
历史 pushState 和 replaceState
Firefox 4 现在支持 HTML5pushState 和 replaceState 历史修改调用。这些允许您创建或修改浏览器导航历史记录。对于可能希望使用 URL 后面的哈希生成历史记录条目的应用程序(例如,用于基于 HTML 的幻灯片),这些非常有用。其他网站一直在使用这些 API 来隐藏历史信息,以便网站内部导航辅助工具不会作为 HTTP 指令的一部分显示。
音频采样和生成 API
Firefox 4 包含Firefox 音频数据 API。此 API 允许您读取、修改和写入音频和视频元素中的数据。现在人们正在广泛地试验它,并且人们正在用它构建一些非常漂亮的东西。
DOM
除了我之前提到的性能改进之外,Firefox 4 还包含大量新的 DOM 功能。
为文件上传控件添加了对 .click() 的支持
您现在可以对隐藏的文件控件调用.click()
以显示平台文件上传窗口小部件。这意味着您不必公开(丑陋的)文件上传控件;相反,您可以构建自己的控件。如果您将其与新的文件 API和进度事件结合使用,您将获得非常不错的文件上传体验。
支持 File API 中的 .slice
我们现在支持Blob API 及其附带的 .slice API。这对于希望处理来自 JavaScript 的其他大型 File 对象的小部分内容的人员很有用。您不再需要将整个文件加载到内存中。
对于希望可靠地上传大型文件的人员也很有用。使用一些服务器和 JS 代码,您现在可以将大型文件拆分为小部分并上传这些块,包括重试失败的部分,甚至并行上传多个部分。
支持 File API URL
我们现在支持File API 的.url
属性。这使您可以获取通过 File API 获取的对象并将其用于图像、视频、HTML 或其他受 URL 驱动的对象。
触摸和多点触摸事件
Firefox 4 支持触摸和多点触摸事件,并将其公开给 DOM。Windows 7 系统上提供了对此功能的支持。
检测点击以触摸
您现在可以使用mozInputSource属性来判断是鼠标还是手指生成了事件。这对于触摸和多点触摸事件很有用,并且可以构建将触摸和鼠标输入区别对待的应用程序。
IndexedDB
Firefox 4 将包含IndexedDB的超早期版本。这种新兴的本地存储标准仍在不断变化,并且在稳定之前将使用私有前缀。我们有一些关于 IndexedDB 的早期API 文档,但是 Firefox 4 中的规范和实现自上次更新文档以来都发生了变化。随着我们越来越接近发布日期,我们将更新文档并详细讨论实现。同时,您可以阅读IndexedDB 入门指南以概述如何使用 IndexedDB API。
FormData
Firefox 4 包含对新的FormData对象的支持,这使得与 HTML 表单的交互更容易。它还启用了一些新功能,例如,通过 File API 轻松上传作为表单一部分的文件。
SVG 动画和 SMIL
在 Firefox 4 中,您现在可以使用SMIL 对 SVG 进行动画处理。
SVG 作为图像和 CSS 背景
您现在可以使用 SVG 作为<img>标签的源。您甚至可以使用 SMIL 对它们进行动画处理。您还可以将 SVG 用作 CSS 中的背景。
获取 Canvas 作为 File 对象
许多人希望将 Canvas 作为文件对象用于上传和其他目的。您现在可以使用Canvas 上的mozGetAsFile()
方法,它将返回一个图像文件。
可调整大小的文本区域
如果你一直在使用测试版,你可能已经注意到文本区域现在默认可调整大小。你可以使用新的 resize
CSS 属性来禁用此功能。
CSS
Firefox 4 包含了大量的新的 CSS 属性,以及由于一些标准在这个领域的成熟而将私有 CSS 命名空间中的属性提升到最终命名空间中。
CSS 过渡
Firefox 4 将支持 CSS 过渡。由于规范仍在早期阶段,这些仍然是带有 -moz
前缀的扩展。
calc()
我们现在支持 calc
的早期版本,它在私有命名空间中被命名为 <a href="https://mdn.org.cn/en/CSS/-moz-calc">-moz-calc</a>
。这将允许你在任何需要使用长度的地方使用简单的表达式。这可以使网页的 CSS 布局变得更加简单。(不再需要使用 div 来进行间距!)
-moz-any()
我们现在支持一个新的、非常有用的 CSS 扩展:-moz-any() 选择器分组。这在 HTML5 上下文中将非常有用。请阅读这篇文章以了解更多信息。
-moz-element()
<a href="https://hacks.mozilla.ac.cn/2010/08/mozelement/">-moz-element</a>
是 background-image
属性的一个扩展,它允许你使用任何元素作为另一个元素的背景。这非常有用和强大,我们希望其他浏览器也能采用它。
-moz-placeholder()
<a href="https://mdn.org.cn/en/CSS/%3A-moz-placeholder">:-moz-placeholder</a>
允许你更改 HTML5 表单中作为占位符的背景文本的属性。这允许你更改文本的颜色或其他属性。如果你更改了实际文本框的样式,并且希望背景文本与之匹配,这将非常有用。
border-radius
border-radius
属性现在已得到支持,取代了旧的 -moz-border-radius
属性。
box-shadow
<a href="https://mdn.org.cn/En/CSS/Box-shadow">box-shadow</a>
已取代 -moz-box-shadow
。
-moz-font-feature-settings
Firefox 4 将支持 使用 <a href="https://mdn.org.cn/en/CSS/-moz-font-feature-settings">-moz-font-feature-settings</a>
属性公开更多 TrueType 字体的功能。可以利用各种字体功能——字距调整、连字、替换字符、真正的小型大写字母和样式集,仅举几例。
一致的 CSS 单位
我们已经更改了对像素大小的处理方式,使其与 Internet Explorer、Safari 和 Chrome 相匹配,以便 1 英寸始终等于 96 像素。请参阅 Robert 的文章以了解更多信息。
对物理 CSS 单位的支持
我们引入了一个新的 CSS 单位,mozmm
,用于实际需要使用物理尺寸的罕见情况。同样,请参阅 Robert 的文章以了解更多信息。
device-pixel-ratio
Firefox 现在支持 <a href="https://mdn.org.cn/En/CSS/Media_queries#-moz-device-pixel-ratio">-moz-device-pixel-ratio</a>
媒体查询,它提供了每个 CSS 像素的设备像素数。
resize
如上所述,我们现在有一个 <a href="https://mdn.org.cn/en/CSS/resize">resize</a>
CSS 属性,它允许你禁用可调整大小的输入文本区域。
-moz-tab-size
我们现在支持 -moz-tab-size
属性,它允许你指定渲染文本时如何渲染制表符字符 (U+0009) 的空格字符宽度。
-moz-focusring
新的 CSS 伪选择器,-moz-focusring
允许你指定元素获得焦点时,且在其周围绘制焦点环时的外观。不同的操作系统对于何时绘制焦点环有不同的约定,这允许你控制表单控件的外观,同时遵循平台约定。
-moz-image-rect
新的 -moz-image-rect
允许你使用图像的子矩形作为 background
或 background-image
的一部分。
安全性
最后但并非最不重要的一点是,Firefox 4 支持大量新的安全工具,对用户和 Web 开发人员都非常有用。以下是我们提供的新技术的简要概述
内容安全策略
内容安全策略 (CSP) 是一套工具,Web 开发人员可以使用这些工具来帮助防止几种不同的攻击类型。特别是,它提供了减轻跨站点脚本攻击、点击劫持和数据包嗅探攻击的工具。
CSP 的另一个重要部分是,当违反其中一条规则时,Firefox 可以将有关该违规的信息发送回网站,使其成为一个有用的预警,帮助改进其他浏览器的安全性。
X-Frame-Options
Firefox 4 现在支持 X-Frame-Options 标头,这是抵御点击劫持的一种防御措施。此响应标头也受其他浏览器支持。(这也作为 Firefox 3.6 更新的一部分提供,但值得一提,因为它是在原始 3.6 版本发布后新增的功能。)
HSTS (ForceTLS)
Firefox 4 支持名称晦涩难懂的 HTTP 严格传输安全 (HSTS) 标头。你可以使用这些标头告诉浏览器永远不要通过未加密的 HTTP 联系网站。
Firefox 用户还可以使用 STS UI 附加组件来向 HSTS 列表添加和删除网站,即使是本身不支持 HSTS 的网站。
CORS 改进
我们修复了 CORS 实现中的一些错误。
:visited 更改
Firefox 4 包含了帮助提高您在线隐私所需的更改,方法是 修复 CSS 规则中存在长达十年的漏洞,该漏洞允许任何网站查询您的浏览历史记录。这些更改也被基于 WebKit 的浏览器采用,我们听说 IE 9 也可能会采用此重要更改。
内容很多
是的,确实很多!我们希望您喜欢它。
109 条评论