<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM优化</title>
<script>
window.onload = function () {
/*
* 一、DOM与JS
* DOM与JS相互独立，相当于两个小岛
* 1.JS操作DOM要过桥费，要减少过桥次数（有效）
* 2.innerHTML和DOM节点操作的比较（浏览器不同，效果不同）
* */
/*
* 1.JS操作DOM要过桥费，要减少过桥次数
* */
var oDiv = document.getElementById('div1');
console.time('hello');
for ( var i = 0; i < 5000; i++ ) {
// 进行了5000次DOM操作
oDiv.innerHTML += 'a';
}
console.timeEnd('hello'); // hello: 474.633ms
/*var oDiv = document.getElementById('div1');
var str = '';
console.time('hello');
for ( var i = 0; i < 5000; i++ ) {
str += 'a';
}
// 只进行了一次DOM操作
oDiv.innerHTML = str;
console.timeEnd('hello'); // hello: 3.394ms*/
/*
* 2.innerHTML和DOM节点操作的比较(差不多，在不同浏览器不同)
* */
/*var oDiv = document.getElementById('div1');
console.time('DOM');
for ( var i = 0; i < 500; i++ ) {
var oLi = document.createElement('p');
oDiv.appendChild(oLi);
}
console.timeEnd('DOM'); // DOM: 0.713ms*/
/*var oDiv = document.getElementById('div1');
console.time('innerHTML');
var str = '';
for ( var i = 0; i < 500; i++ ) {
str += '<p></p>';
}
oDiv.innerHTML = str;
console.timeEnd('innerHTML'); // innerHTML: 0.722ms*/
/*
* 二、减少DOM操作
* 1.节点克隆（有效）
* 2.访问元素集合，用局部变量（有效）
* 3.元素节点 firstChild 和 firstElement（有效）
* 4.选择器 ie8+ querySelectorAll（有效）
* */
/*
* 1.节点克隆
* */
/*var oDiv = document.getElementById('div1');
console.time('createElement');
for ( var i = 0; i < 5000; i++ ) {
var oLi = document.createElement('p');
oLi.innerHTML = 'p';
oDiv.appendChild(oLi);
}
console.timeEnd('createElement'); // createElement: 41.241ms*/
/*var oDiv = document.getElementById('div1');
var oLi = document.createElement('p');
oLi.innerHTML = 'p';
console.time('cloneNode');
for ( var i = 0; i < 5000; i++ ) {
var cloneNode = oLi.cloneNode();
oDiv.appendChild(cloneNode);
}
console.timeEnd('cloneNode'); // cloneNode: 5.752ms*/
/*
* 2.访问元素集合，用局部变量
* */
/*var oDiv = document.getElementById('div1');
var aLi = oDiv.getElementsByTagName('p');
for ( var i = 0; i < 5000; i++ ) {
var oLi = document.createElement('p');
oLi.innerHTML = 'p';
oDiv.appendChild(oLi);
}*/
/*console.time('aLi.length');
for ( var i = 0; i < aLi.length; i++ ) {}
console.timeEnd('aLi.length'); // aLi.length: 0.452ms*/
/*console.time('len');
var len = aLi.length;
for ( var i = 0; i < len; i++ ) {}
console.timeEnd('len'); // len: 0.235ms*/
/*
* 3.元素节点 firstChild 和 firstElementChilid
* */
/*var oDiv = document.getElementById('div1');
var aLi = oDiv.getElementsByTagName('p');
for ( var i = 0; i < 5000; i++ ) {
var oLi = document.createElement('p');
oDiv.appendChild(oLi);
}*/
/*console.time('firstChild');
console.log(oDiv.firstChild.nodeName);
console.timeEnd('firstChild'); //firstChild: 7.374ms*/
/*console.time('firstElementChild');
console.log(oDiv.firstElementChild.nodeName);
console.timeEnd('firstElementChild'); // firstElementChild: 6.261ms*/
/*
* 4.选择器 ie8+ querySelectorAll
* */
/*console.time('getElementBy');
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
console.timeEnd('getElementBy'); //getElementBy: 2.018ms*/
/*console.time('querySelectorAll');
var aLi = document.querySelectorAll('#ul1 li');
console.timeEnd('querySelectorAll');//querySelectorAll: 0.139ms*/
/*
* 三、DOM与浏览器
* 重排：结构改变
* 重绘：显示内容
* 1.appendChild之前添加（貌似差不多）
* 2.合并DOM操作 cssText（貌似差不多）
* 3.缓存布局信息 运动时，缓存offsetLeft（貌似差不多）
* 4.文档碎片（貌似差不多）
*
* 原因：现代浏览器做的越来越好，基本上没多大差异
* */
/*
* 1.appendChild之前添加--差不多
* */
/*var oUl = document.getElementById('ul1');
console.time('before');
for ( var i = 0; i < 5000; i++ ) {
var aLi = document.createElement('li');
aLi.innerHTML = 'li';
oUl.appendChild(aLi);
}
console.timeEnd('before'); // before: 41.304ms*/
/*var oUl = document.getElementById('ul1');
console.time('after');
for ( var j = 0; j < 5000; j++ ) {
var aLi = document.createElement('li');
oUl.appendChild(aLi);
aLi.innerHTML = 'li';
}
console.timeEnd('after'); // after: 42.692ms*/
/*
* 2.合并DOM操作 cssText
* */
/*var oUl = document.getElementById('ul1');
console.time('hello');
for ( var i = 0; i < 5000; i++ ) {
var aLi = document.createElement('li');
aLi.style.width = '100px';
aLi.style.height = '100px';
aLi.style.background = 'red';
oUl.appendChild(aLi);
}
console.timeEnd('hello'); // hello: 42.791ms*/
/*var oUl = document.getElementById('ul1');
console.time('hello');
for ( var i = 0; i < 5000; i++ ) {
var aLi = document.createElement('li');
aLi.style.cssText = 'width:100px;height:100px;background:red;';
oUl.appendChild(aLi);
}
console.timeEnd('hello'); // hello: 45.705ms*/
/*
* 3.缓存布局信息 运动时，缓存offsetLeft
* */
/*var oDiv = document.getElementById('div1');
console.time('hello');
var timer = setInterval(function () {
if (oDiv.offsetLeft > 400) clearInterval(timer);
oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
}, 30);
console.timeEnd('hello'); // hello: 0.043ms*/
/*var oDiv = document.getElementById('div1');
console.time('hello');
var left = oDiv.offsetLeft;
var timer = setInterval(function () {
left++;
if (oDiv.offsetLeft > 400) clearInterval(timer);
oDiv.style.left = left + 'px';
}, 30);
console.timeEnd('hello'); // hello: 0.278ms*/
/*
* 4.文档碎片
* */
/*var oUl = document.getElementById('ul1');
console.time('hello');
for ( var i = 0; i < 5000; i++ ) {
var aLi = document.createElement('li');
oUl.appendChild(aLi);
}
console.timeEnd('hello'); // hello: 6.359ms*/
/*var oUl = document.getElementById('ul1');
var fragment = document.createDocumentFragment();
console.time('hello');
for ( var i = 0; i < 5000; i++ ) {
var aLi = document.createElement('li');
fragment.appendChild(aLi);
}
oUl.appendChild(fragment);
console.timeEnd('hello'); // hello: 7.110ms*/
/*
* 四、DOM与事件
* 1.事件委派
* 详情看:http://blog.csdn.net/super_yang_android/article/details/53909893
* */
/*
* 五、DOM与前端模板
* 1.双向数据绑定
* 详情参考：http://www.cnblogs.com/leolovexx/p/5693135.html
* */
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;width:100px;height:100px;background:red;"></div>
<ul id="ul1">
<li>111</li>
</ul>
</body>
</html>
DOM优化
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 浏览器开始渲染网页之前，需要构建 “DOM” 和 “CSSOM” 两棵树。 简述 字节 → 字符 → 符号 → 节...
