说两个概念,回流和重绘
回流:当html结构发生改变,如增删元素 位置发生改变 等,这样浏览器需要重新的计算一遍最新的DOM结构,从而重新的对当前的页面进行渲染
重绘:某一个元素的部分样式发生变化 浏览器只需要重新渲染当前元素
列表的数据一般都是从接口来的
假设是ul>li的布局,有三种绑定数据的方法
1.利用动态创建元素节点,把它追加到页面中的方式实现绑定
缺点:每次插入li,浏览器需要回流一次
<body> <ul id="list"> </ul> <script> var list = document.getElementById("list"); var data = [1, 2, 3]; for (var i = 0; i < data.length; i++) { var cur = data[i]; var oli = document.createElement("li"); oli.innerHTML = cur; list.appendChild(oli); } list.innerHTML = str; </script> </body>
2.字符串拼接,(目前的模板渲染基本都是这个原理,jade,....)
将数据和元素绑定,变成一个字符串,然后一次性的插入文档中
<body> <ul id="list"> </ul> <script> var list = document.getElementById("list"); var data = [1, 2, 3]; var str = ""; for (var i = 0; i < data.length; i++) { var cur = data[i]; str += "<li>" + cur + "</li>"; } list.innerHTML = str; </script> </body>
3.文档碎片,相当于创建一个临时容器,不是每次直接插入到文档中
<body> <ul id="list"> </ul> <script> var list = document.getElementById("list"); var data = [1, 2, 3]; var frg = document.createDocumentFragment(); for (var i = 0; i < data.length; i++) { var cur = data[i]; var oli = document.createElement("li"); oli.innerHTML = cur; frg.appendChild(oli); } list.appendChild(frg); frg = null; </script> </body>
特别注意:
1.如果在元素未插入前绑定事件,那么插入后,事件失效,所以必须在插入元素之后绑定事件(针对事件冒泡,事件捕获另算)
2.常用方法2和方法3