Repaints and Reflows 重绘和重排版
Once the browser has downloaded all the components of a page—HTML markup, JavaScript, CSS, images—it parses through the files and creates two internal data structures:
当浏览器下载完所有页面HTML标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据结构:
A DOM tree
A representation of the page structure
一棵DOM树
表示页面结构
A render tree
A representation of how the DOM nodes will be displayed
一棵渲染树
表示DOM节点如何显示
The render tree has at least one node for every node of the DOM tree that needs to be displayed (hidden DOM elements don't have a corresponding node in the render tree). Nodes in the render tree are called frames or boxes in accordance with the CSS model that treats page elements as boxes with padding, margins, borders, and position. Once the DOM and the render tree ......
第四章 Algorithms and Flow Control 算法和流程控制
The overall structure of your code is one of the main determinants as to how fast it will execute. Having a very small amount of code doesn't necessarily mean that it will run quickly, and having a large amount of code doesn't necessarily mean that it will run slowly. A lot of the performance impact is directly related to how the code has been organized and how you're attempting to solve a given problem.
代码整体结构是执行速度的决定因素之一。代码量少不一定运行速度快,代码量多也不一定运行速度慢。性能损失与代码组织方式和具体问题解决办法直接相关。
The techniques in this chapter aren't necessarily unique to JavaScript and are often taught as performance optimizations for other languages. There are some deviations from advice given for other languages, though, as there are many more JavaScript engines to deal with and their quirks need to be considered, but all of the te ......
Conditionals 条件表达式
Similar in nature to loops, conditionals determine how execution flows through JavaScript. The traditional argument of whether to use if-else statements or a switch statement applies to JavaScript just as it does to other languages. Since different browsers have implemented different flow control optimizations, it is not always clear which technique to use.
与循环相似,条件表达式决定JavaScript运行流的走向。其他语言使用if-else或者switch表达式的传统观点也适用于JavaScript。由于不同的浏览器针对流程控制进行了不同的优化,使用哪种技术并不总是很清楚。
if-else Versus switch if-else与switch比较
The prevailing theory on using if-else versus switch is based on the number of conditions being tested: the larger the number of conditions, the more inclined you are to use a switch instead of if-else. This typically comes down to which code is easier to read. The argument is that if-else is easier to read wh ......
Recursion Patterns 递归模式
When you run into a call stack size limit, your first step should be to identify any instances of recursion in the code. To that end, there are two recursive patterns to be aware of. The first is the straightforward recursive pattern represented in the factorial() function shown earlier, when a function calls itself. The general pattern is as follows:
当你陷入调用栈尺寸限制时,第一步应该定位在代码中的递归实例上。为此,有两个递归模式值得注意。首先是直接递归模式为代表的前面提到的factorial()函数,即一个函数调用自身。其一般模式如下:
function recurse(){
recurse();
}
recurse();
This pattern is typically easy to identify when errors occur. A second, subtler pattern involves two functions:
当发生错误时,这种模式比较容易定位。另外一种模式称为精巧模式,它包含两个函数:
function first(){
second();
}
function second(){
first();
}
first();
& ......
第五章 Strings and Regular Expressions 字符串和正则表达式
Practically all JavaScript programs are intimately tied to strings. For example, many applications use Ajax to fetch strings from a server, convert those strings into more easily usable JavaScript objects, and then generate strings of HTML from the data. A typical program deals with numerous tasks like these that require you to merge, split, rearrange, search, iterate over, and otherwise handle strings; and as web applications become more complex, progressively more of this processing is done in the browser.
几乎所有JavaScript程序都与字符串操作紧密相连。例如,许多应用程序使用Ajax从服务器获取字符串,将这些字符串转换成更易用的JavaScript对象,然后从数据中生成HTML字符串。一个典型的程序需要处理若干这样的任务,合并,分解,重新排列,搜索,遍历,以及其他方法处理字符串。随着网页应用越来越复杂,越来越多的此类任务将在浏览器中完成。
In JavaScript, regular expressions ar ......
Regular Expression Optimization 正则表达式优化
Incautiously crafted regexes can be a major performance bottleneck (the upcoming section, "Runaway Backtracking" on page 91, contains several examples showing how severe this can be), but there is a lot you can do to improve regex efficiency. Just because two regexes match the same text doesn't mean they do so at the same speed.
粗浅地编写正则表达式是造成性能瓶颈的主要原因(后面“回溯失控”一节有一些例子说明这是多么严重的问题),但还有很多可以改进正则表达式效率的地方。两个正则表达式匹配相同的文本并不意味着他们具有同等的速度。
Many factors affect a regex's efficiency. For starters, the text a regex is applied to makes a big difference because regexes spend more time on partial matches than obvious nonmatches. Each browser's regex engine also has different internal optimizations.
许多因素影响正则表达式的效率。首先,正则表达式适配的文本千差万别,部 ......