高性能JavaScript pdf

高性能JavaScript

内容简介

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

作者简介

丁琛,乐豚联合创始人及CEO,曾在阿里巴巴负责支付宝,担任产品前端开发工作,业界著名的前端开发工程师。

目录

前言 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

感悟与笔记

1.数据存取

  • 数据的存取有四种方式,字面量、变量、数据项、对象。字面量和变量快于数组项和对象。
  • 局部变量位于作用域链的开始,查找速度最快,所处的位置越深,查找越慢,全局变量查找最慢。
  • with可以影响作用域链,try-catch语句中的catch也会影响。慎重使用。
  • 如果当前对象没有某个属性或者方法,就会去遍历原型链上的属性和方法,也会造成性能损耗。
  • 嵌套对象层数越多,也会减慢速度。例如,location.href要快于window.location.href。
  • 解决方法:大部分的性能损耗都是与对象查找相关,所以建议缓存对象,减少查找次数。

2.DOM编程

  • 由于DOM渲染引擎和JS引擎一般是分离实现的,要让两个相互独立的模块建立通讯,就会产生消耗。所以,我们需要减少DOM操作,已经获取的DOM节点,缓存下来,防止多次重复操作。
  • 其次,要注意重绘和重排,对DOM的哪些操作会引起重绘和重排,减少这方面的操作。最后,需要注意DOM事件处理用户交互。
  • 使用innerHTML和原生的document.createElement()类似的方法,速度相差不大。在最新版的webkit内核浏览器(chrome和safari)以外,innerHTML会更快,而且相较而言,代码量也少很多。
  • HTML集合是包含了DOM节点引用的类数组对象,例如document.getElementByName()这样的方法,需要注意的是HTML集合一直与文档保持着连接,每次需要新信息的时候,都会重新查询。
  • 在查找DOM元素时,尽可能使用原生方法,如最新支持比较完善的querySelectorAll()。
  • 在页面布局和几何属性改变时就需要“重排”,例如:
  1. 添加或者删除可见的DOM元素
  2. 元素位置改变
  3. 元素尺寸改变(包括:外边距、内边距、边框厚度、宽度、高度等属性改变)。
  4. 内容改变,例如:文本改变或者图片被另一个尺寸的图片替代
  5. 页面渲染器初始化
  6. 浏览器窗口尺寸改变
  • 为了减少重排和重绘,批量修改样式时,“离线”操作DOM树,使用缓存,并减少访问布局信息的次数。在动画中使用绝对定位,使用拖放代理。
  • 使用事件委托来减少事件处理器的数量。

3.算法和流程控制

  • 减少迭代的工作量,比如使用局部变量缓存数组的长度,减少查询次数。
  • 减少迭代次数,使用Duff's Device。
  • 尽可能不用forin,forin要比for、while、do-while要慢。
  • switch比if-else要快,但要综合考虑代码可读性。
  • 判断条件较多时,查找表要比if-else和switch更快。
  • 递归容易造成栈溢出,控制递归的循环次数。

4.字符串和正则表达式

  • 连接巨大的字符串时,数组项合并在IE7或更早之前版本是最优方法。
  • 如果在现代浏览器中,推荐使用简单的+和+=操作符代替,避免不必要的中间字符串。
  • 回溯是正则的基本组成,也会带来性能问题。
  • 回溯失控发生在正则表达式本应快速匹配的地方,因为某些特殊的字符串匹配动作导致运行缓慢甚至浏览器崩溃。为了避免这种情况,应该使相邻的字元互斥,避免嵌套量词对同一字符串的相同部分多次匹配,通过利用预查的原子组去除不必要的回溯。

5.快速响应的用户界面

  • 任何JavaScript任务不应该超过100ms,否则用户体验会变差。
  • JavaScript运行期间,浏览器响应用户交互的行为存在差异。
  • 定时器可用来安排代码延迟执行,但不一定绝对精确。
  • web worker允许程序员在UI线程外执行JavaScript代码,从而避免锁定UI。

6.AJAX

  • 减少请求数
  • 缩短页面加载时间,页面主要内容加载完成之后,用Ajax获取次要内容
  • 代码错误尽可能对用户屏蔽

7.最佳实践

  • 避免使用eval和Function构造器带来双重求值带来的性能损耗。
  • 使用直接量创建对象和数组,直接量更快
  • 避免重复工作,需要检测浏览器时,可使用延迟加载或者条件预加载。
  • 进行数学计算时,考虑使用位运算。
  • 尽量使用原生方法


会员免费下载

链接:https://pan.baidu.com/s/1yW_DO_HP6tZUYYwZ--M0Fg

提取码: ****** 查看

¥69/年 开通VIP会员

成为本站VIP会员即可无限下载。 请先点击百度网盘,看资源是否还在,不在请点击链接通知站长补资源。

资源标签点击标签可查看对应分类的资源

JavaScript

资源推荐

免费 图解数据结构:使用Java

C++ 程序设计语言:第4部分 标准库(原书第4版)

C++编程思想(两卷合订本)

CSS世界

JavaScript DOM编程艺术(第2版)

C++ Primer Plus(第6版) 中文版

Vue.js快速入门

Java编程思想(第4版) [thinking in java]

Copyright © 2021-2022 知识猫. All Rights Reserved.