DOM优化
- - JavaScript - Web前端 - ITeye博客1，Javascript语音与DOM操作就像孤岛. 他们之间的通行是要借助船的，而使用船是有很大成本的. 所以，要先做完一个再做另一个，最好不要交替进行. 如：添加1000个li时，先用一个字符串拼接好，最后一次追加到父节点，而不是向父节点追加1000次，一次追加一个. 如：添加1000个li时，先放到fragment，再添加到UL中.
DOM优化
标签：
dom
优化
| 发表时间：2014-09-21 21:01 | 作者：zccst
出处：http://www.iteye.com
作者：zccst
1，Javascript语音与DOM操作就像孤岛。他们之间的通行是要借助船的，而使用船是有很大成本的。
所以，要先做完一个再做另一个，最好不要交替进行。
如：添加1000个li时，先用一个字符串拼接好，最后一次追加到父节点，而不是向父节点追加1000次，一次追加一个。
var lis = "";
for(var i = 0; i < 1000; i++){
lis += "<li>"+i+"</li>";
}
oUl.appendChild(lis);
而不是：
for(var i = 0; i < 1000; i++){
oUl.appendChild("<li>"+i+"</li>");
}
2，减少重排和重绘
（1）先放到一个碎片中
如：添加1000个li时，先放到fragment，再添加到UL中
（2）合并css，减少重回次数
style="height:200px;width:200px;background:red;";
而不是
obj.style.height = 200 + "px";
obj.style.width = 200 + "px";
obj.style.background = 200 + "px";
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
1，Javascript语音与DOM操作就像孤岛。他们之间的通行是要借助船的，而使用船是有很大成本的。
所以，要先做完一个再做另一个，最好不要交替进行。
如：添加1000个li时，先用一个字符串拼接好，最后一次追加到父节点，而不是向父节点追加1000次，一次追加一个。
var lis = "";
for(var i = 0; i < 1000; i++){
lis += "<li>"+i+"</li>";
}
oUl.appendChild(lis);
而不是：
for(var i = 0; i < 1000; i++){
oUl.appendChild("<li>"+i+"</li>");
}
2，减少重排和重绘
（1）先放到一个碎片中
如：添加1000个li时，先放到fragment，再添加到UL中
（2）合并css，减少重回次数
style="height:200px;width:200px;background:red;";
而不是
obj.style.height = 200 + "px";
obj.style.width = 200 + "px";
obj.style.background = 200 + "px";
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [dom 优化] 推荐：
前端优化三续：用script存放html代码来减少DOM节点数
- - 博客园_旁观者前端优化三续：美团的实践——用script存放html代码来减少DOM节点数. 玉伯在《 淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式》中提到，. 与前面 textarea 存放 html 代码 一样，你也可以 用 script 来存放，目的都是减少 DOM 节点数.
DOM详解
- - CSDN博客推荐文章 1.XML解析方式分为两种：dom和sax. (1)dom：(Document Object Model, 即文档对象模型) 是 W3C 组织推荐的处理 XML 的一种方式. (2) sax：(Simple API for XML) 不是官方标准，但它是 XML 社区事实上的标准，几乎所有的 XML 解析器都支持它.
javaScript DOM使用
- - CSDN博客互联网推荐文章通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素. 1 修改HTML元素内容. document.write(Date()); //在输入流中直接写
document.getElementById(id).innerHTML=new HTML. //改变已经有的元素内容
document.getElementById("image").src="landscape.jpg";.
Android DOM解析XML
- - CSDN博客移动开发推荐文章if(personChilds.item(y).getNodeType()==Node.ELEMENT_NODE){//判断当前节点是否是元素类型节点. 作者：jaycee110905 发表于2013-2-7 21:04:29 原文链接. 阅读：78 评论：0 查看评论.
jquery和DOM比较
- - JavaScript - Web前端 - ITeye博客1、window.onload和$(document).ready()的区别. 必须等整个网页中所有的内容加载完毕后(包括图片)才能执行. 网页中所有DOM结构绘制完毕后就执行,可能DOM元素并没有加载完. 2、jquery对象和DOM对象的区别. Juery对象是包装DOM后的产生的对象,DOM是原生对象，是一个基本的文档结构.
Javascript的DOM操作
- - CSDN博客Web前端推荐文章返回对拥有指定id的第一个对象进行访问. 返回带有指定名称的节点集合. 返回带有指定标签名的对象集合. 返回带有指定class名称的对象集合. 参数：是否复制原节点的所有属性. 注意：IE会忽略节点间生成的空白文本节点(例如，换行符号)，而Mozilla不会这样做. 在删除指定节点的时候不会出错，但是如果要删除最后一个子结点或者是第一个子结点的时候，就会出现问题.
DOM世界的观察者
- - 博客园_Ruby's Louvre浏览器自带的观察者实在太多了. 经典的不用说，就是onclick, attachEvent, addEventListner，可惜它们只是监听用户的行为. 不过这当中有个特例是propertychange，当元素的属性，不管是自定义还是原生，只要发生改变，就会触发回调. 我们还可以通过它的事件对象的propertyName知道那个元素发生改变.
javascript之XML DOM的解析
- - ITeye博客javascript之XML DOM的解析. . 长春 . 吉林市 . 四平 . 松原 . 通化 . .
也许，DOM 不是答案
- - 阮一峰的网络日志有一个词"手机网站"（mobile web），指供手机浏览的网站，但它是不存在的. 人们提到"移动互联网"的时候，其实专指另外一样东西：手机App. 一、Web App vs. 比起手机App，网站有一些明显的优点. 快速部署：升级只需在服务器更新代码. 超链接：可以与其他网站互连，可以被搜索引擎检索.