作者： KeeKim Heng, Google Web Developer

翻译：http://www.blogjava.net/emu/archive/2010/03/01/314185.html

在我们开发互联网富应用（RIA）时，我们经常写一些javascript脚本来修改或者增加页面元素，这些工作最终是DOM——或者说文档对象模 型——来完成的，而我们的实现方式会影响到应用的响应速度。

DOM操作会导致浏览器重解析(reflow)，这是浏览器的一个决定页面元素如何展现的计算过程。直接修改DOM，修改元素的CSS样式，修改浏 览器的窗口大小，都会触发重解析。读取元素的布局属性比如offsetHeithe或者offsetWidth也会触发重解析。重解析需要花费计算时间， 因此重解析触发的越少，应用就会越快。

DOM操作通常要不就是修改已经存在的页面上的元素，要不就是创建新的页面元素。下面的4种优化方案覆盖了修改和创建DOM节点两种方式，帮助你减 少触发浏览器重解析的次数。

方案一：通过CSS类名切换来修改DOM 

这个方案让我们可以一次性修改一个元素和它的子元素的多个样式属性而只触发一次重解析。

需求：

（emu注：原文作者写到这里的时候脑子显然短路了一下，把后面的Out-of-the-flow DOM Manipulation模式要解决的问题给摆到这里来了，不过从示范代码中很容易明白作者真正想描述的问题，因此emu就不照翻原文了）

我们现在需要写一个函数来修改一个超链接的几个样式规则。要实现很简单，把这几个规则对应的属性逐一改了就好了。但是带来的问题是，每修改一个样式 属性，都会导致一次页面的重解析。

解决方案

要解决这个问题，我们可以先创建一个样式名，并且把要修改的样式规则都放到这个类名上，然后我们给超链接添加上这个新类名，就可以实现添加几个样式 规则而只触发一次重解析了。这个模式还有个好处是也实现了表现和逻辑相分离。

（emu注：作者在这里再次脑子短路，把DocumentFragment DOM Generation模式的介绍提前到这里来了，emu只好再次发挥一下）
上一个方案解决的是修改一个超链接的问题，当一次需要对很多个超链接进行相同修改的时候，这个方案就可以大显身手了。

需求

需求是这样的，我们要写一个函数来修改一个指定元素的子元素中所有的超链接的样式名（className）属性。要实现很简单，我们可以通过遍历每 个超链接并且修改它们的样式名来完成任务。但是带来的问题就是，每修改一个超链接都会导致一次重解析。

解决方案

要解决这个问题，我们可以把被修改的指定元素从DOM里面移除，再修改所有的超链接，然后在把这个元素插入回到它原来的位置上。为了完成这个复杂的 操作，我们可以先写一个可重用的函数，它不但移除了这个DOM节点，还返回了一个把元素插回到原来的位置的函数。

有了上面这个函数，现在我们就可以在一个不需要解析渲染的元素上面修改那些超链接了。这样只在移除和插入元素的时候各触发一次重解析。

方案三：一次性的DOM元素生成

这个方案让我们创建一个元素的过程只触发一次重解析。在创建完元素以后，先进行所有需要的修改，最后才把它插入到DOM里面去就可以了

需求

需求是这样的，实现一个函数，往一个指定的父元素上插入一个超链接元素。这个函数要同时可以设置这个超链接的显示文字和样式类。我们可以这样做：创 建元素，插入到DOM里面，然后设置相应的属性。这就要触发3次重解析。

解决方案

很简单，我们只要把插入元素这个操作放到最后做，就可以只进行一次重解析了。

不过，要是我们想要插入很多个超链接到一个元素里面的话，那么这个做法还是有问题：每插入一个超链接还是要触发一次重解析。下一个方案可以解决这个 问题。

方案四：通过文档片段对象（DocumentFragment）创建一组元素

这个方案允许我们创建并插入很多个元素而只触发一次重解析。要实现这点需要用到所谓的文档片段对象（DocumentFragment）。我们先在 DOM之外创建一个文档片段对象（这样它也就不需要解析和渲染），然后我们在文档片段对象中创建很多个元素，最后我们把这个文档片段对象中所有的元素一次 性放到DOM里面去，只触发一次重解析。

需求

我们要写一个函数，往一个指定的元素上面增加10个超链接。如果我们简单的直接插入10个超链接到元素上面，就会触发10次重解析。

解决方案

要解决这个问题，我们要先创建一个文档片段对象，然后把每个新创建的超链接都插入到它里面去。当我们把文档片段对象用appendChild命令插 入到指定的节点时，这个文档片段对象的所有子节点就一起被插入到指定的元素里面，而且只需要触发一次重解析。

之前对这里是充满了很高的期望的。

晚上8点多到达，然后乘公车来到同事家。由于是晚上吧，感觉整个城市有点偏暗，另外，公车司机素质貌似与深圳那边的同行们有一定的差距，需要多多学习提高。

次日，随同事简单逛到了京杭大运河边上，看到河面上来往频繁的货轮和客轮，没想到，这条古运河仍然充满了活力，赞！

旁边是环球中心和浙江省博物馆，进到博物馆看看，布置的很有感觉，下次记得带相机去。

今天办理入职，一切顺利！^_^

自适应父节点大小类 - ARBox

在线演示：http://www.jslab.org.cn/?tag=AutoSizeBox

 在处理border的时候遇到了浏览器兼容的问题，给我们“找麻烦”的是Opera同学！

问题描述：

有DOM对象：dobj，当此对象未设置border样式的时候，我们通过dobj.currentStyle.borderWidth得到的值会是3，当我们设置此对象的border:none时，dobj.currentStyle.borderWidth仍然会是3。

当然，在浏览器渲染的时候并不会因为此问题而将border显示出来，因为borderStyle和borderColor都没有设置。

可以考虑在以后的CSS书写中，将border:none更改为border:0，这样就可以保证各浏览器在JS取border值时的一致了。

在easyui.getmpb中对opera的此问题单独做了修正，所以可以放心使用。^_^

最近更新了EasyUI及相关组件，dhATV4有重大更新！

兼容处理：

手动输入事件捕获：手动输入内容时会触发

复制粘贴事件捕获：复制粘贴内容时会触发

程序设置事件捕获：javascript程序动态设置内容时会触发

拖入事件捕获：选定内容拖入时会触发

原型代码：

var easychange = function(foochange){
    if(!foochange||foochange.constructor!=Function){return;}
    try{this.watch("value",function(id,oldval,newval){foochange(newval);return newval;});}catch(e){}
    this.setAttribute('oninput','('+foochange.toString()+')(this.value)');
    this.onpropertychange = function(){foochange(this.value);};
    this.onmousemove = function(){foochange(this.value);};
    this.onkeyup = function(){foochange(this.value);};
};

在线演示：http://www.jslab.org.cn/?tag=easyChange

/*Bresenham画圆算法*/
var arc = function(x0,y0,r){/*起点坐标x0,y0,半径*/
 var p,x,y,i,ret = [];
 p = 3-2*r,x = 0,y = r,i = r;
 for(;x<=y;){
  ret.push([x+i+x0,y+i+y0]);
  ret.push([-x+i+x0,-y+i+y0]);
  ret.push([-x+i+x0,y+i+y0]);
  ret.push([x+i+x0,-y+i+y0]);
  ret.push([y+i+x0,x+i+y0]);
  ret.push([-y+i+x0,x+i+y0]);
  ret.push([-y+i+x0,-x+i+y0]);
  ret.push([y+i+x0,-x+i+y0]);
  if(p<0){
   p = p+4*x+6;
  }else{
   y--,p = p+4*(x-y)+10;
  }
  x++;
 }
 return ret.slice(0);
};

/*Bresenham画椭圆算法*/
var ellipse = function(px,py,rx,ry){/*起点坐标px,py,x轴半径rx,y轴半径ry*/
 px = px+rx,py = py+ry;
 var x = 0,y = ry,rx2 = rx*rx,ry2 = ry*ry,ret = [];
 var dx = ry2/Math.sqrt(ry2+rx2),p = ry2-rx2*ry;
 while(dx<=y){
  ret.push([px+x,py+y]);
  ret.push([px+x,py-y]);
  ret.push([px-x,py+y]);
  ret.push([px-x,py-y]);
  if(p<=0){
   ++x;
  }else{
   ++x,--y;
  }
  p = ry2*(x+1)*(x+1)+rx2*(y*y-y)-rx2*ry2;
 }
 p = ry2*(x*x+x)+rx2*(y*y-y)-rx2*ry2;
 while(y>0){
  ret.push([px+x,py+y]);
  ret.push([px+x,py-y]);
  ret.push([px-x,py+y]);
  ret.push([px-x,py-y]);
  if(p>=0){
   --y,p = p-2*rx2*y-rx2;
  }else{
   --y,++x,p = p-2*rx2*y-rx2+2*ry2*x+2*ry2;
  }
 }
 ret.push([px+x,py]);
 ret.push([px-x,py]);
 return ret.slice(0);
};

/*Bresenham画直线算法*/
var line = function(x1,y1,x2,y2){/*起点坐标x1,y1,终点坐标x2,y2*/
 var dx,dy,h,x,y,t,ret = [];
 if(x1>x2){x1 = [x2,x2=x1][0],y1 = [y2,y2=y1][0];}
 dx = x2-x1,dy = y2-y1,x = x1,y = y1;
 if(!dx){
  t = (y1>y2)?-1:1;
  while(y!=y2){ret.push([x,y]);y += t;}
  return ret.slice(0);
 }
 if(!dy){
  while(x!=x2){ret.push([x,y]);x++;}
  return ret.slice(0);
 }
 if(dy>0){
  if(dy<=dx){
   h = 2*dy-dx,ret.push([x,y]);
   while(x!=x2){
    if(h<0){
     h += 2*dy;
    }else{
     y++,h += 2*(dy-dx);
    }
    x++,ret.push([x,y]);
   }
  }else{
   h = 2*dx-dy,ret.push([x,y]);
   while(y!=y2){
    if(h<0){
     h += 2*dx;
    }else{
     ++x,h += 2*(dx-dy);
    }
    y++,ret.push([x,y]);
   }
  }
 }else{
  t = -dy;
  if(t<=dx){
   h = 2*dy+dx,ret.push([x,y]);
   while(x!=x2){
    if(h<0){
     h += 2*(dy+dx),y--;
    }else{
     h += 2*dy;
    }
    x++,ret.push([x,y]);
   }
  }else{
   dy = -dy,dx = -dx,y = y2,x = x2,ret.push([x,y]),h = 2*dx+dy;
   while(y!=y1){
    if(h<0){
     h += 2*(dx+dy),x--;
    }else{
     h += 2*dx;
    }
    y++,ret.push([x,y]);
   }
  }
 }
 return ret.slice(0);
};
 

参见：Bresenham直线,圆,椭圆算法

W3C Editor's Draft 21 October 2009

The canvas interface element

interface CanvasElement : Element {
      attribute unsigned long width;
      attribute unsigned long height;

      Object getContext(in DOMString contextId);//2d

      DOMString toDataURL(optional in DOMString type, in any... args);
      //image/png, quality level 0.0 to 1.0 ...
};

The 2D Drawing Context

interface CanvasRenderingContext2D {

  // back-reference to the canvas 
  readonly attribute HTMLCanvasElement canvas;

  // state 
  void restore(); // pop state stack and restore state
  void save(); 	  // push state on state stack 
        
  // transformations (default transform is the identity matrix)
  void rotate(in float angle);
  void scale(in float x, in float y);

  void setTransform(in float m11, in float m12, in float m21, in float m22, 
  in float dx, in float dy);

  void transform(in float m11, in float m12, in float m21, in float m22, 
  in float dx, in float dy);

  void translate(in float x, in float y);
        
  // compositing 
  attribute float globalAlpha; // (default 1.0)
  attribute DOMString globalCompositeOperation; // (default source-over)
        
  // colors and styles 
  attribute any fillStyle; // (default black)
  attribute any strokeStyle; // (default black)
  CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

  CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, 
  in float y1, in float r1);

  CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

  // line styles 
  attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
  attribute DOMString lineJoin; // "miter", "round", "bevel"  (default "miter")
  attribute float lineWidth; // (default 1)
  attribute float miterLimit; // (default 10)

  // shadows 
  attribute float shadowBlur; // (default 0)
  attribute DOMString shadowColor; // (default transparent black)
  attribute float shadowOffsetX; // (default 0)
  attribute float shadowOffsetY; // (default 0)

  // rects 
  void clearRect(in float x, in float y, in float w, in float h);
  void fillRect(in float x, in float y, in float w, in float h);
  void strokeRect(in float x, in float y, in float w, in float h);

  // Complex shapes (paths) API 
  void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle,
  in boolean anticlockwise);

  void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
  void beginPath();

  void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x,
  in float y);

  void clip();
  void closePath();
  void fill();
  void lineTo(in float x, in float y);
  void moveTo(in float x, in float y);
  void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
  void rect(in float x, in float y, in float w, in float h);
  void stroke();
  boolean isPointInPath(in float x, in float y);

  // text 
  attribute DOMString font; // (default 10px sans-serif)
  attribute DOMString textAlign; // "start", "end", "left", "right",
  "center" (default: "start")

  attribute DOMString textBaseline; // "top", "hanging", "middle",
  "alphabetic", "ideographic","bottom" (default: "alphabetic")

  void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);
  TextMetrics measureText(in DOMString text);
  void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);

  // drawing images 
  void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw,
  in float dh);

  void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float
  sh, in float dx, in float dy, in float dw, in float dh);

  void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw,
  in float dh);

  void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw,
  in float sh, in float dx, in float dy, in float dw, in float dh);

  void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw,
  in float dh);

  void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw,
  in float sh, in float dx, in float dy, in float dw, in float dh);

  // pixel manipulation
  ImageData createImageData(in float sw, in float sh);
  ImageData createImageData(in ImageData imagedata);
  ImageData getImageData(in float sx, in float sy, in float sw, in float sh);
  void putImageData(in ImageData imagedata,in float dx,in float dy,optional in float dirtyX,
  in float dirtyY, in float dirtyWidth, in float dirtyHeight);
};

interface CanvasGradient {
  // opaque object 
  void addColorStop(in float offset, in DOMString color);
};

interface CanvasPattern {
  // opaque object
};

interface TextMetrics {
  readonly attribute float width;
};

interface ImageData {
  readonly attribute CanvasPixelArray data;
  readonly attribute unsigned long height;
  readonly attribute unsigned long width;
};

interface CanvasPixelArray {
  readonly attribute unsigned long length;
  getter octet (in unsigned long index);
  setter void (in unsigned long index, in octet value);
};
}

See also: http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

依赖
    http://www.easyui.org.cn/easyui.js
    http://www.easyui.org.cn/easydragdrop.js

实例化
    new easySlider(100,0,100,46,'left','easyslider/',dalpha);
    new easySlider(默认值，起始值，结束值，上下左右四个方向，滑块样式目录，父节点)

事件
    ondrag
    滑块实例.ondrag = function(n){};
    参数n由滑块对象自动传出，只要指定该形参即可使用。

方法
    setValue(整数值value)
    getValue()

EasySlider在线演示：http://www.easyui.org.cn/easyslider.html