DOM优化

Posted 认认真真,知难而进。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM优化相关的知识,希望对你有一定的参考价值。

不要频繁操作DOM

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="div1"></div>
 9     <script>
10     //不要频繁操作DOM
11     var oDiv = document.getElementById("div1");
12     var str = "";
13     console.time("time1");
14     for(var i = 0;i < 5000;i ++){
15         oDiv.innerHTML += "a";
16     }
17     console.timeEnd("time1");
18 
19     console.time("time2");
20     for(var i = 0;i < 5000;i ++){
21         str += "a";
22     }
23     oDiv.innerHeight = str;
24     console.timeEnd("time2");
25     </script>
26 </body>
27 </html>

innerHTML和appendChild

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <ul id="ul1"></ul>
 9     <script>
10     //chrome中DOM比innerHTML性能高,不同浏览器写会有差异
11     var oUl = document.getElementById("ul1");
12     var str = "";
13 
14     console.time("time1");
15     for(var i = 0;i < 50000;i ++){
16         var oLi = document.createElement("li");
17         oUl.appendChild(oLi);
18     }
19     console.timeEnd("time1");
20 
21     console.time("time2");
22     for(var i = 0;i < 50000;i ++){
23         str += "<li></li>";
24     }
25     oUl.innerHTML = str;
26     console.timeEnd("time2");
27     </script>
28 </body>
29 </html>

先创建一个再cloneNode比每次都createElement性能要好一点

...

1 var len = aLi.length;
2 for(var i = 0;i < len;i ++){ ... }
1 childNodes  元素节点和文本节点  >>  children元素节点
2 firstChild  >>  firstElementChild   

querySelector

1 querySelector("#ul1 li")//第一个li
2 querySelectorAll("#ul1 li");//所有li

//重排:改变DOM结构
//重绘:浏览器显示变化

添加内容在appendChild之前

合并DOM操作:cssText

缓存布局信息

1 var L = oDiv.offsetLeft;
2 var T = oDiv.offsetTop;
3 
4 setInterval(function(){
5     L ++;
6     T ++;
7     oDiv.style.left = L + "px";
8     oDiv.style.top = T + "px";
9 },30);

文档碎片:document.createDocumentFragment()

前端模板:基于jQuery的tmpl

以上是关于DOM优化的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

优化 C# 代码片段、ObservableCollection 和 AddRange

JavaScript单行代码,也就是代码片段

使用 C++ 反转句子中的每个单词需要对我的代码片段进行代码优化

如何优化C ++代码的以下片段 - 卷中的零交叉

实用代码片段将json数据绑定到html元素 (转)