【DOM】1.DOM优化

1.JS include ：DOM BOM ECMA

2.Browser 分别独立实现dom & JS

as if two isolated islands

3.JS操作DOM

from the island to the other one

4.DOM性能

The bridges between islands，charge everytime passing by

尽量减少过桥次数

5.innerHTML vs dom method

webkit:eg, chrome, dom>innerHTML

others:dom<innerHTML

 

二、减少DOM操作

1.节点克隆

cloneNode(true)里面也复制，性能较好

2.访问元素集合

尽量使用局部变量

var doc=document

3.元素节点

尽量 用只获取元素的节点办法

childNode->元素节点、文本节点

children->元素节点

firstChild

firstElementChild

 

4.选择器API

利用querySelector、querySelectorAll\

 

var oul=document.getElementById('ul1');

var ali=oul.getElementsByTagName('li');

 

var ali=document.querySelectorAll('#ul1 li');

 

三、DOM与浏览器的关系

1、重排：改变页面内容

2、重绘：浏览器显示内容

（以上两个最耗性能咯）

3、添加顺序：尽量在appendChild前添加操作

4、合并dom操作：利用CSSText

5、缓存布局信息

6、文档碎片：createDocumentFragment()

 

四、DOM与事件

事件委托

专门开课

五、DOM与前端模板

能更好的对逻辑和视图分离，MVC架构的基础

jquery.teml()