高性能javscript总结

what is DOM? and Why it is slow?

当浏览器下载完所有页面HTML标记,JavaScript,css,图片之后,它解析文件并创建两个内部的数据结构.
a Dom tree 表示页面结构 a render tree 表示DOM节点如何显示
渲染树中为每个需要显示的dom节点存放至少一个节点(隐藏DOM元素在渲染树中没有对应节点).渲染树上的节点称为"框"或者"盒",符合CSS模型的定义.一旦DOM树盒渲染树构造完毕,浏览器就可以显示(绘制)页面上的元素了.
当改变一个节点的宽高或者盒模型某部分时,浏览器需要重新计算元素的集合属性,而且其他元素的集合和位置属性也会受到影响,浏览器使渲染树上受到影响的部分失效,然后重构渲染树.这个过程被称作重排,重排版完成时,浏览器在一个重绘进程中重新绘制屏幕上手影响的部分. 不是所有的DOM改变都会影响几何属性.例如改变一个元素的背景颜色,不会影响它的盒模型,只会重绘(不需要重排版)

?重绘和重排版都会影响界面性能,有的时候会使界面失去响应.