数据绑定：
1、利用动态创建元素节点把它追加到页面中实现数据绑定
优势：把需要动态绑定的内容一个个追加到页面中，对原来的元素没有任何的影响
弊端：每创建一个元素，添加到页面中都会引发一次DOM回流，导致引发回流次数过多影响性能
案例源码
2、字符串拼接方式：
首先循环需要绑定的数据，然后把需要动态创建绑定的标签以字符串的方式拼接到一起。拼接完成后添加到页面当中
优势：拼接完成整体是字符串，最后把字符串统一追加到页面当中，只会引发一次回流
弊端：新拼接的字符串添加到元素当中原来标签绑定的的事件都会消失
案例源码
3、文档碎片：
把需要的元素都创建完成并且添加到文档碎片中，在统一把文档碎片放到页面中，这样只引发依次回流
优势：只产生一次文档回流且对原来的元素不产生任何影响
案例源码
JS 中 DOM 回流和重绘
回流（重排）：当页面中的 HTML 结构放生改变（增加、删除元素、位置发生改变）浏览器都需要重新计算一遍最新的 DOM 结构，重新对当前页面重新渲染
重绘：某一个元素的部分样式发生了改变（位置没改，背景颜色改变）浏览器只需要重新的渲染当前的元素即可
减少DOM回流和重绘优化方法：
1、减少重绘：尽可能一次操作样式（利用样式类名）
2、减少回流：文档碎片、读写分离（把统一修改样式都放到一起执行，新版本浏览器有一个自己的检测机制，发现下面紧挨着的操作也是修改元素的样式，会把所有修改的事先存起来，直到遇到非修改的操作，会把之前存储的统一执行，引发一次回流和重绘）
DOM映射机制：
页面中的标签和 JS 中获取到的元素对象或元素集合是紧紧绑定在一起的，一个改另外一个会跟着自动修改。
appendChild在追加元素对象的时候，如果这个元素之前容器中已经存在，此时不是克隆一份新的追加到末尾，而是把原有的元素移动到末尾位置。
在元素绑定前，我们获取容器中元素，得到一个空的元素集合，元素数据绑定后，不需要重新获取，DOM映射机制会帮我们把新加的元素映射到之前获取的空集合中，让其变为有元素的集合，但是querySelectorAll获取的是静态集合，不存在映射机制，如果需要获取只需重新获取依次即可
表格排序案例：DOM
网友评论