首页 > 代码库 > 【DOM】1.DOM优化
【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()