<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM優(yōu)化</title>
<script>
window.onload = function () {
/*
* 一、DOM與JS
* DOM與JS相互獨立，相當于兩個小島
* 1.JS操作DOM要過橋費，要減少過橋次數(shù)（有效）
* 2.innerHTML和DOM節(jié)點操作的比較（瀏覽器不同，效果不同）
* */
/*
* 1.JS操作DOM要過橋費，要減少過橋次數(shù)
* */
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節(jié)點操作的比較(差不多，在不同瀏覽器不同)
* */
/*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.節(jié)點克隆（有效）
* 2.訪問元素集合，用局部變量（有效）
* 3.元素節(jié)點 firstChild 和 firstElement（有效）
* 4.選擇器 ie8+ querySelectorAll（有效）
* */
/*
* 1.節(jié)點克隆
* */
/*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.元素節(jié)點 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與瀏覽器
* 重排：結(jié)構改變
* 重繪：顯示內(nèi)容
* 1.appendChild之前添加（貌似差不多）
* 2.合并DOM操作 cssText（貌似差不多）
* 3.緩存布局信息 運動時，緩存offsetLeft（貌似差不多）
* 4.文檔碎片（貌似差不多）
*
* 原因：現(xiàn)代瀏覽器做的越來越好，基本上沒多大差異
* */
/*
* 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.雙向數(shù)據(jù)綁定
* 詳情參考：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優(yōu)化
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
推薦閱讀更多精彩內(nèi)容
- 1.節(jié)點修改 使用cloneNode在外部更新節(jié)點然后再通過replace與原始節(jié)點互換。 2.節(jié)點的添加 多個節(jié)...
- 瀏覽器開始渲染網(wǎng)頁之前，需要構建 “DOM” 和 “CSSOM” 兩棵樹。 簡述 字節(jié) → 字符 → 符號 → 節(jié)...
