iColin 

最近又重新查阅了一些关于reflow(回流)、repaint(重绘)的资料，整理成笔记：

1. 什么是reflow和repaint

“Repaint is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. ”
“Reflow is a more significant change. It is the name of the web browser process for re-calculating the positions and geometries of elements in the document”

Repaint发生在当某些元素由不可见变为可见，或由可见变为可见的情况下，前提是不改变文档的layout模型。
Reflow是一个更加明显的改变，它是浏览器重新计算文档元素的尺寸和位置的一个过程。

2. 什么情况下会发生reflow和repaint

a) Repaint

• Adding an outline to a element //增加outline属性
• Changing the background color //改变背景色
• Changing the visibility style //改变visibility属性

b) Reflow

• Resize the window //调整浏览器窗口大小
• A script manipulating DOM tree //脚本操作DOM
• Manipulating the className property of an element //操纵className属性
• Style changed that affect the layout //修改影响layout的样式
• Adding or removing a stylesheet //添加一处样式表
• Calculating offsetWidth and offsetHeight //计算offsetWidth和offsetHeight
• Contents changed,such as typing text in an input box //内容改变，比如在文本框内输入文本
• Activation of CSS pseudo classes  //激活伪类

3. reflow和repaint带来什么影响

过多Reflow和Repaint会导致DOM渲染变慢，甚至破坏layout模型

Repaint requires the engine to search through all elements to determine what is visible, and what should be displayed.
The engine must reflow the relevant element to work out where the various parts of it should now be displayed. Its children will also be reflowed to take the new layout of their parent into account. Elements that appear after the element in the DOM will also be reflowed to calculate their new layout, as they may have been moved by the initial reflows. Ancestor elements will also reflow, to account for the changes in size of their children. Finally, everything is repainted.

对于Repaint，需要浏览器引擎搜索整个DOM节点，然后决定各部分该如何呈现。
对于Reflow，引擎需要reflow相关的元素来计算各部分的现实方式，该元素的子节点也要根据新的layout模型reflow，出现在该元素之后的元素也需要reflow来计算新的layout模型，因为他们可能被初始化reflow移除掉，并且该元素的祖先元素也要reflow来计算这些子级元素的改变，总之，所有的都被repaint了。

下图列举了各浏览器对于各种样式修改引发的reflow次数：

4. 如何避免reflow

• Reduce unnecessary DOM depth //减少不必要的DOM层级
• Making several style changes at once //一次修改多个样式
• Avoid tables for layout //避免使用table布局
• Avoid css expression //避免使用cssExpression
• Apply animations to elements that are position fixed or absolute //让动画元素绝对或者固定定位
• Trading smoothness for speed //牺牲流畅度来换取速度
• Avoid inspecting large numbers of nodes //避免大规模操作节点
• Avoid modifications while traversing the DOM //避免边渲染DOM边改变DOM
• Cache DOM values in script variables //缓存DOM信息

5. 实例

Bug描述：winxp的IE7/8浏览器中，搜索页面会在页面加载后异步载入部分DOM结构，此时后面的DOM内容位置偏离了原始位置（见红框部分DOM内容）。

分析：javascript脚本操作DOM时引起的reflow导致祖先节点reflow和同一个祖先节点下的临近节点的reflow。在reflow时，layout模型发生了变化，部分浏览器引擎重新计算DOM的位置发生了一些错误。

6. 参考文献

• http://code.google.com/intl/zh-CN/speed/articles/reflow.html
• http://code.google.com/intl/zh-CN/speed/tools.html
• https://developer.mozilla.org/en/Notes_on_HTML_Reflow
• http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

由于会议邀请者的系统时间出错，我被早到了一个小时到达会议室，闲着无聊，就顺便看看新闻，在JE里面看到一个“区分IE和非IE的最短判断”，帖子中的解释是：根据IE在对数组使用toString方法时报错来判断，代码大致如下：

1
2
3
4
5

if (+[1,]){
    alert('您正在使用非IE浏览器');
}else {
    alert('您正在使用IE浏览器');
}

Well，这里使用了一元加法运算符，对这个不了解到可以看看下面的代码（关于对数组使用一元加法运算符，我暂时没找到正规文档，只好以实例来说明来推测）：

1
2
3
4

// 当数组只有1个元素时，返回这个数组元素
alert(+[1]);
// 当数组长度大于1时，返回NaN
alert(+[1,2]);

好吧，其实我想说“区分IE和非IE的最短判断”的是根据IE和标准浏览器对数组容错处理不一致的特性来实现的。

标准浏览器会忽悠数组中最后一个”,” （当作这是开发者不小心写上去的）， 而IE则不会忽略它，而且用undefined来填充最后一个数组元素。

1
2
3
4
5
6
7
8
9
10
11
12
13

var a = [1,] ;
// 查看数组a的length属性 枚举数组
// 通过这两步可以测试出非IE是忽略掉数组中最后一个空元素的
// 而IE却用undefined来填充最后一个元素
alert([1,].length);
for (var i = 0, le = a.length ; i < le; i++ ) {
    alert(a[i]);
}
 
// 由上述得知 +[1,] 相当于 +[1, undefined] 
// 根据上面一元运算符的实例，你不难想到在IE下+[1,]会返回NaN了
alert(+[1,]);
alert(+[1,undefined]);

—– split —–

BTW：最近时间排得紧，走路都在想些事情，以至于生活方面的事情都有点昏昏的，买东西忘了拿找零，取钱忘记了拿。一心无二用，以后做什么事情都要专注，哪怕是取钱，也要盯着带着印钞机余温的RMB从ATM中徐徐吐出，然后收回卡，放好钱包再走人。

“阅读jQuery源码”，在2010年尾时，我写下了这个plan。该是执行的时候了。

我选择的jQuery版本是1.4.4，在逐行阅读分析jQuery代码前，我首先快速阅读了jQuery的全部代码，大致了解了jQuery源码的结构：整个jQuery源码是一个自执行的匿名函数。给匿名函数有个传递一个window参数，这样做便于压缩源码内的window字符串。在源码中，通过自执行函数来将jQuery和$变量保留给全局作用域供用户使用（#898）。

在接下来的时间，我将jQuery源码分成几大块进行逐行阅读分析。本文记录了第一部分的一些笔记。

构造jQuery对象（#20-#898）

jQuery对象并不是new jQuery()生成的，而是实例化构造函数jQuery.fn.init()生成的，看看源码中这几个关系：

1
2
3
4
5
6
7
8

jQuery.prototype = jQuery.fn #99
//  jQuery的fn属性和其原型是指向同一个对象
 
jQuery.fn.init.prototype = jQuery.fn  #327
// 把jQuery的原型挂在jQuery.fn.init的原型链上，以便于外部的jQuery对象能访问jQuery原型链上的所有方法
 
jQuery.extend = jQuery.fn.extend #329
// 他们指向同一个扩展方法

这个部分伊始定义了很多正则，比如判断查询器字符类型的，判断JSON数据相关的，判断浏览器userAgent等待。还有定义一些Object方法的别名。

jQuery的原型函数

在#99开始定义jQuery的原型，jQuery大部分功能都是通过其的静态方法来实现的，原型中的方法只是暴露给外部的API接口，其中：

• init方法根据传递的selector参数查询出对应的对象并返回；
• get方法会根据传递参数返回指定的对象元素；
• pushStack方法将传递的对象压入jQuery对象中；
• each 你懂的；
• ready 判断DOM是否加载完毕；
• eq 根据参数获取指定位置的数组元素；

阅读这个条目剩下部分 »

之前自己在做js动画组件时遇到了JS时钟精度问题，遂去参考下jQuery的处理方式，顺便把jQuery的动画组件部分简要分析了一遍。

jQuery组件都是由一个API接口函数暴露给用户的，组件的核心功能由有底层函数去完成。JQuery动画组件的接口函数就是animate。在了解animate之前，先了解到jQuery中动画相关的几个属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 用来设置定时器的变量
var timerId ;
 
jQuery.extend({
    // 修正一些参数，比如在回调函数中加入队列控制，并把这些修正后的参数放置一个对象里面返回
    speed: function( speed, easing, fn ) {},
 
    // 缓冲函数，决定动画运行方式
    easing: {},
 
    // 用来存储 执行动画实例单步的方法 的数组（有点拗口）
    timers: [],
 
    // 动画构造函数
    fx: function( elem, options, prop ) {}
 
});

结合我在源码中加的一些注释，简要描述jQuery的动画过程：
animate方法，首先调用speed方法去修正参数，然后用枚举或者队列的方式去执行多个动画。接下来，遍历动画中要修改的属性，修正属性值，并将每个属性生成一个动画实例。调用实例custom方法将属性从开始值过渡到结束值。

custom方法，把动画的单步操作(step方法)压入到前面提到的timers数组中，并调用tick遍历执行所有动画。

step方法——动画的单步操作，计算动画的逝去时间，并将逝去时间与预定动画时长的比值作为动画的变化比值，将比比值结合动画缓冲函数，计算出动画变化值。如果动画逝去时间超过预定动画时长，则将属性更新到最后一帧，并调用预定的回调函数。返回false，表示该动画实例已完成。

tick方法——定时遍历执行所有动画实例的step方法。如果step方法返回为false（该动画实例已完成），则将包含执行step方法的函数从timers数组中移除，如果timers数组为空（全部动画实例都运行完毕），执行stop方法。

stop方法——终止动画，停止定时器，并清空定时器变量timerId

看完jQuery源码，自己也改造了一个。满足最基本的功能呢 查看Demo

下面是JQuery动画组件的大部分源码（我加了一些注释）：
阅读这个条目剩下部分 »

用Js封装了一个常用的动画组件 (googleCode) ，发现动画完成所需的时间在IE和在其他浏览器下有很大的差别。

开始以为是组件中调用的函数过于复杂，导致IE计算太耗时，拖延了整个动画的完成时间。于是选择了最简单的函数来实现动画，但问题依旧存在。排除了函数的复杂性，那就只可能是setTimeout的问题了。

setTimeout(code, millisec); 在指定的毫秒数后调用函数或者表达式。(我在后面将称“指定的毫秒数”为调用间隔)

疑问：IE是否在我指定的毫秒数之后执行了函数呢？

把代码精简到最少，继续测试，下面的的一段代码用来连续10次调用run函数（调用间隔是10ms），执行完后弹出的结果是调用10次函数耗费的总毫秒数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
//< ![CDATA[
var animAlex = function (d) {
    var t = 0 ;
    var run = function () {
        if (t < d){
            t++;
            //尝试修改这里的参数 从0到15 都会按15计算
            setTimeout(run, 10);
        }else {
            alert(+ new Date() - s );
        }
    } ;
    run();
} ;
var s = + new Date() ;
animAlex(10);
//]]>
</script>

点击查看demo

忽略函数执行时间(这里，函数的执行时间确实可忽略)，调用10次函数所需时间的理论值等于调用间隔和执行次数的乘积，这里调用间隔是10ms ， 执行了10次，则总需时间 10×10 = 100ms ，当然浏览器不可能完全精准。但误差也应该保证在正负10ms以内。

面对现实，执行结果是：
阅读这个条目剩下部分 »