高性能JavaScript_编程

《高性能 JavaScript 编程》原文 2010 年 3 月 23 日首发，刘新翻译，欢迎指正！ http://blog.sina.com.cn/situdesign [原版] 第一章第二章第三章第四章第五章第六章第七章第八章第九章第十章 [译文] Loading and Execution 加载和运行 ........................................................................................................ 2 Data Access 数据访问 ............................................................................................................................ 26 DOM Scripting DOM 编程 .................................................................................................................... 56 Algorithms and Flow Control 算法和流程控制 .................................................................................. 104 Strings and Regular Expressions 字符串和正则表达式...................................................................... 139 Responsive Interfaces 响应接口 .......................................................................................................... 184 Ajax 异步 JavaScript 和 XML ............................................................................................................. 216 Programming Practices 编程实践 ........................................................................................................ 261 Building and Deploying High-Performance JavaScript Applications ..................................................... 279 Tools 工具 ............................................................................................................................................ 306 第一章 Loading and Execution 加载和运行 JavaScript performance in the browser is arguably the most important usability issue facing developers. The problem is complex because of the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed. In fact, most browsers use a single process for both user interface (UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input. JavaScript 在浏览器中的性能，可认为是开发者所要面对的最重要的可用性问题。此问题因 JavaScript 的阻塞特征而复杂，也就是说，当 JavaScript 运行时其他的事情不能被浏览器处理。事实上，大多数浏览器使用单进程处理 UI 更新和 JavaScript 运行等多个任务，而同一时间只能有一个任务被执行。JavaScript 运行了多长时间，那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。 On a basic level, this means that the very presence of a <script> tag is enough to make the page wait for the script to be parsed and executed. Whether the actual JavaScript code is inline with the tag or included in an external file is irrelevant; the page download and rendering must stop and wait for the script to complete before proceeding. This is a necessary part of the page’s life cycle because the script may cause changes to the page while executing. The typical example is using document.write() in the middle of a page (as often used by advertisements). For example: 从基本层面说，这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的 JavaScript 代码是内联的还是包含在一个不相干的外部文件中，页面下载和解析过程必须停下，等待脚本完成这些处理，然后才能继续。这是页面生命周期必不可少的部分，因为脚本可能在运行过程中修改页面内容。典型的例子是 document.write()函数，例如： <html> <head> <title>Script Example</title> </head> <body> <p> <script type="text/javascript"> document.write("The date is " + (new Date()).toDateString()); </script> </p> </body> </html> When the browser encounters a <script> tag, as in this HTML page, there is no way of knowing whether the JavaScript will insert content into the <p>, introduce additional elements, or perhaps even close the tag. Therefore, the browser stops processing the page as it comes in, executes the JavaScript code, then continues parsing and rendering the page. The same takes place for JavaScript loaded using the src attribute; the browser must first download the code from the external file, which takes time, and then parse and execute the code. Page rendering and user interaction are completely blocked during this time. 当浏览器遇到一个<script>标签时，正如上面 HTML 页面中那样，无法预知 JavaScript 是否在<p>标签中添加内容。因此，浏览器停下来，运行此 JavaScript 代码，然后再继续解析、翻译页面。同样的事情发生在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码，这要占用一些时间，然后解析并运行此代码。此过程中，页面解析和用户交互是被完全阻塞的。 Script Positioning 脚本位置 The HTML 4 specification indicates that a <script> tag may be placed inside of a <head> or <body> tag in an HTML document and may appear any number of times within each. Traditionally, script> tags that are used to load external JavaScript files have appeared in the <head>, along with <link> tags to load external CSS files and other metainformation about the page. The theory was that it's best to keep as many style and behavior