IT瘾firefox推荐

样式表的载入会延迟DOM载入事件

Sun, 15 May 2016 08:00:00 CST

绝大多数情况下我们总是让JavaScript在DOM载入后再开始执行。不管是直接用 DOM API 实现还是使用 jQuery，最终都是 DOMContentLoaded事件在起作用。本文讨论一个我们习以为常却很少了解的问题： 样式文件的载入会延迟脚本执行，以及 DOMContentLoaded事件的触发。

DOMContentLoaded事件

页面文档（DOM）完全加载并解析完毕之后，会触发 DOMContentLoaded事件， HTML文档不会等待样式文件，图片文件，Iframe页面的加载。但DOM树已被创建，多数JavaScript已经操作DOM并完成功能了。

This (DOMContentLoaded) event fires after the HTML code has been fully retrieved from the server, the complete DOM tree has been created and scripts have access to all elements via the DOM API. – molily.de

然而在绝大多数场景下，样式文件的载入会延迟 DOMContentLoaded事件的触发。其实这样的行为正是开发者所希望的，为什么呢？

事实上，老版本的IE中 DOMContentLoaded事件存在兼容性问题。参见：兼容所有浏览器的 DOM 载入事件。

浏览器为何延迟DOMContentLoaded

对于很多脚本而言，它们被编写时就希望在样式载入之后再开始执行。 JavaScript的作者往往会假设CSS规则已经生效，尤其是在进行一些显示相关的操作时，比如需要得到DOM元素的位置和大小的场景。

事实上，在多数浏览器中 DOMContentLoaded事件的触发会考虑到外部样式文件的载入，以及在HTML中脚本标签和样式标签的相对位置。如果脚本位于样式之后，浏览器通常会认为该脚本依赖于样式的渲染结果，也就更倾向于延迟脚本的执行（直到样式渲染结束）。

不同浏览器的行为

既然浏览器有时会延迟 DOMContentLoaded事件，但是何时会延迟 DOMContentLoaded事件，还取决于行内脚本还是外部脚本，以及脚本与样式标签的相对位置。不同的浏览器渲染引擎也有不同的行为。在 http://molily.de/domcontentloaded/一文中对该问题有详尽的阐述和测试，本文取其结论。

下表描述了各种情况下脚本是否会被延迟执行，进而延迟触发 DOMContentLoaded事件。

渲染引擎	样式表之前的脚本	样式表之后的外部脚本	样式表之后的行内脚本
Presto (Opera)	否	否	否
Webkit (Safari, Chrome)	否	是	否
Gecko (Firefox)	否	是	是
Trident (MSIE)		是	是

HTML5标准及最佳实践

其实 DOMContentLoaded是Firefox中最先提出的，此后JavaScript社区发现它确实比 load事件（要求所有资源完全载入）更好，于是Apple和Opera相继开始支持该事件。但不同浏览器的实现方式有所区别，于是产生了上表所示的复杂情况。

在HTML5标准中情况有所好转： DOMContentLoaded是一个纯DOM事件，与样式表无关。与此同时，HTML5要求：

脚本执行前，出现在当前 <script>之前的 <link rel="stylesheet">必须完全载入。
脚本执行会阻塞DOM解析。

这样的话，假如脚本和样式一起放在HTML <head>中， DOM解析到 <script>标签时会阻塞DOM解析，开始如下操作：

获取当前 <script>的脚本文件；
获取并载入前面的所有 <link rel="stylesheet">。
执行当前脚本文件。

这些操作完成之后才能继续进行DOM解析，解析完毕时再触发 DOMContentLoaded事件。如果将样式和脚本都放到 <head>中，会使浏览器在渲染 <body>前载入并执行所有样式和脚本。页面的显示延迟会很高，多数情况下用户体验都很糟糕。因此在HTML5标准的HTML页面中，最佳实践应当是： 所有样式放在 <head>中；所有脚本放在 <body>最后。

jQuery文档中也推荐这样的实践方式。

参考阅读

MDN load 事件： https://developer.mozilla.org/en-US/docs/Web/Events/load
MDN DOMContentLoaded事件： https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded

Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯

Tue, 14 Jul 2015 19:06:11 CST

对于 Adobe 来说，这两天应该是挺不开心的。先是 Facebook 的首席安全官 Alex Stamos 在 Twitter 上公开说：Adobe，你真的应该对 Flash 做个了断了，黑客通过 Flash 已经偷窃了多达 400 GB 的缓存文件。接着 Firefox 的主管也表示将在 Firefox 浏览器中默认禁用所有版本的 Flash。

这些消息出来之后，Twitter 上的用户和媒体基本都是一副拍手叫好的姿态。比如 Engadget 说的是 Flash 接连遭到了 Facebook 和 Mozilla 的炮轰、抵制；而 Twitter 用户 @zaid 则表示：如果你是一个在意你的用户的广告展示商，那么你应该立刻停止接受 Flash 广告。

做出这种举动的其实不止 Firefox。在今年 4 月份，当苹果发现 Flash 的安全性问题后，就在更新 OS X 的网页插件遮蔽系统时禁用了所有旧版 Flash 插件。在 2014 年时，苹果也曾经有过类似的举动，由于当时 Adobe 根本就没能发布任何更新，所以也就等于 Flash 直接被苹果屏蔽了。

当 Firefox 和 Safari 都在用类似的方法抵制 Flash 时，Chrome 浏览器却和 Flash 紧紧地捆绑在一起。按照 Google 的说法，Flash 被直接集成在 Chrome 中并且处于默认开启的状态。

现在，Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯。

在互联网界，除了 Flash 之外，好像没有谁会像它这样经常沦为众人一起责难的对象。当乔布斯在 2010 年公开指责 Flash 时， Adobe 的 CEO Shantanu Narayen 还会出来回应一下苹果的指责，并大谈自己坚信多平台的应用程序将受到消费者欢迎之类的。而现在，Adobe 基本上是一副破罐子破摔的姿态。毕竟现实情况是：所有的 Flash 版本都有安全漏洞，而他们却没法立刻给出一个可行的解决方案。

当然，虽然 Firefox 和苹果都曾经禁用过 Flash，但用户其实也是自行手动开启的，而且在 Adobe 更新了安全的版本后，这些公司基本上也会更改之前的禁令规则。不过，即便这样，对于既不安全又耗电的 Flash，大家还是能离的远点就离的远点吧。

Torrent Tornado：浏览器内 BT 下载

Thu, 09 Oct 2014 16:56:58 CST

Torrent Tornado 是一款完全使用 JavaScript 实现的附加组件，可以为 Firefox 浏览器增加 BT 下载功能。

该附加组件的亮点有：

体积小巧（不到 100K），完全使用 JavaScript 实现，跨平台且无本地二进制依赖。
支持和磁力链接及种子文件关联。
支持拖放式启动下载。

注意当前 1.0 版本仅支持下载，不支持上传。

Firefox 扩展下载

分类: BitTorrent Client, Firefox Extension | 永久链接 | Email 给好友 | 无评论 | 捐助本站

全新UI、简单易用的同步功能以及灵活的界面定制特性，你会选择Firefox Aurora吗？

Sun, 09 Feb 2014 10:43:19 CST

这两年的浏览器市场，昔日老将Firefox可谓被Chrome抢了不少风头。不过Mozilla依然在不断为Firefox添砖加瓦。最新的 Firefox Aurora不但整合了 Firefox Australis界面还增加了统一的账号系统以及灵活的界面定制功能。

像Chrome有Canary、Dev、Beta和Stable几个分支一样，Firefox Aurora也是Firefox的分支之一。Aurora的新界面从外观上看和Chrome更加相似了。Firefox将诸多功能选项都放在了和Chrome一样的“三条杠”设置按钮里，不过这些功能按钮在Aurora里的呈现方式更加直观。此外，新版Aurora也继承了Firefox在界面定制化上的一贯优势，用户可以根据自己的需要将多种按钮布置在标签栏上或者设置窗口里。

虽然Firefox浏览器之前就有同步功能，但就像Mozilla在官方博客中所说的那样，Firefox Sync并不够简洁易用而且也不便于增添新设备。对于那些想从丢失设备中恢复数据的用户来说Firefox的同步功能就显得更加不友好了。而这次升级后的Firefox Sync带来的同步体验基本上和Chrome的一样了。新用户仅需填上邮箱和密码然后激活账户Firefox Aurora就会自动同步附加组件、密码书签、标签页、历史记录等个人数据。而且用户既可以选择需要同步的数据类别又可以随时终止账户和该台设备的连接。一切操作都非常简洁明了。

伴随着Firefox Aurora一起发布的还有Mozilla Firefox账户系统。在未来Firefox账户系统将负责串接Firefox旗下的产品中的用户数据，比如Firefox OS，以期待能给Firefox用户带来更加友好的Web体验。Firefox Sync也将会和Firefox OS进行整合。

虽然Mozilla这次为Firefox带来了一大波新功能，可是不得不说，这些新功能中的大多数Chrome基本上都已经具备了而且在使用体验上也不输给Firefox。不过如果你曾经是Firefox爱好者不妨去下载新版本体验一下，它并不会覆盖已经安装的Firefox正式版。

Firefox: 我们不会入驻iOS

Wed, 28 Nov 2012 10:00:12 CST

时间：2011年1月
话语人：Firefox开发工程师Matt Brubeck
话语：Firefox不会入驻iOS
后续发展：2012年6月，火狐宣布要发布基于iPad的浏览器应用：Firefox Junior

2011年头上，火狐在表态不进入iOS的时候，还是加上了理由的：“当前的iOS SDK协议禁止像Firefox这样的应用程序存在于他们的编程器和解释器中。”事实上，火狐在iOS里也不是完全没有任何作为，大约在2010年年中的时候，就发布过一款名为“Firefox Home”的应用。这个应用并非是一个浏览器，可以视为浏览器的辅助工具：主要用来给用户在iPad上看一些自己过往的浏览历史和书签之类。

但Firefox Junior是一款真正意义上的浏览器，从已经暴露出来的图片来看，最明显的特征就是它没有地址栏。这倒让我想起类似金融时报的app（那款英文的而不是FT中文网），虽然其实是基于浏览器，但隐去了地址栏，看着就好像是一个所谓的“原生应用”（native app）一样。

在应用市场里，有关原生应用（native app）和网络应用（web app）的争论已经相当久了。这其实是两种不同的开发方式。原生应用强于用户交互和体验（几乎所有的游戏都是原生应用的），但网络应用则强于开发效率和开发者对应用的控制。网络应用由于是调用网页这类超文本信息（也就是媒体上经常能看到的所谓html5），基本上可以跨平台（iOS、Android乃至WP8），也不太需要考虑移动终端的屏幕适配问题。不过，网络应用有个当下致命的弱点：网速不够快网费不够便宜，使得这种不联网就无法完成使用的应用，在当下的开发中并不普及。

即便如此，相当多基本还是认为原生应用体验更好的人也承认，网络应用应该是一个方向性的东西。作为大背景下的网络速度和费用总是会改善的，业内有所谓的吉尔德定律（带宽6个月增加一倍），至少在桌面互联网时代还是大体成立的：一般民用接入速度从十来Kbps的水平到动辄数M甚至十多Mbps，人们用了不超过十年的时间。没有理由否认未来的移动互联网的速度会得到巨大提升。这样大背景的改善，开发者作为应用的供给方，的确会越来越多地去考虑网络应用，到底效率提高。

另外一个与开发者息息相关的事情就是收入。iOS的应用收入是需要和苹果分成的，但网络应用不需要。安装一个网络应用相当简单——以金融时报的那款应用为例——只需要打开浏览器，然后按照页面提示去做，即可生成一个网络应用，在期间没有任何经过应用商店的环节，缴费看一些收费文章也和应用商店无关。这个特点引起了亚马逊的兴趣，在苹果移动终端里的亚马逊商店kindle cloud，就是一个网络应用。

除却游戏，一些轻量级的应用，特别是和阅读有关的应用，极有可能在未来慢慢偏向网络应用开发，电子商务类亦存在这种可能（毕竟不需要和人分成，对于电子商务而言，3成是一个极高的成本，它们一般毛利都没有3成）。

Firefox在桌面上，一度是仅次于IE的浏览器，也一度有如潮的好评。不过近年来，chrome的势头相当猛，Firefox开始出现一种老态龙钟的感觉。来自statcounter的数据表明，目前全球份额已经从最高峰的3成跌落到2成，排到了chrome之后。人们开始厌倦体态日趋臃肿的firefox，如果它在移动领域中再毫无作为，恐怕就会被归入“传统老旧”的阵营中了。

事实上，网络应用和浏览器的关系非常紧密，这一点与原生应用几乎和浏览器无关非常不同。其一，大量的网络应用其实调用的是一个浏览器，只不过在界面上隐去了浏览器的框架而已。更重要的是第二点：人们如何获得一个网络应用？

从前文提到的金融时报例子来看，人们是因为知道有金融时报这个网站，然后才能获取这个应用。在应用商店里，你是搜不到这款应用的。但问题在于，对于很多应用而言，它们并没有金融时报那么赫赫盛名，它们依然需要一个渠道来让用户发现它们、找到它们。绕过应用商店有有利的一面，但也有致命的一面：应用的分发，缺少了管道。

浏览器能够起到这个作用。浏览器一般都可以配置它自己的“应用商店”——比如国内的360、猎豹这类壳浏览器，当然也包括chrome。一个具有相当市场份额的浏览器，是可以介入到应用的分发流程的。这一点，Firefox应该明白。至于技术细节上，Firefox可能需要改头换面去适合iOS的所谓标准——但这不是战略问题，只是一个战术细节罢了。

事实上，Firefox不仅“食言”重新杀回iOS，它也在考虑布局OS领域。基于Html5的Firefox OS已经开始进入运作层面，有消息说，第一款Firefox OS的手机将在2013年于巴西面世。这一系列的动作，算是Firefox卷土重来的征兆吧，只是前途漫漫，还需要它不断努力。

—— 结束的分割线 ——

本文为《21世纪商业评论》的专栏文章。这个专栏的名字叫《大佬与大话》，专门收集TMT圈子商业领袖的一些 “大话”。但本专栏的目的并非是指责这些大佬说话不算话，或者是开空头支票。我们都知道，所谓此一时彼一时，时间点变了，自然计划要变。本专栏的目的就是 “复盘”，来分析一下这个时间点究竟怎么变了导致大佬们的话变成了大话。

Copyleft © 2010 知识共享署名-非商业性使用-禁止演绎注意：转载勿改标题！
ItTalks -- 魏武挥的Blog (digitalfingerprint:fc4f8fc31f70097eea4b780b13146415)

欢迎浏览我收集的信息图关注我的微博访问我的分享

无觅猜您也喜欢：
大佬与大话之凡客：我们不会做女装	大佬与大话之阿里：绝不和360合作	FireFox发展史从1993到2006	大佬与大话之乔布斯：我们不会做平板
无觅

与本日志可能相关的文章有：

Firefox仍然是世界第二流行的浏览器

Tue, 02 Oct 2012 16:33:00 CST

根据Net Marketshare的统计，Firefox仍然是世界第二流行的浏览器。 2012年9月，IE和Firefox基本无变化，各自增加了0.03个百分点至 53.63%和20.08%，Chrome下降0.27%至18.86%，Safari增加0.16%至5.26%，Opera减少0.04%至1.62%。最近几个月IE和Firefox出现反弹，也许只是一种暂时性现象，但也可能意味着没有多少理由需要用户转到Chrome了。根据浏览器版本统计，IE6依旧是世界第五大浏览器，市场份额占7.22%，比上个月增加了0.3个百分点，IE 8占24.09%，IE9 19.45%，Chrome 21.0 14.32%，Firefox 15 10.91%。根据桌面操作系统版本统计，XP和Windows 7依旧呈此消彼长趋势，分别占41.23%和44.04%。

Firefox 18将加入JavaScript即时引擎IonMonkey，性能比尚未发布的Firefox 17快26%

Fri, 14 Sep 2012 09:57:03 CST

所谓三十年河东，三十年河西，这个道理在桌面浏览器的世界里同样适用。曾经风风火火的FireFox，如今却被迅速崛起的Chrome逼得频繁升级版本号。上月不但发布了Firefox 15，还放出了Firefox 17的消息，现在Firefox 18又呼之欲出，不过这次似乎挺有些料。

PCWorld的消息称，为实现给用户带来更快、更流畅体验的承诺，Mozilla将在Firefox 18中采用新的JavaScript解析技术。采用新技术的Firefox 18将比尚未发布的Firefox 17快26%。如果以Google的V8引擎为基线，那么Firefox 18将比Firefox 17快7%，比现在的Firefox 15快20%。

这项被称作IonMonkey的新技术是一个即时（JIT，Just-In-Time）编译器，它将部分取代2010年发布的JagerMonkey。IonMonkey首次将JavaScript代码编译为“中间表示（IR，Intermediate Representation）”，然后它会运用各种算法优化IR，最后才将其编辑为机器码。

这一过程看起来似乎很复杂，难道效率不会因此降低？目前没有关于该技术的更多细节，不过Mozilla表示，IonMonkey主要用来解析运行时间较长的JavaScript应用，短时间运行的应用仍由JagerMonkey解析。

IonMonkey将成在Firefox 18中默认使用，并且也将很快应用到Firefox移动浏览器中。而另一方面，Firefox 18将在10月8日进入Aurora通道，并在11月发布首个测试版，但最终版的发布日期目前并未确定。

除非注明，本站文章均为原创或编译，转载请注明：文章来自 36氪

来微信加36氪为好友吧，打开微信“添加朋友”->按号码查找，然后输入“36氪”添加好友。[ 二维码]

您可能感兴趣的文章：

Firefox OS Developer Preview Phone 簡介

Tue, 22 Jan 2013 23:25:52 CST

上次提到今年 Firefox 將會舉辦 2013 Firefox OS App Days，這次看到 mozilla hacks 提到一篇: Announcing the Firefox OS Developer Preview Phone!，Firefox OS 是新一代的作業系統，跟 Android 或 IOS 比較不同的地方就是，你可以用 HTML5 可以做到手機的任何事情，包括讓手機振動，傳簡訊，或者是撥打電話，我想這是 iOS 或者是 Android 是無法做到的，該篇還提到 Firefox Phone 硬體規格:

CPU Qualcomm Snapdragon S1 1Ghz
UMTS 2100/1900/900 (3G HSPA)
GSM 850/900/1800/1900 (2G EDGE)
Screen 3.5″ HVGA Multitouch
3 MP Camera
4GB ROM, 512 MB RAM
MicroSD, Wifi N, Light and proxmity Sensor, G-Sensor, GPS, MicroUSB
1580 mAh battery
Over the air updates
Unlocked, add your own SIM card

如果想開始設計 App for Firefox OS 可以參考這篇，另外文章有提到如果你要試試看 Firefox OS + 自己開發的 App，可以透過底下方式:

1. 安裝 Marketplace for Android 在您的 Android 手機上。
2. 安裝瀏覽器版本 Firefox OS 模擬器
3. 安裝 Firefox OS 到各家硬體上。
4. 最後一種方法：那就是買支 Firefox OS Developer Preview device。

如果想更了解 Firefox OS 的話或有興趣的可以自行報名參加台北 Mozilla 1/26 場次。

Related View

Firefox移动操作系统公开今年上市

Wed, 09 Jan 2013 15:53:45 CST

Mozilla在CES上用一个原型机展示了他们即将上市的Firefox移动操作系统。自从我们在去年2月的MWC上面见过它（当时还叫Boot to Gecko）之后，已经过了很长的时间，这次看上去它更像一个成熟的操作系统了，Mozilla说再要两周的时间整个系统就可以彻底完成了。Firefox主要面对的低端低价设备。Mozilla的用户界面理念和安卓一样：解锁手机，你就会来到主界面，上面可以放各种你喜欢的应用和书签，其他的应用会放在应用列表里。然而与安卓不同，所有的应用都是基于HTML5开发的，大部分的应用都是一些简单的网页。虽然系统内有一个商店，你也可以通过基于SEO的内置搜索引擎来找寻应用。

Firefox展示了自己曾承诺过的一些东西，比如虽然与其他的操作系统比好像有点孩子气，但它的总体设计还是不错的，而且我们也能看出Mozilla在用户界面上下了很大的功夫。现在我们期待着它的设备合作商——中兴，能在今年迟点时候将配有Firefox的设备推向南美及其他相继浮现的市场。

via verge

（若无特别注明，雷锋网文章皆为原创，转载请注明出处)
原文链接: http://www.leiphone.com/0109-pheand-firefox-os.html

满潇 @雷锋网

详解Firefox阻止第三方Cookies：展示广告价值将缩水

Tue, 26 Feb 2013 07:41:48 CST

Firefox 22将默认拒绝第三方Cookies存储在本地。在设置中，对Cookies的默认选项从“接受”改成了“仅接受访问过的站点”。这也就意味着，以前用过Firefox的用户，在访问曾经去过的网站时才能使用Cookie，而新安装的用户则默认不接受任何第三方Cookie。

Cookie是网站为辨别用户身份而存储在用户机器上的一小段文件，由于里面保存的是session，因此即便本身加密，还是有潜在的隐私风险。

一般Cookies用来记录你在这个网站的登录信息，但有些网站会在Cookies中加入第三方广告统计代码，这样你在什么时间去了什么网站这类信息就传达给了网络广告商。

本次Firefox禁止的就是这一类Cookies。苹果的Safari已经默认禁止第三方Cookies很长时间了。IE的默认选项是部分禁止，Chrome则是完全放开。

广告行业照例对此进行抗议。美国互动广告局副总裁Mike Zaneis将Firefox的这一举动称为“首轮核攻击”。互动广告局协调广告商之间交流互动，议定广告价格和广告策略等。该局一共有500多个成员，包括AOL、迪斯尼等还有一些网络公司，遍布五大洲36个国家。

但他们这次的抗议显然不会像对待微软那样起到很大效果。微软曾经将Do Not Track（禁止跟踪）设为IE新版的默认属性，这是浏览器发出的一个主动命令，网站收到请求后，如果遵循这个协议，将不会跟踪浏览器行为。而鉴于微软是主流浏览器中第一个将此设为默认属性的厂家，美国国家广告业协会曾经希望其会员单独对IE设置隐私策略，收到来自IE的DNT请求后不予理会。

从这里就能看出，与DNT相比，Cookies仅是被动防御，就算主流浏览器全都默认禁止，广告商也只能哑巴吃黄连，另寻高招。但DNT是一个新生的标准，而且打击面太大——它要求禁止跟踪的技术是向上兼容的。因此就算主流浏览器全都默认DNT，结果也只能是所有网站都忽略，导致该标准名存实亡而已。

从这里还能看出两点：

1、在用户不知情的情况下，展示广告积累数据将越来越艰难，以社交广告、基于用户使用数据的广告为代表的互动广告将更加体现其价值，也就是Facebook类广告价值将大于ADSense类广告；

2、本身就是一家广告商的谷歌没什么可能在保护用户隐私方面身先士卒。Chrome将成为在默认选项中对隐私问题最宽容的浏览器。当然，你可以手动更改自己的设置。

浏览器新技术，让网站像 App 一样推送通知

Wed, 29 Oct 2014 17:04:01 CST

NBA 2014-15 赛季开始，第一天，火箭队以 108 比 90 大胜湖人。看不了直播，早点知道结果也能让心里踏实些。熬夜看球没什么，怕就怕自己期待的比赛在上班时间开始。不得不专注工作，但又想第一时间知道比赛结果。

这时，消息推送就显得非常重要。安心地查询工作相关的资料，认认真真码字、码代码。比赛结束时，会有一个小弹窗弹出，第一时间“告诉”你比赛结果。现在手机里的 App 可以做到的通知推送，过不了多久，浏览器也能做到。到时候，就不用担心会错过重要信息了。

MIT Technology Review 的一篇报道称，2015 年几乎所有的浏览器都将支持推送通知服务。用户可以根据自身需求在浏览器上设置是否希望收到推送信息、想收到哪个网站的新消息提醒，之后浏览器就会自动为用户推送通知。设置完成后，即使没有在浏览已设置的网站，该网站有新消息时，用户依然可以收到新消息推送。

举个例子：假如将 CNN 设置为“接收推送通知”，当有突发新闻时，不管这会儿是否是在看 CNN 的网站，你都能收到新消息提醒。这一点其实移动端早已实现，如果手机或平板电脑中装有 CNN 的 App，有新消息时，手机就会弹出推送信息。而在 PC 端，目前只是在浏览 CNN 网页时，才会收到新信息提醒。

其实，苹果去年发布的 OS X Mavericks 中更新的的 Safari 就已具有推送通知服务，它允许用户订阅网站的通知功能，即使 Safari 不运行用户也能收到推送通知。当时， NBA.com 和《纽约时报》网页版等网站，也已开始支持 Safari 的推送通知功能。

而现在，Google 和 Mozilla 也正打算将这一功能应用到 Chrome 和 Firefox 浏览器上，以让更多的PC 端用户能接收到推送通知。目前二者均未透露何时会正式上线网页版推送通知功能。

但是，问题来了。到处都是通知推送真的好吗？作为强迫症患者，每天要消除手机上的“红点”就已经够费力了，未来又得面对一堆网页版未读信息？MIT Technology Review 文章下有评论称：

这的确是个很 cool 的创新，但是估计一个月之后我们就会因受不了新消息的打扰而关闭该功能吧。

此外，也有一些人担心这种功能会像 RSS 那样逐渐消亡。RSS 的初期开发者 Dave Winer 认为，网页版的推送通知服务缺乏统一的标准，可能会出现苹果、Mozilla 和 Google 各自为阵的局面。

题图来自 cachefly

高晨

无折腾，不生活。

邮箱

#欢迎关注爱范儿认证微信公众号：AppSolution（微信号：appsolution），发现新酷精华应用。

爱范儿 · Beats of Bits | 原文链接 · 查看评论 · 新浪微博 · 微信订阅 · 加入爱范社区！

更流畅更自由，Firefox OS的全新品牌形象

Wed, 13 Mar 2013 14:09:45 CST

一只橘黄色的狐狸抱着蓝色的地球，这是大家所熟悉的 Firefox 浏览器的标识。而在刚结束不久的 MWC 大展上，Mozilla 公司推出了自有手机系统，将其命名为 Firefox OS，并邀请设计公司 Wolff Olins 为其进行了全新的品牌形象设计。 Wolff Olins 保留了原本活泼机灵的小狐狸形象，并对狐狸的尾巴进行特别设计，让它流动的线条、炙热的色彩更加突出，暗示了 Firefox OS 能让你获得更畅快的上网体验。系统标志本身仍然延续了浏览器图标的设计，并在名字后面加上“OS”（类似 Google 的 Chrome OS），不过在视觉呈现上，小狐狸火热的尾巴想必轻易能抓住关注者们的眼球吧。目前正尝试采用这一系统的手机厂商包括中兴、阿尔卡特等，在当下这个充斥着苹果和 Android 系统的时代，能够有新鲜血液注入，不仅给了我们新的选择，其实也会让这个行业乃至这个世界得到多一种的可能。 责任编辑： 36

Google 为 https 服务启用 PFS 特性

Thu, 24 Nov 2011 00:05:09 CST

Google 去年就开始为很多服务推送 https 协议，也就是说不论用户在选项中如何设置，总会访问到网站的加密版本。在这以前，https 只是服务设置中的可选项。譬如说 Gmail 用户 2008 年就可以为账号启用 https，强制使用加密版本。

https 可加密用户计算机与服务器之间的流量。最核心的益处就是保护数据免遭网络窥探。只要网站支持 https，如果使用公用计算机或处于网络当中，而不想让 ISP 或老板知道你在做什么，访问网站的加密版将带来诸多便利。

而在昨天，Google 宣布默认启用更为保密的 PFS 特性。

支持 https 的大多数网站所采用的加密模式不够极端，有被追溯破解的风险。换而言之，加密不可读的电子邮件可能会在传输到用户计算机的过程中被记录下来。十年内，计算机运算速度更快，服务器的密钥可能会被破解，当今的电子邮件流量也将能追溯解密。

极端保密特性（PFS）要求不对连接密钥进行持久存储。破解单个密钥也无法解密数个月的流量；事实上，即使是服务器操作员也无法追溯破解 https 会话。

PFS 特性能在本质上确保攻击者无法使用未来获取的密钥破解过去记录下来的数据。

包括 Google 电子邮箱（Gmail）、加密搜索、Google Docs 以及 Google+ 在内的使用 https 的 Google 服务均已支持该特性。

Chrome、Firefox （所有平台）以及 IE（Vista 或更高版本）支持采用“Diffie-Hellman 椭圆曲线机制”（ECDH）的 PFS。目前只有 Chrome 与 Firefox 访问 Google 服务会默认采用该特性，因为 IE 不支持同时采用 ECDHE 与 RC4。我们希望在将来支持 IE。

Google 还为开源的 OpenSSL 库实现了对该特性的支持。您可以在 Google 线上安全博客读到原始公告。

Via Ghacks

© musiXboy 发表于谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011. | 5 条评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: Chrome, Firefox, Gmail, Google Docs, Google Plus, https, IE, OpenSSL, PFS

Firefox 9 正式版抢先释出，拥有更好的 JavaScript 效能与 OS X Lion 优化

Wed, 21 Dec 2011 15:01:00 CST

分类: 互联网络

距离上版的 Firefox 更新也才不过相隔一个多月，现在也即将进入第九版了，而且这次在效能上的亮眼表现，应该会让大家更想要赶快抓来抢先试玩一番才是，看来... 又要开始烦恼附加组件的问题了（其实最烦恼的应该是开发者吧）。Mozilla 宣称其 JavaScript 的引擎在 Benchmark 上拥有超过 30% 的效能增进，而这都要归功于新的 Type Inference 机制，它可以分析 JavaScript 的形态来推断归纳其类型，藉以提升其执行效能。除了效能之外，最新版的火狐还带来更佳的主题（Theme）支持，以及加入 Mac OS X Lion 双指滑动功能 -- 实际试用看起来似乎只有改滑动杆的接口？小编还以为至少会有过度滑动的回弹效果呢。迫不及待想要享受新一代浏览器的极速快感了吗，快点击引用来源来抢先用用看吧！

注：引用来源 1~3 依序为 Win / OS X / Linux 的下载连结，敬请安心服用。

Firefox 9 繁體中文正式版推出，除了速度加快 30 % 之外

Wed, 21 Dec 2011 12:56:00 CST

很準時的，Firefox 9正式版在 8.0推出六週後也跟著登場，現在大家就可以直接到 Firefox官方網站 下載最新的各國語言正式版。而這次Firefox 9正式版最大的改進就是新的技術讓瀏覽器的Javascript執行速度加快30%，而這個升級的好處就是在執行許多功能豐富的網站時可以更流暢。

不可諱言的，從 Firefox 4之後的正式版更新，除了速度、效能的持續改進外，確實比較難讓人看到像是Google Chrome更新的一些戰略野心（ Web App、多帳戶切換），但我也寫過「但是，為什麼我還是使用Firefox？」一文，說明了目前火狐瀏覽器仍然值得特定需求用戶使用的理由。

但今天也同時看到另外兩個相關新聞，一個是 Google與Mozilla協議達成，Firefox未來會繼續預設使用Google搜尋並獲得資金挹注；另外一個則是 Firefox 11將會開始支援擴充套件同步。這在保證火狐一個更穩定的未來發展之餘，也有了一些新鮮的功能改變。

但更重要的還是瀏覽器多樣化產品的彼此競爭，才能帶給網路世界更好的發展，那麼愛用Firefox的朋友，趕快把自己的瀏覽器更新到最新版吧！

Google Reader 自己動手換成 Reeder 風格精美閱讀介面

Mon, 07 Nov 2011 21:45:23 CST

對於極度依賴Google Reader的我來說，上週Google Reader替換新版介面後，我很快的就適應了新介面，並且找到新的使用方法：「克服Google+版 Google Reader 新介面不適症的幾個小技巧」，甚至還分享了一篇「無可取代的 Google Reader 的四種取代它的新聞閱讀器」討論如何更有彈性的利用這款情報閱讀器。

而Google Reader本來就有各種幫它替換介面的外掛，如果你只是單純的想要換個外觀，那麼選擇還不少。例如今天看到的這款「Reeder for Chrome」，專門為Google Chrome瀏覽器設計，採用了Mac、iOS上受歡迎的Reeder風格，在三欄介面裡同時瀏覽訂閱源、文章標題與內文，版面舒適易讀，非常精美。

Reeder for Chrome目前還在持續開發中，現在看起來整個架構已經非常不錯，尤其在Google Chrome瀏覽器上跑起來非常快速順暢，雖然還有一些小缺點，但相信會愈來愈好。

Reeder for Chrome：http://reederforchrome.tumblr.com/

進入Reeder for Chrome（當然，要使用Google Chrome），點擊「Download」下載最新版套件，就能直接安裝到瀏覽器中。

接著進入Google Reader就能看到類似Reeder的新介面囉！

在左上方可以切換「展開」與「清單」兩種閱讀模式，「清單」閱讀介面比較精美易讀，但是「展開」模式下才能看到原本的Tag功能，如果你很需要Tag功能的話，那麼要注意一下這個小地方。

那麼，Firefox上有沒有類似的精美Google Reader套件呢？很可惜的目前我還沒有找到。

不過倒是也有一款「Google Reader Compact Minimal For Small Screen」腳本可以試試看，會幫你把Google Reader變得更簡潔，縮小上方佔空間的功能列，適合小螢幕的用戶順暢使用Google Reader。

Firefox必須先安裝GreaseMonkey套件才能使用腳本，Google Chrome用戶則可以直接安裝使用。

Firefox 8 超快速啟動瀏覽器不再拖拉，但你要懂得設定！

Wed, 09 Nov 2011 13:04:06 CST

Firefox 8在今天凌晨的時候正式在官方網站發佈了！在Firefox 7的時候因為大幅更新引擎，所以讓火狐的速度有了非常明顯的提昇，效能也變得更好，而到了Firefox 8，Mozilla團隊著重在一些細節上繼續優化瀏覽器的執行效能。

除了針對新網路技術的支援、BUG修復以及基本效能優化外，在Firefox 8的更新中有幾個值得注意的地方，首先是現在Firefox會幫妳自動擋住其他軟體想要直接安裝到你瀏覽器中的套件，常常這些套件就是拖慢你速度的元兇。

但更重要的功能則是要「讓你的Firefox瞬間啟動」，怎麼做到呢？Firefox 8提出來的方法就是，一啟動時只會載入當下那個分頁（以及釘選成應用程式的分頁），其他分頁要等你選擇時才會載入！之前Firefox 7時已經針對啟動速度做過優化，原本的方法是開啟瀏覽器後陸續自動載入其他分頁，但這樣的方法對有些用戶來說可能還不夠快，因此在Firefox 8中加入了新的作法。

不過，很多朋友在介紹Firefox 8新功能時，對這個「加快啟動速度（開啟時自訂回復分頁）」的新功能都語焉不詳，所以我覺得有必要單獨來好好介紹一下。

這個功能到底是什麼？首先，你直接升級後並不會開啟這個功能！

你必須到「選項」－「一般」頁面中，在「當Firefox啟動時」選擇【顯示上次瀏覽的視窗與分頁】，然後勾選「在選擇前不要載入分頁」，這樣設定後，你才能真正享受到Firefox 8開始的啟動加速功能。

以後當你打開Firefox，就會自動還原之前關閉時的所有分頁的「樣子」而已，但是！這時候其他分頁都不會先載入，只會「真的載入」你當下所在的分頁，以及放在最前端的釘選成應用程式分頁。

一直到你去點開其他分頁，才會載入這些分頁！如果你一直都不需要點開其他分頁來看，那麼它們就永遠不會載入。

而這個方法確實能夠讓你瞬間開啟瀏覽器，大家要記得先做好設定，然後才能真的體驗到新功能的好處喔！

另外，電腦玩物正在參加Firefox推廣活動，有興趣支持的朋友，歡迎點擊以下按鈕連結下載最新版的Firefox 8喔^^

Firefox进入二位数版本号！10.0发布

Wed, 01 Feb 2012 19:33:03 CST

Firefox 火狐浏览器 10.0发布，更新内容：

默认扩展兼容：不兼容扩展会被自动禁用，其他的扩展采用默认兼容（除了二进制扩展），这样会让火狐的升级更加顺畅和容易。
加强版的火狐同步：火狐同步进行了改进，创建的过程更为简单，这样可以在Android手机、平板电脑或者任何可以使用火狐的设备上进行，而无需在桌面端进行创建。
全屏API：开发者们可以创建覆盖到全屏的网络应用。全屏API可以支持任意HTML内容，开发者可以在此基础上创建娱乐内容、炫目的网络视频和游戏体验。
页面检查器：页面检查器可以帮助开发者更快速和容易的来测试设计、样式、字体、颜色和网站的页面配置。开发者们可以看到HTML和CSS规则被应用到随意选中的页面元素中。当查看页面HTML文档结构时，不同页面元素之间的导航就会非常容易。
样式检查器：开发者可以使用样式检查器来检查应用在任意所选页面元素的CSS属性，并且可以轻松的改变这些值来试验其他的样式。
CSS3 3D变换：开发者可以创建一个两维元素，然后只使用HTML5而无需任何第三方插件来把它变成动画和转换成3D。
WebGL中的反锯齿处理：经过这样处理，WebGL的三维内容特别是动画和游戏中的图像边缘会更平滑缓和。
暂存器添加Orion代码编辑器：开发者的暂存器添加了Orion代码编辑器，允许开发者编辑更多文本。Orion代码编辑器还提供了句法高亮和让JavaScript书写更容易的特性。

Linux版本

官方通告

相关阅读：
解决ubuntu的firefox上网速度慢	ubuntu10.10继续使用火狐浏览器	不要怀疑，这货是FireFox6.0	Firefox 4 PPA for Ubuntu 10.04 and 10.10	FireFox将继续成为Ubuntu11.10的默认浏览器
无觅

网友提供Firefox+扩展 15秒网上快速预定火车票教程

Thu, 05 Jan 2012 12:23:26 CST

近日网络上有名为“特种兵―AK47”的技术网友提供了15秒通过订票网站成功预定火车票的教程引发网友热议，该网友在教程中通过FireFox（火狐浏览器 点击下载）及FireBug（火狐浏览器的一种附加插件 点击下载）修改网页相关参数从而实现快速购票。

如何控制您的在线隐私

Sat, 03 Mar 2012 07:22:13 CST

只不是关于在线相册，不是关于明文密码，而是关于那些或许比你自身都更了解你自己的搜索引擎和互联网广告商。

以为 清除了浏览器本地历史记录就没人知道你到底浏览些什么网站了？醒醒吧，亲～

下面是个简单例子解释为什么：

假设你访问旅游咨询网站 A 查询关于渡假景点 Z 的信息，网站 A 上包含了来自互联网广告商 G 的广告 Cookies。
之后你又浏览了机票预定网站 B，网站 B 上也包含了来自互联网广告商 G 的广告 Cookies，这次看到的可能会是前往景点 Z 的特价机票的信息。
之后你继续浏览了酒店预订网站 C，网站 C 上也包含了来自互联网广告商 G 的广告 Cookies，这次看到的可能是景点 Z 附近知名酒店的信息。
紧接着浏览了假日旅行网站 D，该网站是互联网广告商 G 的客户，于是在它的网站上你有可能看到景点 Z 的酒店和机票一体化出售信息。

有人会说： 这不是挺好的么，我看到了个性化的广告？

没错，以上的信息追踪过程绝大多数情况下都是匿名的，似乎并没有不坏。 坏的是最终用户无法选择不被追踪。

当下很多网站都会有第三方投放的广告，很多网站的基本功能在禁用 Cookies 之后就无法使用（比如网上购物时购物车内容的维护）。结果是最终用户并没有机会选择是否被追踪，也无法知道在被谁追踪，又被追踪了些什么。甚至某知名互联网搜索公司还被发现使用特制的 Cookies 绕过部分浏览器的 Cookies 安全设置达到追踪用户的目的。

瞧，或许你还没来得及告诉 XX (自行补完暗恋/基友/女友等……)，假日旅行网站和互联网广告商已经知道你渡假安排了……

Mozilla 和 Ford 基金会合作的项目 Collusion 目的就是希望让公众理解这一过程，并提供有效的工具去控制并保护自己的在线隐私。

其中一个初步成果就是视觉化 Cookies 追踪扩展 Collusion，以简单且具有交互式的方式告诉你 都有哪些网站在通过 Cookies 在记录你的网上浏览。

知道了有哪些网站在利用 Cookies 在追踪你，那么还可以使用本站先前介绍过的 Ghostery 来 屏蔽制定的 Cookies 追踪。

最后，还可以使用 Mozilla 正与 W3C 标准化的 Do Not Track 支持（桌面版和移动版都具备）。若启用了该功能，用户在支持该协议的网站将不会被追踪。该行动最近得到了 US Whitehouse 的支持。

此外，还有一些 承诺不追踪用户记录的搜索站点，比如 DuckDuckGo。

将分享按钮找回来的 Chrome 扩展和脚本 ReaderSharer

Mon, 07 Nov 2011 16:39:06 CST

如果你觉得Google Reader的小清新改版还看得过去，只是对分享功能被下课感到愤愤不平的话，那么可以试试ReaderSharer，它有Chrome扩展版本，对于Firefox用户来说则可以选择安装油猴脚本。

在安装了ReaderSharer之后，Google Reader里那个熟悉的分享按钮就又回来啦，当然Google +1按钮也没被去掉，你可以同时分享和+1。

目前ReaderSharer似乎与Chrome的AdBlock扩展有冲突，所以要正常使用的话你需要禁止AdBlock在Google Reader里生效。

Via LifeHacker

© musiXboy 发表于谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011. | 1 条评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: Chrome, Chrome Extensions, Firefox, Google +1, Google Reader, Greasemonkey, userscript

梦回亲切的老版 Google Reader

Sat, 05 Nov 2011 14:10:41 CST

小众软件的脚本控火山兄在Google Reader小清新改版多天之后，终于放出了自己调较的油猴脚本，让你梦回老版Google Reader（如上图），猛击这里开始做梦，主要有七项修改：

每篇文章的边框加上圆角和阴影。
当前文章外框变蓝色。
去掉多余按钮，请自行用快捷键替代。
修正文件夹图标。
压缩多余空白。
硬又黑导航条自动隐藏。
0.1 版的 bug 基本搞定。

目前唯一的bug是subscriptions 列表不能适应浏览器屏幕，你可以根据自己的实际情况，修改 height:430px; 这一句中的数字。

另有其它三个脚本可供参考：

部分代码来自：

只想找回分享功能的，可以尝试 Reader Sharer Monkey。另外，bit3725同学做了一个类似Reeder界面的脚本，在列表下是三栏结构界面，在扩展视图下是两栏界面。

Via sfufoet's Blog

© musiXboy 发表于谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011. | 9 条评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: Chrome, Firefox, Google Reader, Greasemonkey, Reeder, userscripts

iReader – 小清新风格清爽浏览网页正文 | 小众软件 > Chrome

Wed, 15 Feb 2012 09:04:06 CST

iReader 可不是苹果那个作为阅读器的 iReader ，这是一个浏览器插件，可以将页面中的正文以小清新的风格突出显示，让你免受其他元素的干扰，专注于内容。@Appinn

安装后， iReader 支持的网页会在地址栏显示出一个 R 图标，点击即可以小清新模式浏览，不支持的网页就木有图标显示了。。。

个人感觉，因为 iReader 自身对自动翻页支持不是太好，所以比较适合不分页的大段长篇文字的阅读，这类不分页的小说也比较合适，但不适合论坛以及带评论的博客。。。

Chrome 版 | Firefox 版 | 来自小众软件

Mozilla 和 Epic Games 将虚幻3引擎移植至 Web

Mon, 01 Apr 2013 14:30:25 CST

Mozilla 显然不满足 Cube2 引擎带来的视觉效果，这次与 Epic Games 合作将著名的 Unreal 3（虚幻3）引擎移植到了开放 Web 平台，未来的 HTML5/WebGL 游戏将异常多彩。

Mozilla 此次和 Epic Games 的团队合作，在 Emscripten 技术的帮助下仅用了四天就将约一百万行 Unreal 3 引擎移植到 HTML5/WebGL 平台，速度可谓惊人。

为了满足 Unreal 3 引擎对于性能的要求，Mozilla 也引入了高性能的 JavaScript 子集 Asm.js 的新技术和对应的 OdinMonkey 优化器：

Asm.js 是 JavaScript 的子集，可以任何 JavaScript 解析器下运行，但仅在相应优化器（比如 OdinMonkey）存在的情况下才能体现性能优势。
Asm.js 主要设计初衷是成为 Emscripten 所用 LLVM 的输出目标语言，可以手写，不过主要还是由 C/C++ 源代码转换而来。
OdinMonkey 优化器构建在长时 JavaScript 引擎 IonMonkey 框架之上，对于非 Asm.js 的 JavaScript 长时应用亦有改善。目前已完成桌面版本的 OdinMonkey，ARM 移动版本即将完成，将于 Firefox 22 与公众见面。

视频演示（朝内镜像）

官方发布公告

看看前火狐员工是怎样评价Chrome的

Sun, 14 Apr 2013 08:03:43 CST

本文来自问答社区Quora里的一篇问答，有用户想知道火狐的员工是怎么看Chrome，于是便有了以下这篇答案。

作者Abhinav Sharma是前参与火狐浏览器的员工。

“我在火狐并不是工作很长的时间，大概一年半左右，不过我可以大致谈谈自己在火狐工作时对Chrome的思考，这些都是我完整的想法。”

这是一场从起点便十分困难的战斗，Google有丰厚的广告收入开支支撑，也有世界上最好的天才工程师和设计师在不断改进Chrome，不过同样的，Chrome也是基于开源引擎WebKit改造的，这样无疑能起步更快。

Chrome是一款“经久耐用”的好产品，两款浏览器我都有使用。用火狐的原因很简单，它有更强的定制性，而速度上，也与Chrome无太大差异了。不过，我更喜欢Chrome的UI，它看起来更简洁，更有快感。

我认为Chrome的这种良好的协同性以及一致的体验，很大程度上是来源于Google账户的同步。而火狐对用户隐私方面比较谨慎（尚且这么说），你需要第二个密码来给浏览器解密，每换一次设备都要这么做一次，在我的经验里，这几乎是最差的体验了。

Firefox在自定义方面要比Chrome简便得多，在我实习期间，曾经给Mozilla写了一个历史搜索引擎，用来彻底检测默认书签系统下所有的公共API，同时看看实验室里项目的弹性。

当然，这里有一个反面效果。当火狐浏览器轻易的允许这么多的插件运行，那些代码没写好，甚至是恶意代码的程序，肆意占用用户的内存以及调用程序也使得浏览器频频奔溃，我想Chrome这么谨慎的审核插件，也许是吸取了Mozilla的教训。

所以，我如何看Chrome？这是一款运行非常稳定、在类产品里出类拔萃的榜样，崇尚更好易用性的产品。Google的广告主打的是速度，目前是同类浏览器里最快的了，它也拒绝臃肿的软件运行，所有的这些特点都使得它更快，走在科技的最前端。

而Firefox同样是一个很快的浏览器，他更具有扩展性，我也希望Mozilla能更重视用户体验，把这个放在产品战略开发的核心里。

知乎用户@John Smith从理念上对两款浏览器的解释，可以对上文做一个总结：

Firefox的理念是成为用户浏览网页的好伴侣，你可以自由掌握和指定你眼前的东西，因为每个人的口味不一样，所以使用的方式也不尽相同，这样可以保证每个使用者手中的Firefox是基本符合自己口味的；

Chrome的理念则是成为网络的容器，或者说背景，它希望你忘了浏览器的存在，而将注意力完全集中到网页本身上，从精简的ui、轻快的速度等都能体现出这点来。

[小技巧] JavaScript Cross Browser Best Practices

Fri, 12 Apr 2013 10:50:55 CST

先前寫了一篇 modern.IE 的使用方式及介紹，今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面，如果你的瀏覽器是中文版，應該就可以直接看到中文介面了，裡面有篇文章非常重要，寫 Web 的工程師都必須注意，那就是 Cross Browser Best Practices，這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧，這些技巧也不只用在 IE 上，更是教您在實做 CSS，JavaScript 的注意事項。我們來看看 Javascript 的小技巧。

不要再使用 navigator.userAgent

為了知道使用者 Browser 資訊，之前有寫篇 jQuery 偵測瀏覽器版本, 作業系統(OS detection)，內容使用 navigator.userAgent 來取得使用者瀏覽器及裝置資訊，開發者為了 IE 各版本的相容，所以透過此方式來知道 IE 各版本，進而在 JS 做處理，但是有時候並不是這麼準確，因為目前市面上裝置實在是太多種了，手機，平板，電視一堆等等，為了支援各種裝置，請不要再用 navigator.userAgent 來判斷了，現在取而代之的就是用 Modernizr，用來偵測您的 Browser 有無任何您所想要的功能，像是 Html5 的 Canvas，利用 Modernizr 來判斷是否支援，這時候各種裝置就不會因為 JS 沒有判斷到而產生錯誤，尤其是在電視介面或 Android 平板，踩到很多雷阿。詳細資訊可以參考此連結。

簡單來說 Canvas 在 IE9 才有支援，所以針對 IE 部份，我們使用 navigator.userAgent 來判斷

但是如果遇到 Safari, Chrome, Android, IPad, IPhone 版本呢，也很好解決，就是一直些判斷式，那為什麼不換個角度去想，直接判斷有無 Cnavas 功能即可，透過 Modernizr 套件可以簡單做到。另外 jQuery 在 1.9 版也直接捨棄了 jQuery.browser API 功能，取而代之的也是推薦 Modernizr。

if (Modernizr.canvas) {
console.info('Your browser support canvas');
}

在 document ready 內不要執行大量 script

現在大部分的網站缺少不了的就是 jQuery，jQuery 提供了 $(document).ready() 在 html load 完成後可以快速執行 JavaScript，在大多的狀況下都可以正確執行的，但是如果在 $(document).ready() 寫入大量及複雜的 Script，只會讓瀏覽器呆滯而不能使用，所以盡可能減少執行的程式碼，等到使用者真正要執行功能的時候在進行呼叫即可。通常像是 tooltip 或 dialog 可以延遲等到要出現的時候在初始化即可。

網頁開始先優先執行 AJAX

由於執行 AJAX 需要一段時間，所以請在 html load 之前就開始執行，並不需要等到 $(document).ready() 後才執行，另外在 AJAX 完成執行後的 Complete function 加入 $(document).ready() 函式確保 html 已載入完成。

延遲載入 social button(Facebook Like, Google +1, Twitter)

現在大多網站都有一大堆分享機制（social networks），像是 Facebook Like、Twitter 等等，但是這些 JS 的載入，都大大影響到網頁的載入時間，其實最主要的解決方式就是務必思考哪些頁面才需要這些 button，能減少載入外部 JS 就是提昇網頁載入速度，在以前載入外部 JS 的作法就是底下

現在請改寫成底下

由於各瀏覽器相容問題，所以判斷是否支援 addEventListener 或 attachEvent，在 onload 後才開始執行。更多詳細內容可以參考 requesting these scripts

Related View

HTML5全屏API在FireFox/Chrome中的显示差异

Mon, 08 Oct 2012 21:30:25 CST

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=2679

一、人人网上……

今天，在人人网上看同学晒得照片的时候，发现了这个按钮：

这个按钮是？我移了好几遍，没有 title提示。图形也不具有代表性，一个圈圈意思是？——圈人？？是不是啊？？不敢点，点了不知道会发生什么，浏览器会不会关掉！！我思想斗争做了很久，终于弱弱地点了一下~~

草骆驼，居然是——全屏显示的提示：

人人兄，使用新技术固然值得提倡，这个圈圈也不加个提示——让人知道点了之后是全屏啊！！否则，俺们脆弱的小心脏根本承受不起啊——屏幕立马黑了个通透——还以为盖茨发现我的系统是盗版的黑了我的屏呢！！！

好吧，玩完两把三国杀，情绪稳定了，回到正题。人人网这个全屏效果就是使用的HTML5的全屏API，使用其实很easy的！对于全屏API，年初的时候就有耳闻，但未做测试与了解，现在，人人君已经用在实际项目中了，显然，有必要了解一番，可以在自己的项目中耍耍酷，过过HTML5的瘾。

二、相关文章以及一些技术点

搜了下，介绍的文章还不少，您可以参考：

武方博原创的 html5实现全屏的api方法一文。文章前面属于备忘性质的内容，没看头；不过，最后的心得很不错，实际应用经验，值得一看。
heero翻译的“ [译]原生全屏Javascript API”。去年时候内容，稍微old的点，多理论，有值得注意的知识点，能了解API的大概。
sitePoint上的” How to Use the HTML5 Full-Screen API“, 较新的文章吗，跟实际应用走的也很近，有demo，更值得参考。

如果您正好处于节后综合症发病期，懒得点击上面链接，也可以看下面我精简出来的一些实用的东西：

全屏效果JavaScript实现
全屏效果 click, mousedwon, mouseup事件才能触发
全屏方法为： 全屏元素.requestFullScreen(); 目前不同的浏览器需要不同的前缀，如 mozRequestFullScreen或 webkitRequestFullScreen
取消全屏为： 全屏元素.cancelFullScreen(); 同样，不同浏览器需要添加私有前缀，如 mozCancelFullScreen或 webkitCancelFullScreen.
可以通过 document.fullScreen判断浏览器是否处于全屏状态。注意：FireFox和Chrome写法上有不同，Webkit内核浏览器需要增加个 is, 如 document.webkitIsFullScreen; 而Firefox则是 document.mozFullScreen.
:full-screen{}用在CSS代码中，可以控制全屏元素（及其子元素）全屏状态时的样式。同样，不同浏览器不同前缀。如 :-moz-full-screen{}或 :- webkit-full-screen{}.
一个页面如果有多个全屏元素，在CSS控制的时候，可以使用类似 #element:full-screen{}的选择器分别控制。

如果以上密密麻麻的文字看得你头大眼花，换个轻松的浏览，您可以狠狠地点击这里： HTML5 full-screen全屏API测试demo

点击demo页面中，万年不变的张含韵照片，即可触发全屏浏览提示，类似下面：

该demo几乎均遵循了上面概要的一些技术tips, 完整代码demo页面上均有，不难懂的，大家有兴趣可以看看。

如果您想在实际项目中使用HTML5全屏API，demo页面中出现的这个方法必不可少（可以兼容以后N多年的HTML5发展）：

var runPrefixMethod = function(element, method) {
    var usablePrefixMethod;
    ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
        if (usablePrefixMethod) return;
        if (prefix === "") {
            // 无前缀，方法首字母小写
            method = method.slice(0,1).toLowerCase() + method.slice(1);

        }

        var typePrefixMethod = typeof element[prefix + method];

        if (typePrefixMethod + "" !== "undefined") {
            if (typePrefixMethod === "function") {
                usablePrefixMethod = element[prefix + method]();
            } else {
                usablePrefixMethod = element[prefix + method];
            }
        }
    });

    return usablePrefixMethod;
};

既是方法执行（如果是方法），又是属性判断（是否支持属性），很实用，可以直接拷贝粘贴使用。

OK，这里所说的东西，其实上面几篇参考文章都有说过，没意思！现在目光转移到下面，呼吸一些新鲜的空气~~

三、FireFox/Chrome中的显示差异

表象的差异：
表象的差异就是是否支持全屏提示的差异了，FireFox浏览器是个大框框（参见上面截图），而Chrome浏览器下是个实色背景（参见下截图）：

浏览器生产商的喜好，没什么好说的。

更细致的差异：
如果您观察够仔细，您可能会发现，在全屏状态下，FireFox浏览器下点击界面的任意位置，都会回到正常状态；但是Chrome浏览器下，只有点击图片才能回到正常状态。下面两张图是同一位置，鼠标手形的差异对比：

深层次的原因：
虽然，demo页面中，背景都是全屏的黑色，图片效果一样，高度60%放大显示，垂直且水平居中，但是，其背后实现的机制却是很不一样的。

FireFox浏览器对全屏元素进行的一些CSS属性的强设置，打开FireBug，查看系统默认样式，您会看到：

也就是，元素宽高100%显示，黑色背景，固定定位——这也是为什么FireFox浏览器下点击屏幕任意位置会退出全屏——因为绑定了事件的全屏元素满屏显示了。

背景色非强设置，通过如下CSS，我们就可以进行修改：

:-moz-full-screen {
    background-color: #fff;
}

结果，就是下图这个样子：

而Chrome浏览器下，虽然默认对全屏元素也有CSS设置，但是寥寥：

好吧，基本上就是两个酱油CSS设置，背景色还是白色的。

现在问题来了？为何两个浏览器默认的全屏CSS样式不一样，但是，都是黑色背景，图片垂直水平居中呢！！！

解释：FireFox浏览器下的黑色背景就是全屏元素，其中图片的居中对齐是通过CSS控制的（:after伪类生成元素+vertical-align:middle实现），例如去掉 text-align:center图片就不水平居中了；而Chrome的黑色背景属于系统的东西，其全屏元素似乎被浏览器劫持，默认状况下永远屏幕居中显示（去掉 text-align:center图片依然水平居中）——脱离了常规CSS理解——如默认的 display:block状态似乎变成了 display:inline-block等。

然而，我们是有办法让Chrome表现得跟FireFox浏览器一样地，就是增加一样FireFox浏览器默认有的样式，如：

:-webkit-full-screen {
    background-color: black;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

于是，这样子，即使在Chrome浏览器下，点击屏幕的任意位置，全屏状态都会退出！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=2679

（本篇完）

有话要说，点击这里发表评论。

[评论]Firefox OS真能打入移动系统领域象Firefox一样成功？

Fri, 02 Nov 2012 10:36:06 CST

感谢 Firefox OS论坛的投递
看完这些数据，你就会明白，Android和苹果已完全占据了智能手机领域。尽管竞争者用了最大努力，看起来还未能打破他们的防护墙。而Mozilla认为他可以。开源组织预测，凭借先进的Web技术，Firefox OS可以和桌面浏览器一样，以同样的方式闯入智能手机领域。

Table 1
Worldwide Mobile Device Sales to End Users by Vendor in 2Q12 (Thousands of Units)

Company	2Q12 Units	2Q12 Market Share (%)	2Q11 Units	2Q11 Market Share (%)
Samsung	90,432.1	21.6	69,827.6	16.3
Nokia	83,420.1	19.9	97,869.3	22.8
Apple	28,935.0	6.9	19,628.8	4.6
ZTE	17,936.4	4.3	13,070.2	3.0
LG Electronics	14,345.4	3.4	24,420.8	5.7
Huawei Device	10,894.2	2.6	9,026.1	2.1
TCL Communications	9,355.7	2.2	7,938.9	1.9
HTC	9,301.2	2.2	11,016.1	2.6
Motorola	9,163.2	2.2	10,221.4	2.4
Research In Motion	7,991.2	1.9	12,652.3	3.0
Others	137,233.4	32.8	152,989.70	35.7
Total	419,007.90	100.0	428,661.15	100.0

Source: Gartner (August 2012)

Table 2
Worldwide Mobile Device Sales to End Users by Operating System in 2Q12 (Thousands of Units)

Operating System	2Q12 Units	2Q12 Market Share (%)	2Q11 Units	2Q11 Market Share (%)
Android	98,529.3	64.1	46,775.9	43.4
iOS	28,935.0	18.8	19,628.8	18.2
Symbian	9,071.5	5.9	23,853.2	22.1
Research In Motion	7,991.2	5.2	12,652.3	11.7
Bada	4,208.8	2.7	2,055.8	1.9
Microsoft	4,087.0	2.7	1,723.8	1.6
Others	863.3	0.6	1,050.6	1.0
Total	153,686.1	100.0	107,740.4	100.0

Source: Gartner (August 2012)

Mozilla一位官员曾说过：我们“绝对”需要另一个选择，Mozilla正非常好地在做这件事情。

Mozilla是作为Netscape的一个分支机构开始运作的。任何知晓网络历史的人，就知道Netscape的Netscape Navigator当时曾主导着整个浏览器市场，直到有一天，Internet Explorer的出现。
在此后的几年里，微软的IE浏览器完全统治了整个市场。直到2004年，Firefox的推出，彻底改变了这一切，并触发了当时的浏览器大战，就和今天我们所了解到的一样。

如今，虽然面对Chrome的攻势，Firefox节节败退，但它仍然是世界三大浏览器之一。

因此，当Mozilla说，他要打破移动系统的市场格局时，你应该把它当回事。

“这是件容易的事情”，Chinniah说道，我们曾打算把桌面浏览器移植到手机系统，而Mozilla确实做到了。

力推Firefox OS，是想把开源Web带到移动设备领域中来。

这样做意味着，我们可以完全脱离目前封闭的移动生态体系。想想你每次尝试同步各种设备的失败体验，特别是，如果你购买的不是同样系统的设备，情况将更加糟糕。

如果你想知道这种基于Web的移动操作系统有什么好，MG Sielger博文中的一段写得非常好：

不要象设计网站那样开发Web应用，开发Web应用就要当作没有网站这个概念。为那些过去从不使用桌面电脑的人开发Web应用。因为不久，将会有更多人这样。

尽管Firefox OS和Android一样是建立在Linux内核上，Mozilla仍希望你把它当作为一个大的应用，里面装有很多小的应用。

没有本地应用，对于这个系统没有什么本地概念，所有都基于Web，即便电话功能也是如此。而当你离线时，这些应用都能工作。这意味着很多沉重的缓存，但也意味着最大限度地节约硬件资源。

那么，它能成功吗？

Firefox OS的市场定位可能很好的解释了开发这个系统的原因。 Mozilla并不想把它当作iOS杀手，而是要给大众带来一款基于Web的设备，和入门级的Android设备或高端功能机的价格大约相当。

“我们所带来的应用试图和使用开放标准的体验一致“，Chinniah说道。在某种程度上，这意味着繁重的HTML5整合。但请记住，这听起来有点吓人，HTML5领域有800万开发人员，远超Android和iOS。

还记得，有很多科技巨人，包括马克·扎克伯格（Facebook创始人）认为HTML5从长远来讲，是一个很好的解决方案。而Mozilla正在实践这个理念。

另一方面，也有人曾经试图开发一个基于web的OS。比如谷歌也动用了所有的资源都不能做到，那么为什么Mozilla就可以？

请记住，Mozilla和他们相比，没有太多的包袱，可以赌得起。如果奏效，那么过去Mozilla在firefox上的成功,同样会在Firefox OS上重新演绎。
(文：memeburn.com 译：firefoxos.cc)

hello，chrome，我是Firefox。。。

Tue, 05 Feb 2013 13:59:10 CST

今天，Firefox发表了一段视频，宣告Firefox和Chrome之间的视频通信成功~~

这个真的很赞！

在Chrome支持WebRTC之后，Firefox终于在Nightly版本中也开始原生支持了。

虽然现在只有PC支持，但是可以遇见不久之后，手机端也会开始支持了，而Firefox引入WebRTC，应该主要还是为了自己的Firefox OS。有了WebRTC的加入，浏览器端的视频通话就不再是问题了。

WebRTC是被Google在2010年收购的Global IP solutions公司的GIPS引擎，然后将其改名为WebRTC，并在2011年成为W3C的标准之一。

具体的实现不细说了，这里有个Demo，感兴趣的同学可以尝试下。

Junior：Mozilla 杀向 iPad 的武器

Mon, 18 Jun 2012 10:02:27 CST

三个月前，在 MWC 大会上 Mozilla 的产品副总裁 Jay Sullivan 说：

现在，除了 Boot to Gecko，我们真的专注于 Android。我们没有为 iOS 以及 PlayBook （开发浏览器）的计划。

这句话已经被推翻了。Mozilla 的 Product Design Strategy 的 Alex Limi 上个星期曾经发表一个演讲，透露了一个为 iPad 而开发的浏览器原型 Junior，他还透露这个原型已经开发了几个月——Mozilla 3 个月之前那番“专注于 Android”的话，看来是一颗“烟雾弹”。

现在，我很好奇 Junior 究竟是怎样一款浏览器？

打开 Junior，看不到导航栏，看不到标签页，只有在全屏状态下显示的网页。整块屏幕上，除了网页外只有两个半透明的按钮，分别位于屏幕的两侧，左边那个按钮是“后退”，和正常的浏览器中的后退一样，就是返回上一页；右侧那个按钮看上去是一个“+”号，但它的功能不是添加书签。

点击这个“+”号，将进入一个新的界面，这个界面分为三个部分，集中我们日常浏览网页时最重要操作。界面的上方最近浏览过的网页，点击可切换；中间是用户收藏的网站；下方是一个虚拟键盘，可以输入网址，或直接输入关键字，能够将用户最喜欢浏览的书签给找出来，和桌面上的 Firefox、Chrome 一样。

屏幕两侧的按钮在展开后，会显示更多的按钮，包含正常浏览器的其它操作，比如前进/后退、刷新页面，以及分享和打印等等。

在讲解 Junior 的时候，Limi 说 Mozilla 要为大家带来全新的浏览器，他使用了“重新发明”（reinvent）这个词。同时他还表示，iOS 是一个无法忽视的巨大的市场，即便 Mozilla 无法将 Gecko 渲染引擎搬到 iOS 上，也应该为 iOS 开发一个浏览器。

Junior 表明 Mozilla 不再坚守自己的渲染引擎，宁愿开发一个全新的浏览器，也要拓展市场份额。一方面是 Chrome 最近几年快速崛起，给 Firefox 带来沉重的竞争压力，另一方面，在平板电脑市场，iPad 目前的地位尚无人能够动摇，根据 Chitika 的统计数据，iPad 占所有平板电脑数据流量的 91.07%。难怪 Limi 要说，iOS 是 Mozilla 无法忽视的市场。

Limi 还透露 Google 也很快推出 iOS 版 Chrome 的计划。两大浏览器的竞争，将在平板电脑市场中激烈进行。

您可能也喜欢：
Firefox OS 杀入移动操作系统主打HTML5	Ubuntu或将发布移动操作系统	我们真的需要另一个手机操作系统吗？	Firefox 16发布多项新特性	Firefox18测试版发布支持Retina
无觅

IT瘾firefox推荐

样式表的载入会延迟DOM载入事件

DOMContentLoaded事件

浏览器为何延迟DOMContentLoaded

不同浏览器的行为

HTML5标准及最佳实践

参考阅读

Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯

Torrent Tornado：浏览器内 BT 下载

全新UI、简单易用的同步功能以及灵活的界面定制特性，你会选择Firefox Aurora吗？

Firefox: 我们不会入驻iOS

与本日志可能相关的文章有：

Firefox仍然是世界第二流行的浏览器

Firefox 18将加入JavaScript即时引擎IonMonkey，性能比尚未发布的Firefox 17快26%

Firefox OS Developer Preview Phone 簡介

Related View

Firefox移动操作系统公开 今年上市

详解Firefox阻止第三方Cookies：展示广告价值将缩水

浏览器新技术，让网站像 App 一样推送通知

更流畅更自由，Firefox OS的全新品牌形象

Google 为 https 服务启用 PFS 特性

Firefox 9 正式版抢先释出，拥有更好的 JavaScript 效能与 OS X Lion 优化

Firefox 9 繁體中文正式版推出，除了速度加快 30 % 之外

Google Reader 自己動手換成 Reeder 風格精美閱讀介面

Firefox 8 超快速啟動瀏覽器不再拖拉，但你要懂得設定！

Firefox进入二位数版本号！10.0发布

Firefox 火狐浏览器 10.0发布，更新内容：

网友提供Firefox+扩展 15秒网上快速预定火车票教程

如何控制您的在线隐私

将分享按钮找回来的 Chrome 扩展和脚本 ReaderSharer

梦回亲切的老版 Google Reader

iReader – 小清新风格清爽浏览网页正文 | 小众软件 > Chrome

相关文章

Mozilla 和 Epic Games 将虚幻3引擎移植至 Web

看看前火狐员工是怎样评价Chrome的

[小技巧] JavaScript Cross Browser Best Practices

不要再使用 navigator.userAgent

在 document ready 內不要執行大量 script

網頁開始先優先執行 AJAX

延遲載入 social button(Facebook Like, Google +1, Twitter)

Related View

HTML5全屏API在FireFox/Chrome中的显示差异

一、人人网上……

二、相关文章以及一些技术点

三、FireFox/Chrome中的显示差异

[评论]Firefox OS真能打入移动系统领域 象Firefox一样成功？

hello，chrome，我是Firefox。。。

Junior：Mozilla 杀向 iPad 的武器

Firefox移动操作系统公开今年上市

[评论]Firefox OS真能打入移动系统领域象Firefox一样成功？