DOM 优化

用于操作XML和HTML的应用程序

• DOM节点
  
  • DOM树
  • DOM API
  • getElementById
  • childNodes
  • appendChlid
  • innerHTML

DOM 和 javascript

• 如两座独立的岛，岛之间的联系如桥一样，往返次数少，则性能好
• innerHTML 与 DOM方法的对比
  
  • Chrome(webkit): DOM 方法比innerHTML性能好
  • IE ,firefox: 相反

优化

• 减少DOM的操作

  • 节点克隆
    
    • cloneNode
  • 访问元素集合
    
    • 尽量用局部变量
  • 元素节点
    
    • 尽量用只获取元素节点的方法
  • 选择API
    
    • 利用querySelector,querySelectorAll

• DOM与浏览器

  • 重排：改变页面的内容
  • 重绘：浏览器显示的内容

  • 添加顺序
    - 尽量在appendChild之前操作

  • 合并dom操作

    • 利用cssText

oLi.style.cssText ='width:100px;height:100px';

• 缓存布局信息
• 文档碎片
  - createDocumentFragment()

 var oFrag = document.createDocumentFragment();
        ...
        oFrag.appendChild(oLi);
        ...
        oUI.appendChild(oLi);

• DOM 与 事件
  - 事件委托
• DOM与前端模板
  
  • 能更好的对逻辑和视图分离，MVC架构的基础