博文地址：http://www.swordair.com/tools/css-hack-table/

点击查看大图

word-break : normal | break-all | keep-all （IE专有属性）

参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
对应的脚本特性为wordBreak。

示例：div {word-break : break-all; } 阅读全文...　

重绘(reflow)与重排(repaint)

引起重排的操作：

1. 添加或删除可见的DOM元素
2. 元素位置的改变
3. 元素尺寸的改变（margin,padding,border,width,height and so on）
4. 内容的改变（文本，图片尺寸的改变）
5. 页面渲染器初始化
6. 浏览器窗口尺寸的改变

渲染树变化的排队与刷新，获取布局信息的操作会导致队列刷新

如：offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollHeight,scrollWidth,clientTop,clientLeft,clientHeight,clientWidth,getComputedStyle()

减少重绘，重排

1. 使DOM脱离文档

• 隐藏元素，应用修改重新显示
• document.fragment
• clone old  replacechild

1、innerHTML比原生的DOM方法效率更高。（一些老版的浏览器并不一定）

2、读取元素集合的length属性时，最好是把长度缓存到一个局部变量中，然后在循环的条件语句中使用该变量；或者在特定条件下把集合转化为一个数组，一般编历数组比集合快。

1
2
3
4
5
6
7

function toArray(coll) {
   for(var i = 0, a = [], len = coll.length; i < len; i++){
      a[i] = coll[i];
   }
   return a;
}
例如：var coll = document.getElementByTagName('div');　var newarr = toArray(coll);

3、需要从某一个DOM元素开始，操作周围元素时，或者递归查找所有子节点，可以使用childNodes得到元素集合，或用nextSibling来获取每个相邻元素

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

function testNextSibling() {
   var el = document.getElementById('mydiv'), ch = el.firstChild, name = '';
   do {
     name = ch.nodeName;
  }while (ch = ch.nextSibling);
  return name;
}
 
function testChildNodes() {
   var el = document.getElementById('mydiv'), ch = el.childNodes, len = ch.length, name = '';
   for (var i = 0; i < len; i++){
      name = ch[i].nodeName;
   }
  return name;
}
在不同浏览器中，这两种方法运行时间几乎相等。但IE6中，nextSibling快了16倍，IE7中是105倍。

阅读全文...