HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 书籍推荐 查看内容

高性能JavaScript

2015-9-16 11:40| 发布者: html5cn| 查看: 14362| 评论: 3|来自: 电子工业出版社

摘要: 《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM 交互、页面生存周期等。 ...

  高性能JavaScript(值得所有前端人员细细品读的经典,来自一线实践经验总结,提升JavaScript性能立竿见影)

 

  【美】Nicholas C. Zakas(尼古拉斯.泽卡斯)著

  丁琛 译

  ISBN 978-7-121-26677-5

  2015年8月出版

  定价:65.00元

  323页

  16开

 

 

  内容提要

  如果你使用 JavaScript 构建交互丰富的 Web 应用,那么 JavaScript 代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师 Nicholas C. Zakas 和其他五位 JavaScript 专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

 

  目录

  前言 I

 

  第1章:加载和执行 1

  1.1 脚本位置 2

  1.2 组织脚本 4

  1.3 无阻塞的脚本 5

  1.3.1 延迟的脚本 5

  1.3.2 动态脚本元素 6

  1.3.3 XMLHttpRequest脚本注入 9

  1.3.4 推荐的无阻塞模式 10

  1.4 小结 14

 

  第2章:数据访问 15

  2.1 管理作用域 16

  2.1.1 作用域链和标识符解析 16

  2.1.2 标识符解析的性能 19

  2.1.3 改变作用域链 21

  2.1.4 动态作用域 24

  2.1.5 闭包,作用域和内存 24

  2.2 对象成员 27

  2.2.1 原型 27

  2.2.2 原型链 29

  2.2.3 嵌套成员 30

  2.2.4 缓存对象成员值 31

  2.3 小结 33

 

  第3章:DOM编程 35

  3.1 浏览器中的DOM 35

  3.1.1 天生就慢 36

  3.2 DOM访问与修改 36

  3.2.1 innerHTML对比DOM方法 37

  3.2.2 节点克隆 41

  3.2.3 HTML集合 42

  3.2.4 遍历DOM 46

  3.3 重绘与重排 50

  3.3.1 重排何时发生? 51

  3.3.2 渲染树变化的排队与刷新 51

  3.3.3 最小化重绘和重排 52

  3.3.4 缓存布局信息 56

  3.3.5 让元素脱离动画流 56

  3.3.6 IE和:hover 57

  3.4 事件委托 57

  3.5 小结 59

 

  第4章:算法和流程控制 61

  4.1 循环 61

  4.1.1 循环的类型 61

  4.1.2 循环性能 63

  4.1.3 基于函数的迭代 67

  4.2 条件语句 68

  4.2.1 if-else对比switch 68

  4.2.2 优化if-else 70

  4.2.3 查找表 72

  4.3 递归 73

  4.3.1 调用栈限制 74

  4.3.2 递归模式 75

  4.3.3 迭代 76

  4.3.4 Memoization 77

  4.4 小结 79

 

  第5章:字符串和正则表达式 81

  5.1 字符串连接 81

  5.1.1 加(+)和加等于(+=)操作符 82

  5.1.2 数组项连接 84

  5.1.3 String.prototype.concat 86

  5.2 正则表达式优化 87

  5.2.1 正则表达式工作原理 88

  5.2.2 理解回溯 89

  5.2.3 回溯失控 91

  5.2.4 基准测试的说明 96

  5.2.5 更多提高正则表达式效率的方法 96

  5.2.6 何时不使用正则表达式 99

  5.3 去除字符串首尾空白 99

  5.3.1 使用正则表达式去首尾空白 99

  5.3.2 不使用正则表达式去除字符串首尾空白 102

  5.3.3 混合解决方案 103

  5.4 小结 104

 

  第6章:快速响应的用户界面 107

  6.1 浏览器UI线程 107

  6.1.1 浏览器限制 109

  6.1.2 多久才算“太久”? 110

  6.2 使用定时器让出时间片段 111

  6.2.1 定时器基础 112

  6.2.2 定时器的精度 114

  6.2.3 使用定时器处理数组 114

  6.2.4 分割任务 116

  6.2.5 记录代码运行时间 118

  6.2.6 定时器与性能 119

  6.3 Web Workers 120

  6.3.1 Worker运行环境 120

  6.3.2 与Worker通信 121

  6.3.3 加载外部文件 122

  6.3.4 实际应用 122

  6.4 小结 124

 

  第7章:Ajax 125

  7.1 数据传输 125

  7.1.1 请求数据 125

  7.1.2 发送数据 131

  7.2 数据格式 134

  7.2.1 XML 134

  7.2.2 JSON 137

  7.2.3 HTML 141

  7.2.4 自定义格式 142

  7.2.5 数据格式总结 144

  7.3 Ajax性能指南 145

  7.3.1 缓存数据 145

  7.3.2 了解Ajax类库的局限 148

  7.4 小结 149

 

  第8章:编程实践 151

  8.1 避免双重求值(Double Evaluation) 151

  8.2 使用Object/Array直接量 153

  8.3 不要重复工作 154

  8.3.1 延迟加载 154

  8.3.2 条件预加载 156

  8.4 使用速度快的部分 156

  8.4.1 位操作 156

  8.4.2 原生方法 159

  8.5 小结 161

 

  第9章:构建并部署高性能JavaScript应用 163

  9.1 Apache Ant 163

  9.2 合并多个JavaScript文件 165

  9.3 预处理JavaScript文件 166

  9.4 JavaScript压缩 168

  9.5 构建时处理对比运行时处理 170

  9.6 JavaScript的HTTP压缩 170

  9.7 缓存JavaScript文件 171

  9.8 处理缓存问题 172

  9.9 使用内容分发网络(CDN) 173

  9.10 部署JavaScript资源 173

  9.11 敏捷JavaScript构建过程 174

  9.12 小结 175

 

  第10章:工具 177

  10.1 JavaScript性能分析 178

  10.2 YUI Profiler 179

  10.3 匿名函数 182

  10.4 Firebug 183

  10.4.1 控制台面板分析工具 183

  10.4.2 Console API 184

  10.4.3 网络面板 185

  10.5 IE开发人员工具 186

  10.6 Safari Web检查器(Web Inspector) 188

  10.6.1 分析面板 189

  10.6.2 资源面板 191

  10.7 Chrome开发人员工具 192

  10.8 脚本阻塞 193

  10.9 Page Speed 194

  10.10 Fiddler 196

  10.11 YSlow 198

  10.12 dynaTrace Ajax Edition 199

  10.13 小结 202

  索引 203

 

  精彩节摘

  译者序

  这是一本关于JavaScript性能的书。

  在Web应用日趋丰富的今天,越来越多的JavaScript被运用在我们的网页中。随着用户体验被日益重视,前端性能对用户体验的影响开始备受关注,而引起性能问题的因素相对复杂,因此它很难得到全面的解决。这本书是一个契机,它尝试着从多个方面综合分析导致性能问题的原因,并给出适合的解决方案,帮助我们改善Web应用的品质。

  这本书页数不多,但它承载着JavaScript性能方面最为宝贵的经验。不仅从语言特性、数据结构、浏览器机理、网络传输等层面分析导致性能问题的原因,还介绍了多种工具来帮助我们提升开发过程和部署环节的工作效率。

  本书作者Nicholas C. Zakas是一位经验丰富的前端专家,他的许多研究(www.nczonline. net)对前端业界的贡献让我们受益匪浅。本书的另外五位特约作者均为各自领域的专家,他们的专业技能和知识的融入使得本书内容更为充实,更具实用价值。

  特别感谢赵泽欣(小马),他为审阅译文花了大量的时间和精力,他的耐心和细致让我十分敬佩。感谢朱宁(白鸦)和周筠老师的引荐让我得以参与本书的翻译。还要感谢博文视点的编辑们在本书翻译过程中给予的极大理解和帮助。

  我们在本书翻译过程中力求保持行文流畅,但纰漏在所难免,恳请广大读者批评指正。关于本书的任何意见或想法,欢迎发送邮件至hpj.feedback@gmail.com。

  最后,希望本书能帮助业界同仁打造出性能更为卓越的Web产品。

  丁琛

 

  前言

  当JavaScript 作为 Netscape Navigator 浏览器的一部分首次出现在 1996 年时,性能问题并不重要。当时的互联网仍处在发展初期,各个方面都很慢。从拨号上网到低配置的家用电脑,上网冲浪往往比任何事情都需要耐心。人们都做好了等待网页加载的心理准备,页面加载能完成就是一件值得庆祝的事了。

  JavaScript 最初的目标是改善网页的用户体验。JavaScript 能代替服务器处理页面中类似表单验证的简单任务,这样做节省了与服务器连接的大量时间。想象一下当你填完一个很长的表单,提交后等待了30~60秒,却得到一个字段出错的信息是什么感觉。显而易见,JavaScript 为早期的互联网用户节省了很多时间。

 

  互联网的发展

  在接下来的10 年里,电脑和互联网不断发展。首先,两者都变得更快。高速的微处理器,内存的廉价供应,以及光纤连接的出现将互联网推向了一个新的时代。随着高速网络的普及,网页开始变得丰富,并且承载着更多的信息和多媒体内容。Web 从简单的关联文档演变成了各式各样的设计和界面。一切都变了,除了一样东西,那就是 JavaScript。

  这项曾用于节省服务器消耗的技术日益普及,但代码也从数十行的发展到成百上千行。IE 4 和动态 HTML (改变页面显示而无需重新加载的技术)的推出更是使得网页中的 JavaScript 代码量只增不减。

  最近一次浏览器的重大更新是文档对象模型(DOM)的推出,这是一个被IE 5, Netscape 6,以及Opera所一致接受的动态HTML接口。紧接着,JavaScript被标准化,并推出了

  ECMA-262 第三版。随着所有浏览器都支持 DOM,同时(或多或少)提供了对相同版本 JavaScript 的支持,Web 应用平台诞生了。尽管有如此巨大的飞跃,有了编写 JavaScript 的通用 API,但是负责执行代码的 JavaScript 引擎几乎没有变化。

 

  为什么优化是必要的

  在 1996 年,JavaScript 引擎只要能支持页面里数十行的 JavaScript 代码就好, 而今天,却运行着成千上万行 JavaScript 代码的 Web 应用。从许多方面来说,如果不是因为浏览器自身在语言管理和基础设施方面的落后,JavaScript 本可能取得更大规模的成功。IE 6 就是一个明证,发布之初,它的稳定性和性能都被人们称颂,但后来却因为自身的 Bug 和反应迟钝而被痛批为令人讨厌的 Web 应用平台。

  事实上,IE6 并没有变慢,它只是被寄予了厚望。2001 年 IE 6 刚发布时出现的各类早期Web 应用比 2005 年后出现的应用更轻量,JavaScript 代码也远没有那么多。JavaScript 代码数量的增长带来的影响变得明显,IE 6 的 JavaScript 引擎吃不消了,原因在于它的“静态垃圾**机制” 。该引擎监视内存中固定数量的对象来确定何时进行垃圾**。早期的 Web 应用开发人员很少会遇到这个极限值,随着更多的JavaScript代码产生越来越多的对象,复杂的 Web 应用开始频繁遭遇这个门槛。问题变得清晰起来:JavaScript开发人员和 Web 应用都在发展,而 JavaScript 引擎却没有。

  尽管其他浏览器有着更加完善的垃圾**机制和更好的运行性能,但大多数仍然使用 JavaScript 解释器来执行代码。解释性代码天生就没有编译性代码快,因为解释性代码必须经历把代码转化成计算机指令的过程。无论解释器怎样优化和多么智能,它总是会带来一些性能损耗。

  编译器已经有了各种各样的优化,使得开发人员可以按照他们想要的方式编写代码,而不需要担心是否是最优。编译器可以基于词法分析去判断代码想实现什么,然后产生出能完成任务的运行最快的机器码来进行优化。解释器很少有这样的优化,这很大程度上意味着,代码怎么写,就被怎么执行。

  实际上,通常在其他语言中由编译器处理的优化,在 JavaScript 中却要求开发人员来完成。

 

  下一代JavaScript引擎

  2008 年,JavaScript 引擎迎来了第一次大的性能升级。Google 发布了全新的浏览器,名为 Chrome。Chrome 是第一款采用优化后的 JavaScript 引擎的浏览器,该引擎的研发代号为 V8。V8 是一款为 JavaScript 打造的实时(JIT)编译引擎,它把 JavaScript 代码转化为机器码来执行,所以给人的感觉是JavaScript的执行速度超快。

  其他浏览器紧跟着也优化了它们的 JavaScript 引擎。Safari 4 发布了名为 SquirrelFish Extreme(或称为 Nitro)的 JIT JavaScript 引擎,而Firefox 3.5 的 TraceMonkey 引擎对频繁执行的代码路径做了优化 。

  这些全新的 JavaScript 引擎带来的是编译器层面的优化,这也是它应该做的。或许有一天,开发人员完全无须关心代码的性能优化。可是,那一天还未到来。

 

  性能依然需要关注

  尽管核心 JavaScript 的执行速度已经有所提高,但 JavaScript 仍然有多个方面的问题在新的引擎中没有被处理。网络延迟导致的滞缓和影响页面外观的操作尚未得到浏览器的充分优化。尽管诸如函数内联、代码合并以及字符串连接算法等简单的优化很容易通过编译器进行优化,但对动态且多层结构的 Web 应用程序来说,这些优化只能解决部分的性能问题。

  然而全新的 JavaScript 引擎让我们似乎看到未来高速互联网的模样,在可预见到的未来,当今的性能话题仍然具有相关性和重要性。

  本书中讨论的技术和方案涉及 JavaScript 的各个方面,内容涵盖运行时间、下载、DOM操作、页面生存周期等。这些话题仅仅是一小部分,它们相关的核心(ECMAScript)性能可能随着JavaScript的不断进步而变得无关紧要,但这还有待时日。

  其他的话题则针对那些更快的JavaScript 引擎也力不能及的方面:DOM交互、网络延迟、JavaScript的阻塞和并发下载等。这些话题在未来依然重要,而且还会再受到更大关注,它们需要从底层研究JavaScript 执行时间才能继续提高。

 

  本书的组织

  本书的章节的组织方式基于一个正常的JavaScript开发周期。最开始的第1章讨论页面加载JavaScript的最佳方式。第2章到第8章专注于那些有助于你的JavaScript代码尽可能高效运行的编程技术。第9章讨论构建和部署JavaScript文件到生产环境的最佳方法,第10章提到的性能工具能帮助你找出代码部署后的潜在问题。以下5章是由特约作者完成的:

  第3章 DOM 编程,由 Stoyan Stefanov 完成。

  第5章 字符串和正则表达式,由 Steven Levithan 完成。

  第7章 Ajax,由 Ross Harmes 完成。

  第9章 构建并部署高性能 JavaScript 应用,由 Julien Lecomte 完成。

  第10章 工具,由 Matt Sweeney 完成。

  这些作者都是对Web开发社区有着重要贡献的资深Web开发人员。为便于你识别这些章节,他们的名字会出现在各自章节的起始页。

  JavaScript加载

  第1章,“加载和执行”,从JavaScript的基础开始:把代码加载到页面。要提高JavaScript的性能,首先要用最高效的方式加载代码到页面中。本章专注于与加载 JavaScript 代码相关的性能问题,并给出了几种方法以减轻它带来的负面影响。

  编码技术

  JavaScript 中大量性能问题的来源是因为使用低效的算法或工具类编写出的糟糕代码。接下来的 7 个章节专注于找出问题代码并给出更快替代方案来完成相同的任务。

  第2章“数据访问”,重点介绍了 JavaScript 如何存取脚本里的数据。数据的储存位置同数据类型同样重要,本章解释了作用域链和原型链对脚本整体性能的影响。

  Stoyan Stefanov,他对 Web 浏览器的内部工作机制十分在行,所以由他编写第 3 章 “DOM 编程”。 Stoyan 解释了在 JavaScript 中 DOM 交互比其他类型的操作要慢的原因是因为它的实现机制。他论述了 DOM 相关的所有内容,包括描述重绘和重排是如何拖慢你的代码的。

  第4章“算法和流控制”,解释了常用编程模式(比如循环和迭代)是如何影响运行期性能的。本章还讨论了诸如 memoization 的优化技术以及浏览器的JavaScript运行期限制。

  许多 Web 应用程序都会执行复杂的的 JavaScript字符串操作,字符串专家 Steven Levithan在第5章“字符串和正则表达式”全面介绍了相关主题。Web开发人员已经与浏览器低效的字符串处理奋战多年,Steven会解释为什么一些字符串操作起来会慢,以及如何应对。

  第6章“快速响应的用户界面”,聚焦于用户体验。JavaScript 可能会导致浏览器假死,让用户感到无比沮丧。本章讨论了多种技术来确保用户界面总是处于可快速响应的状态。

  第7章“Ajax”,Ross Harmes讨论了实现客户端-服务端快速通信的最佳方法。 Ross 还提到数据格式是如何影响 Ajax 性能的以及为什么 XMLHttpRequest 并非总是最佳选择。

  第8章“编程实践”介绍了一些专门针对 JavaScript 的最佳实践。

  部署

  JavaScript 代码一旦编写完成并通过测试,就是时候向用户发布了。然而,你不应当直接把源码放到生产环境。Julien Lecomte在第9章“构建和部署高性能JavaScript应用”中介绍了如何使用一个构建系统去自动压缩文件,并使用HTTP压缩传输内容到浏览器。

  测试

  当所有JavaScript代码部署完成,下一步就要开始性能测试。Matt Sweeney在第10章“工具”里的内容涵盖了测试方法论和相关工具。他介绍了如何使用JavaScript来衡量性能,还描述了两类通用工具,一类用于评估JavaScript运行期性能,一类通过使用HTTP嗅探来发现隐藏的性能问题。

  本书读者

  本书面向有中高级JavaScript经验且希望提升Web应用性能的Web开发人员。

  本书的约定

  本书使用下列排版约定:

  斜体(Italic)

  表示专业词汇、链接(URL)、文件名和文件扩展名。

  等宽字体(Constant width)

  表示广义上的计算机编码,它们包括变量或函数名、数据库、数据类型、环境变量、语句和关键字。

  这个图标表示提示、建议或一般说明。

  这个图标表示警告或提醒。

  代码用例

  这本书是为了帮助你做好工作。一般来说,你可以在程序和文档中使用本书的代码。你无须联系我们获取许可。例如,使用来自本书的几段代码写一个程序是不需要许可的。出售和散布O’Reilly书中用例的光盘(CD-ROM)是需要许可的。通用引用本书用例和代码来回答问题是不需要许可的。把本书中大量的用例代码并入到你的产品文档中是需要许可的。

  我们赞赏但不强求注明信息来源。一条信息来源通常包括标题、作者、出版者和国际标准书号(ISBN)。例如:“High Performance JavaScript, by Nicholas C. Zakas. Copyright 2010 Yahoo!, Inc.,978-0-596-80279-0.”。

  如果你感到对示例代码的使用超出了正当引用或这里给出的许可范围,请随时通过permissions@oreilly.com联系我们。

  意见和问题

  如果您对本书有意见和问题,请联系出版社:

  美国:

  O’Reilly Media, Inc.

  1005 Gravenstein Highway North

  Sebastopol, CA 95472

  中国:

  北京市西城区西直门南大街2号成铭大厦C座807室(100035)

  奥莱利技术咨询(北京)有限公司

  与本书有关的在线信息如下所示:

  http://www.oreilly.com/catalog/9780596802790(原书)

  http://www.oreilly.com.cn/book.php?bn=978-7-121-11932-3(中文版)

  北京博文视点资讯有限公司(武汉分部)

  湖北省 武汉市 洪山区 吴家湾 邮科院路特1号 湖北信息产业科技大厦1402室

  邮政编码:430074

  电话: (027)87690813 传真:(027)87690013

  读者服务网页:http://bv.csdn.net

  E-mail:

  reader@broadview.com.cn(读者信箱)

  bvtougao@gmail.com(投稿信箱)

 

  致谢

  首先,也是最重要的,我要感谢所有本书的特约作者:Matt Sweeney、Stoyan Stefanov、Stephen Levithan、Ross Harmes和Julien Lecomte。他们的专业技能和知识的结合使得本书的编写过程让人兴奋,让本书更加值得期待。

  感谢所有我有幸会面和交流的来自世界各地的性能专家,特别是 Steve Souders、Tenni Theurer和Nicole Sullivan。你们三位帮助我扩大了在 Web 性能方面的视野,我心存感激。

  还要感谢每一位帮忙审阅本书的人们,包括Ryan Grove、Oliver Hunt、Matthew Russell、Ted Roden、Remy Sharp和Venkateswaran Udayasankar。

  还要特别感谢O’Reilly和Yahoo! 的每一位成就此书的人。我在2006年刚刚加入Yahoo! 时就希望为它写一本书,Yahoo! Press让这件事成为现实。

 

  2015年9月8日-2015年9月14日,HTML5中国微博有此书的转发抽奖活动

  送书活动地址:http://weibo.com/2357270831/CzAQ3dtvU?type=comment#_rnd1442374804412

 

 

5

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (5 人)

相关阅读

发表评论

最新评论

引用 meque 2016-5-19 20:59
现在有很多小伙伴在自学,但是一个人的能力是有限的,遇到问题没人帮你解决,我给大家推荐一个大神学习交流q un,希望对大家能有所帮助,q un号前面是思七一,中间是零儿七,后面是一武四。这里每晚都有大牛直播教学。
引用 Jerome868 2016-1-12 11:35
不错的书籍,感觉挺好
引用 521595826 2016-1-8 19:24
【怎么学好编程】想学习编程不要看网上的这些视频教程,没有任何意义,你操作过程中会遇到大量的问题,学习编程可以加群【521,595,826】这里有很多人指导你一起学习,还有免费的课程分享给你

查看全部评论(3)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-27 08:13

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部