《JavaScript忍者秘籍》——1.3 跨浏览器注意事项

简介: 资源受限组织的另一个潜在因素是开发团队的技能。开发应用程序的主要原因就是让最终用户使用,开发人员可能需要发展必要的技能来开发该应用程序,以满足最终用户的需求。在成本分析阶段就需要考虑这些因素。

本节书摘来自异步社区《JavaScript忍者秘籍》一书中的第1章,第1.3节,作者:【美】John Resig(莱西格) , Bear Bibeault(贝比奥特)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.3 跨浏览器注意事项

完善JavaScript编程技能将引导我们不断前行,尤其是目前,除了浏览器端以外,JavaScript还能够使用Rhino、V8或Node.js库等JavaScript引擎在服务器端运行。但开发基于浏览器的JavaScript应用程序(这也是本书的重点)时,越早越好的是,我们首先要应对:浏览器及其令人恼火的问题和矛盾。

理想世界中,所有的浏览器中都没有bug,并且支持以一致的方式支持Web标准,但是我们都知道我们并不生活在这种世界里。

近来浏览器的质量已经有了大大改善,但仍有一些bug、缺失的API和不同浏览器的特定缺陷,我们需要解决这些问题。制定解决这些浏览器问题的综合性策略并熟悉不同浏览器之间的区别和缺陷,和精通JavaScript本身同等重要。

对于这些差异,在编写浏览器应用程序或JavaScript库时,决定支持哪些浏览器是一个重要考虑事项。我们可能想支持所有的浏览器,但却受限于开发和测试的资源限制。那么,我们如何决定支持哪些浏览器,支持到什么程度?

有一个方法,是来自古老Yahoo!的一个松耦合方式,称为分级浏览器支持(graded browser support)。在这种技术中,我们创建一个浏览器支持矩阵,作为记录浏览器和其平台的重要性的快照。

在这样一个表格中,我们在一个轴上列出目标平台,在另外一个轴上列出浏览器。然后,在每个单元格中,对每个浏览器/平台组合,我们给出一个“等级”(从A到F,或者是其他能够满足我们需要的评分系统)。表1.1展示了一个这样的例子。

注意,我们还没有填写任何等级。如何对特定平台和浏览器分配等级,完全取决于项目的需要和需求,以及其他重要的因素,例如目标受众的组成。使用这种方式,我们制定出相应平台/浏览器重要性的等级,并将这些信息和成本进行结合,尝试找出最优化的浏览器支持。我们将在第11章更深入地探索这些内容。
screenshot
由于支持大部分的平台和浏览器组合是不切实际的,因此我们必须权衡支持各种浏览器的成本与收益。任何类似的分析,都必须要考虑多个因素,主要有如下几点。

  • 目标受众的期望和需求。
  • 浏览器的市场份额。
  • 支持该浏览器所需的工作量。

第一点是主观的,只有具体项目才能够确定。第二点是市场份额,可以通过互联网信息得到。支持每个浏览器的工作量,可以通过考虑该浏览器的功能和对现代浏览器标准的遵守情况进行粗略估计。

图1.2所示的图表,展示了主流浏览器的使用情况(信息来自2012年8月的StatCounter)以及我们对排名靠前的桌面浏览器开发成本的个人建议。
screenshot

  • 尽管与标准兼容的浏览器相比,支持IE 7和IE 8需要更多的工作量,但它们仍然有很大的市场份额,如果这些用户是我们程序的一个重要目标观众,那么这些额外的工作就是值得的。
  • IE 9,在标准兼容性方面取得明显进展,与之前的IE版本相比更容易得到支持,并已经取得了一定的市场份额。
  • 支持Firefox和Chrome是显而易见的,因为它们有很大的市场份额,并且很容易支持。
  • 尽管Safari浏览器的市场份额相对较低,它仍然值得支持,因为它符合标准的特性使得其支持成本很小(作为一个经验法则,如果能在Chrome浏览器下使用,那也就能在Safari下使用——尽管是在推理情况下)。
  • Opera,虽然需要的工作量比Safari还少,但因为它的市场份额很小,所以可以从桌面浏览器市场上忽略它。但如果移动平台对你来说很重要,移动版的Opera则可以发挥更大的作用,如图1.3所示。

screenshot

  • 对于IE 6,真的没什么可说的了。

看一下移动市场,情况就完全不同了,如图1.3所示。

当然,任何事情都不是那么枯燥。也许更恰当的说法是,好处比成本更重要,但这最终要看决策者的选择,他们要考虑市场需求和其他业务问题等因素来制定决策。但量化成本和收益是做出这些重要支持决策的一个良好起点。

另外,要注意,市场份额和支持成本的变化是很迅速的。

资源受限组织的另一个潜在因素是开发团队的技能。开发应用程序的主要原因就是让最终用户使用,开发人员可能需要发展必要的技能来开发该应用程序,以满足最终用户的需求。在成本分析阶段就需要考虑这些因素。

跨浏览器开发的成本,主要取决于开发人员的技能和经验,而本书的目的就是提高开发人员的技术水平,所以让我们首先来看一下当前的最佳实践。

相关文章
|
21天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
31 1
|
3月前
|
JavaScript 前端开发 算法
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
|
3月前
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
402 0
|
4月前
|
Web App开发 JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
299 0
|
4天前
|
JavaScript 容器
js的一些注意事项
js的一些注意事项
|
5天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
8天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
|
14天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
19天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
20 3