说两个概念,回流和重绘
回流:当html结构发生改变,如增删元素 位置发生改变 等,这样浏览器需要重新的计算一遍最新的DOM结构,从而重新的对当前的页面进行渲染
重绘:某一个元素的部分样式发生变化 浏览器只需要重新渲染当前元素
列表的数据一般都是从接口来的
vue双向数据绑定，假设是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
