第一章:减少javascript对性能的影响:
</body>闭合标签之前,将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染。不然<script>标签会阻塞页面的渲染。
合并脚本: 页面中的<script>标签越少,加载也就越快,响应也更迅速。无论外链文件还是内嵌脚本都是如此。因为每一次<script>外部文件都会有一次HTTP请求有多中无阻塞下载javascript的方法
使用defer属性(不推荐,只有IE支持)
使用动态创建的<script>元素来下载并执行代码。
使用XHR对象下载javascript代码并注入页面中
第二章:数据访问
对象成员的嵌套也会开销系统资源。location.href永远会比window.location.href快。
访问直接量和局部变量的速度最快,相反,访问数组元素和对象成员相对较慢。
由于局部变量存在于作用域链的起始位置,因此访问局部变量比访问跨作用域变量更快。变量在作用域链中的位置越深,访问所需时间就越长。由于全局变量总处在作用域链的最末端,因此访问速度也是最慢的。
避免使用with语句,因为它会改变运行期上下文作用域链。同样,try-catch语句中的catch子句也有同样的影响,因此要小心使用。
嵌套的对象成员会明显影响性能,尽量少用
属性或方法在原型链中的位置越深,访问它的速度也越慢。
通常来说,你可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善javascript的性能,因为局部变量访问速度最快。
第三章:DOM编程
最小化DOM访问次数,尽可能在javascript端处理
如果需要多次访问某个DOM节点,请使用局部变量存储它的引用
小心处理HTML集合,因为它实时联系着底层文档。把集合的长度缓存到一个变量中,并在迭代中使用它。如果需要经常操作集合,建议把它拷贝到一个数组中。
如果可能的话,使用速度更快的API,比如querySelectorAll()和firstElemengChild()
要留意重绘和重排;批量修改样式时,“离线”操作DOM树,使用缓存,并减少访问布局信息的次数。
动画中使用绝对定位,使用拖放代理
使用事件委托来减少事件处理器的数量
第四章:算法和流程控制
for、while和do-while循环性能相似,所以没有一种循环类型明显快于或慢于其他类型
避免使用for-in循环,除非你需要遍历一个属性数量未知的对象
改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数
通常来说,switch总是比if-else快,但并不总是最佳解决方案
在判断条件较多时,使用查找表比if-else和switch更快
浏览器的调用栈大小限制了递归算法在javascript中的应用;栈溢出错误会导致其他代码中断运行
如果你遇到栈溢出错误,可将方法改为迭代算法,或使用Memoization来避免重复计算。
第六章:快速响应的用户界面
任何javascript任务都不应当执行超过100毫秒。过长的运行时间会导致UI更新出现明显的延迟,从而对用户体验产生负面的影响。
javascript运行期间,浏览器响应用户交互的行为存在差异。无论如何,javascript长时间运行将导致用户体验变得混乱和脱节
定时器可用来安排代码延迟执行,它使得你可以把长时间运行的脚本分解成一系列的小任务
Web workers是新版浏览器支持的特性,它允许你在UI线程外部执行javascript代码,从而避免锁定UI
第七章:Ajax
作为数据格式,纯文本和HTML只适用于特定场合,但它们可以节省客户端的CPU周期。XML被广泛应用而且支持良好,但是它十分笨重且解析缓慢。JSON是轻量级的,解析速度快(被视为原生代码而不是字符串),通用性与XML相当。字符分隔的自定义格式十分轻量,在解析大量数据集时非常快,但需要编写额外的服务端构造程序,并在客户端解析。
当从页面当前所处的域下请求数据时,XHR提供了最完善的控制和灵活性,尽管它会把接收到的所有数据当成一个字符串,且这有可能降低解析速度。另一方面,动态脚本注入允许跨域请求和本地执行javascript和JSON但是它的接口不那么安全,而且还不能读取头信息或相应代码。Multipart XHR可以用来减少请求数,并处理一个响应中的各种文件类型,但是它不能缓存接收到的响应。当需要发送数据时,图片信标是一种简单而有效的方法。XHR还可以用POST方法发送大量数据。
除了这些格式和传输技术,还有一些准则有助于加速你的Ajax减少请求数,可通过合并javascript和CSS文件,或使用MXHR
缩短页面的加载时间,页面主要内容加载完成后,用Ajax获取那些次要的文件
确保你的代码错误不会输出给用户,并在服务端处理错误
指导何时使用成熟的Ajax类库,以及何时编写自己的底层Ajax代码
第八章:编程实践
通过避免使用eval()和Function()构造器来避免双重求值带来的性能消耗。同样的,给setTimeout()和setInterval()传递函数而不是字符串作为参数
尽量使用直接量创建对象和数组。直接量的创建和初始化都比非直接量形式要快
避免做重复的工作。当需要检测浏览器时,可使用延迟加载或条件预加载
在进行数学计算时,考虑使用直接操作数字的二进制形式的位运算
javascript的原生方法总会比你写的任何代码都要快。尽量使用原生的方法
第九章:构建并部署高性能javascript应用
合并javascript文件以减少HTTP请求数
使用YUN Compressor压缩javascript文件
在服务器端压缩javascript文件(Gzip编码)
通过正确设置HTTP响应头来缓存javascript文件,通过向文件名增加时间戳来避免缓存问题
使用CDN提供javascript文件,CDN不仅可以提升性能,它也为你管理文件的压缩与缓存