代码改变世界

[译] 高性能JavaScript 6至10章总结

2011-10-29 11:24  AndrewCja  阅读(511)  评论(2编辑  收藏  举报

作者:Nicholas C. Zakas

译者:andycja

 

第一章 可响应的界面

总结

JavaScript和界面更新在同一个进程里进行,所以一次只能其中之一被执行。这意味着当JavaScript在执行时界面无法响应用户输入,反之亦然。要有效的操控UI线程,意味着不能让JavaScript花太长时间执行而影响了用户体验。由此,请记住以下规则:

1、每一个JavaScript任务都应该在100毫秒内执行完毕。长时间的执行会使界面不能即使更新,从而使用户得到负面的体验。

2、在JavaScript执行时,不同的浏览器对用户的交互表现出不同的行为。但不管怎样,当JavaScript花太长时间执行是,用户会感觉困惑和疏离。

3、使用Timmer对象可以安排JavaScript代码的延迟执行,能够让你将须要长时间执行的代码拆分成多个小任务分开执行。

4web worder对象是新型浏览器的一个特性,它能使得JavaScript代码在UI线程之外执行,从而避免了UI阻塞。

网页应用越是复杂,就越有必要有效地操控UI线程。不管JavaScript代码有多么重要,都不应该对用户体验造成负面影响。

 

第七章 Ajax

总结

实现高性能的Ajax需要根据特定环境的要求,选择正确的数据格式和传输方法。

对于数据格式,XML得到广泛的支持,但它过于冗长且解析速度慢。JSON是轻量的,且解析速度快(当它充当内部代码而非字符串时),同时在交互访问上和XML相当。对于大数据量,用特殊字符分隔的自定义数据格式是非常轻量的,其解析速度也是最快的;不过,须要在服务端和客户端做更多的代码编写工作。

对于数据请求,当从同一个域请求数据时XHR给你最大的控制权和自由,不过传过来的数据会被当作字符串,从而可能须要解析时间。另一方面,通过动态script标签注入可以跨域请求和内建地执行JavaScriptJSON,不过,此方法没有强健的接口支撑,也不能读取响应头和响应状态码。综合XHRMultipart XHR)能够被用于降低请求的次数,并能够在一次响应中处理不同的文件类型,不过,此方法不能缓存请求的数据。对于发送数据,图片引导(image beacons)是一种简单而有效的方法。XHR也能被用于以POST方式发送大量数据。

1、除了这些数据格式和传输技术,还有以下几条指导可以帮助你的Ajax速度更高:

2、降低请求的次数,通过合并JavaScriptCSS文件,或者使用MXHR

3、在页面加载完成后再通过Ajax请求不是最重要的资源,以提高页面的响应速度。

4、保证你的代码能够优雅的处理错误,并在服务端对错误有所记录。

5、知道什么时候改用Ajax库,什么时候该自己编写轻量级的Ajax代码。

Ajax是挖掘你的站点潜在性能的一块宝地,因为现代站点会使用很多异步请求,也因为它还能提供本和它不相关的问题的解决方案,比如加载大量资源。能否创造性地使用Ajax,决定了一个站点是懒散的、不积极响应的,还是快速响应和高效的,决定了一个站点是受用户憎恨的还是喜爱的。

 

第八章 编程实践

JavaScript体现了和代码组织方式相关的性能挑战。随着网页应用越来越先进,包含越来越多的JavaScript代码,开始出现了一些编程模式和反模式(antipatterns)。请记住以下一些编程实践:

1、避免使用eval()函数和Function()构造函数,以避免代码的重复解析。同样的道理,将函数而不是字符串,作为参数传递给setTimeout()setInterval()

2、用对象字面量和数组字面量来创建对象和数组,这样,创建和初始化速度比非字面量形式要快得多。

3、避免重复同样的代码执行。比如,当须要进行浏览器类型判断时,使用延迟加载或条件提前加载技术。

4、当须要进行数学计算时,考虑使用按位操作符,这工作在数字的实际存储表示上。

5、内建函数比你编写的同样逻辑的JavaScript代码要快。应尽量使用内建函数。

对于经常执行的代码,如果能把这章所讲的多种优化技术和方法用上,你将可以看到极大的性能提高。

 

第九章 构建和发布高性能的JavaScript应用

总结

构建和发布过程对以JavaScrirpt为基础的应用的性能有巨大的影响。这个过程中的最总要的一些步骤是:

1、合并JavaScript文件以减少HTTP请求的次数。

2、使用YUI压缩器压缩JavaScript文件。

3、以压缩的方式传输JavaScript文件(gzip编码)。

4、通过恰当地设置HTTP响应头使得JavaScript文件在浏览器端得以缓存。通过给文件名加上时间戳来解决更新缓存的问题。

5、通过内容分发网络提供JavaScript文件,CDN不仅会提高性能,它还会为你管理压缩和缓存。

所有这些步骤应该用自动化的方式完成。可以使用公开的构建工具比如Apache Ant或者使用为你的特定需求而自定的构建工具。如果你能实践这些构建步骤,则能极大地提高需要大量JavaScript代码的网页应用或网站的性能。

 

第十章 工具

总结

当网页或应用表现得越来越慢,通过分析网页资产的来龙去脉和对执行的JavaScsript代码进行性能调优,你就能将优化的努力放在最需要的地方。

1、使用网络分析工具来定位加载JavaScript和其他资产的瓶颈。这能帮助你确定哪儿需要进行调优。

2、尽管传统的智慧说应该减少HTTP请求的次数,然而如果能延迟JavaScript的加载,页面则能更快地呈现,给用户带来更好的总体体验。

3、通过调优器来定位JavaScript执行缓慢的地方,诊断每个函数执行的时间,一个函数被调用的次数和调用栈本身,就能找到优化重点的所在之处。

4、虽然单次执行时间和调用的次数是最有价值的数据,而通过仔细考察函数如何被调用,有时也能找到另外的调优点。

这些工具帮助我们揭下了代码必须在其中执行的不友好的编程环境的神秘面纱。在开始进行优化之前使用它们进行分析,能够保证我们的时间花在了最需要的地方。