docs(bom): edit engine

ruanyf · ruanyf · commit 633c87d99ca8 · 2016-08-07T17:32:11.000+08:00
diff --git a/bom/engine.md b/bom/engine.md
@@ -120,17 +120,19 @@ What time is it?
 
 `javascript:`协议的常见用途是书签脚本Bookmarklet。由于浏览器的书签保存的是一个网址，所以`javascript:`网址也可以保存在里面，用户选择这个书签的时候，就会在当前页面执行这个脚本。为了防止书签替换掉当前文档，可以在脚本最后返回`void 0`。
 
-## `<script>`标签的工作原理
+## script标签
 
-正常的网页加载流程是这样的。
+### 工作原理
+
+浏览器加载JavaScript脚本，主要通过`<script>`标签完成。正常的网页加载流程是这样的。
 
 1. 浏览器一边下载HTML网页，一边开始解析
 2. 解析过程中，发现`<script>`标签
 3. 暂停解析，网页渲染的控制权转交给JavaScript引擎
 4. 如果`<script>`标签引用了外部脚本，就下载该脚本，否则就直接执行
 5. 执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页
 
-也就是说，加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是JavaScript可以修改DOM（比如使用`document.write`方法），所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。
+加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是JavaScript可以修改DOM（比如使用`document.write`方法），所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。
 
 如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。
 
@@ -185,7 +187,7 @@ What time is it?
 </body>
 ```
 
-如果有多个script标签，比如下面这样。
+如果有多个`script`标签，比如下面这样。
 
 ```html
 <script src="a.js"></script>
@@ -202,7 +204,7 @@ Gecko和Webkit引擎在网页被阻塞后，会生成第二个线程解析文档
 
 此外，对于来自同一个域名的资源，比如脚本文件、样式表文件、图片文件等，浏览器一般最多同时下载六个（IE11允许同时下载13个）。如果是来自不同域名的资源，就没有这个限制。所以，通常把静态文件放在不同的域名之下，以加快下载速度。
 
-## defer属性
+### defer属性
 
 为了解决脚本文件下载阻塞网页渲染的问题，一个方法是加入defer属性。
 
@@ -222,7 +224,7 @@ Gecko和Webkit引擎在网页被阻塞后，会生成第二个线程解析文档
 
 对于内置而不是连接外部脚本的script标签，以及动态生成的script标签，`defer`属性不起作用。
 
-## async属性
+### async属性
 
 解决“阻塞效应”的另一个方法是加入`async`属性。
 
@@ -245,62 +247,7 @@ Gecko和Webkit引擎在网页被阻塞后，会生成第二个线程解析文档
 
 一般来说，如果脚本之间没有依赖关系，就使用`async`属性，如果脚本之间有依赖关系，就使用`defer`属性。如果同时使用`async`和`defer`属性，后者不起作用，浏览器行为由`async`属性决定。
 
-## 重流和重绘
-
-渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。
-
-页面生成以后，脚本操作和样式表操作，都会触发重流（reflow）和重绘（repaint）。用户的互动，也会触发，比如设置了鼠标悬停（`a:hover`）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。
-
-重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，只会导致重绘，而不会导致重流；改变元素的布局，则会导致重绘和重流。
-
-大多数情况下，浏览器会智能判断，将重流和重绘只限制到相关的子树上面，最小化所耗费的代价，而不会全局重新生成网页。
-
-作为开发者，应该尽量设法降低重绘的次数和成本。比如，尽量不要变动高层的DOM元素，而以底层DOM元素的变动代替；再比如，重绘`table`布局和`flex`布局，开销都会比较大。
-
-```javascript
-var foo = document.getElementById('foobar');
-
-foo.style.color = 'blue';
-foo.style.marginTop = '30px';
-```
-
-上面的代码只会导致一次重绘，因为浏览器会累积DOM变动，然后一次性执行。
-
-下面是一些优化技巧。
-
-- 读取DOM或者写入DOM，尽量写在一起，不要混杂
-- 缓存DOM信息
-- 不要一项一项地改变样式，而是使用CSS class一次性改变样式
-- 使用document fragment操作DOM
-- 动画时使用absolute定位或fixed定位，这样可以减少对其他元素的影响
-- 只在必要时才显示元素
-- 使用`window.requestAnimationFrame()`，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流
-- 使用虚拟DOM（virtual DOM）库
-
-下面是一个`window.requestAnimationFrame()`对比效果的例子。
-
-```javascript
-// 重绘代价高
-function doubleHeight(element) {
-  var currentHeight = element.clientHeight;
-  element.style.height = (currentHeight * 2) + 'px';
-}
-
-all_my_elements.forEach(doubleHeight);
-
-// 重绘代价低
-function doubleHeight(element) {
-  var currentHeight = element.clientHeight;
-
-  window.requestAnimationFrame(function () {
-    element.style.height = (currentHeight * 2) + 'px';
-  });
-}
-
-all_my_elements.forEach(doubleHeight);
-```
-
-## 脚本的动态嵌入
+### 脚本的动态嵌入
 
 除了用静态的`script`标签，还可以动态嵌入`script`标签。
 
@@ -348,7 +295,7 @@ all_my_elements.forEach(doubleHeight);
 
 此外，动态嵌入还有一个地方需要注意。动态嵌入必须等待CSS文件加载完成后，才会去下载外部脚本文件。静态加载就不存在这个问题，`script`标签指定的外部脚本文件，都是与CSS文件同时并发下载的。
 
-## 加载使用的协议
+### 加载使用的协议
 
 如果不指定协议，浏览器默认采用HTTP协议下载。
 
@@ -393,6 +340,61 @@ all_my_elements.forEach(doubleHeight);
 
 以上四步并非严格按顺序执行，往往第一步还没完成，第二步和第三步就已经开始了。所以，会看到这种情况：网页的HTML代码还没下载完，但浏览器已经显示出内容了。
 
+### 重流和重绘
+
+渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。
+
+页面生成以后，脚本操作和样式表操作，都会触发重流（reflow）和重绘（repaint）。用户的互动，也会触发，比如设置了鼠标悬停（`a:hover`）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。
+
+重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，只会导致重绘，而不会导致重流；改变元素的布局，则会导致重绘和重流。
+
+大多数情况下，浏览器会智能判断，将重流和重绘只限制到相关的子树上面，最小化所耗费的代价，而不会全局重新生成网页。
+
+作为开发者，应该尽量设法降低重绘的次数和成本。比如，尽量不要变动高层的DOM元素，而以底层DOM元素的变动代替；再比如，重绘`table`布局和`flex`布局，开销都会比较大。
+
+```javascript
+var foo = document.getElementById('foobar');
+
+foo.style.color = 'blue';
+foo.style.marginTop = '30px';
+```
+
+上面的代码只会导致一次重绘，因为浏览器会累积DOM变动，然后一次性执行。
+
+下面是一些优化技巧。
+
+- 读取DOM或者写入DOM，尽量写在一起，不要混杂
+- 缓存DOM信息
+- 不要一项一项地改变样式，而是使用CSS class一次性改变样式
+- 使用document fragment操作DOM
+- 动画时使用absolute定位或fixed定位，这样可以减少对其他元素的影响
+- 只在必要时才显示元素
+- 使用`window.requestAnimationFrame()`，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流
+- 使用虚拟DOM（virtual DOM）库
+
+下面是一个`window.requestAnimationFrame()`对比效果的例子。
+
+```javascript
+// 重绘代价高
+function doubleHeight(element) {
+  var currentHeight = element.clientHeight;
+  element.style.height = (currentHeight * 2) + 'px';
+}
+
+all_my_elements.forEach(doubleHeight);
+
+// 重绘代价低
+function doubleHeight(element) {
+  var currentHeight = element.clientHeight;
+
+  window.requestAnimationFrame(function () {
+    element.style.height = (currentHeight * 2) + 'px';
+  });
+}
+
+all_my_elements.forEach(doubleHeight);
+```
+
 ### JavaScript引擎
 
 JavaScript引擎的主要作用是，读取网页中的JavaScript代码，对其处理后运行。
diff --git a/grammar/basic.md b/grammar/basic.md
@@ -440,50 +440,15 @@ switch (x) {
 
 上面代码中，由于变量`x`没有发生类型转换，所以不会执行`case true`的情况。这表明，`switch`语句内部采用的是“严格相等运算符”，详细解释请参考《运算符》一节。
 
-`switch`结构不利于代码重用，往往可以用对象形式重写。
-
-```javascript
-function getItemPricing(customer, item) {
-  switch(customer.type) {
-    case 'VIP':
-      return item.price * item.quantity * 0.50;
-    case 'Preferred':
-      return item.price * item.quantity * 0.75;
-    case 'Regular':
-    case default:
-      return item.price * item.quantity;
-  }
-}
-```
-
-上面代码根据不同用户，返回不同的价格。你可以发现，`switch`语句包含的三种情况，内部逻辑都是相同的，不同只是折扣率。这启发我们可以用对象属性，重写这个判断。
-
-```javascript
-var pricing = {
-  'VIP': 0.50,
-  'Preferred': 0.75,
-  'Regular': 1.0
-};
-
-function getItemPricing(customer, item) {
-  if (pricing[customer.type])
-    return item.price * item.quantity * pricing[customer.type];
-  else
-    return item.price * item.quantity * pricing.Regular;
-}
-```
-
-如果价格档次再多一些，对象属性写法的简洁优势就更明显了。
-
 ### 三元运算符 ?:
 
 JavaScript还有一个三元运算符（即该运算符需要三个运算子）`?:`，也可以用于逻辑判断。
 
 ```javascript
-(contidion) ? expression1 : expression2
+(contidion) ? expr1 : expr2
 ```
 
-上面代码中，如果`contidion`为`true`，则返回`expression1`的值，否则返回`expression2`的值。
+上面代码中，如果`contidion`为`true`，则返回`expr1`的值，否则返回`expr2`的值。
 
 ```javascript
 var even = (n % 2 === 0) ? true : false;
