高性能Javascript重绘和重排学习笔记

浏览器下载完页面中所有的组件 HTML标记，css,js,图片面性 之后，会解析生成两个内部数据结构

DOM树 表示页面结构

渲染树 表示DOM节点如何显示

DOM树中每一个需要显示的节点在渲染树中都有一个对应的节点（隐藏的DOM元素没有）。这样的节点被称为frames 或boxes，

一旦DOM树和渲染树构建完成，浏览器就开始显示页面元素。

重绘 完成重排后，浏览器会重新绘制受影响的部分到屏幕中，叫重绘。-

重排 而DOM的变化影响到了元素的几何属性（宽和高）浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效，并重新构造渲染树

重绘和重排代价非常昂贵，会导致Web应用程序的UI响应缓慢

重排发生：

添加删除元素

元素位置改变

元素大小改变

内容改变

页面渲染初始化

浏览器窗口变化

有些改变会触发整个页面的重排：当滚动条出现

根据改变的范围和程序，渲染树中或大或小的对应部分也需要重新计算。