《高性能javascript》学习笔记三

三、dom操作的性能问题

1、为什么dom操作普遍较慢？

dom（文档对象模型）和js独立实现。我们通过js去控制、修改dom，用的办法就是api。因为js和dom在浏览器内部独立实现，所以通过js操作dom就会带来性能消耗。

2、优化dom操作的方式

（1）优化dom操作最直接也最简单的方式，就是减少对dom访问与操作的次数。尽量优先处理数据，然后统一操作dom。

（2）值得一提的是，某个dom元素内插入其他dom对象时，用innerHTML插入字符串的方法，比documen,createElement()方法要更快一些。

（3）另外，克隆已有dom元素也比创建新dom元素更快一些（虽然不明显）。

（4）用js内置的api（firstElementChild、document.querySelectorAll()等）而非引入插件或者其他旧的api(firstChild等)。

（5）减少重绘和回流

3、减少重绘与回流（又称重排）

浏览器在下载完页面上的组件（html标记、js、css、图片等资源），会解析生成两个数据结构：dom树和render树。dom树上的每一个需要显示的节点在render树上至少存在一个对应的节点（display:none的元素没有，但是visibility:hidden的节点有）。dom树和render树构建完成，则绘制页面。

<