解析和加载
- 加载是一个异步的过程 ，例如图片的请求渲染不会影响整个html的加载和渲染
解析的过程
- 形成dom tree ，render tree是个对象
- 形成css tree，根据样式表形成样式tree
- 将dom tree和css tree有机结合起来形成render tree
- render tree构建完毕后，开始渲染页面
- display none的元素、head、script元素不会包含在render tree里。
回流和重绘
- 回流：当页面的布局发生变化，渲染页面时，计算布局位置的过程叫做回流。
- 重绘：所有的回流操作，都会导致相关元素进行重绘。
- 仅改变颜色及其他不影响元素物理变化的行为，会只导致重绘。
- 引起回流的操作有：
- 页面首次加载、渲染、
- 布局变化(增加或删除元素)、
- display: none、visibility: hidden;不会引起回流，只会引起重绘
- 边距、
- 位置、
- 大小(包括字体大小)
- 页面渲染初始化
- 改变浏览器窗口大小
- 请求offset、client、scroll、width、height、getComputedStyle或ie的currentStyle等
- 引起回流的特征是元素发生了物理性变化
- 回流比重绘更影响浏览器的性能
- 如果在body子元素最前面添加元素，会导致整个页面重新渲染
- 如果在body子元素最后面添加元素，只会绘制最后面的元素
- 如果父节点发生回流，会导致所有子节点回流+重绘。
- 优化：
- 减少回流的次数，尽量避免单个css属性挨个去处理。
- 较好的方式是修改classname
- 使用documentFragment或新创建的div对数据进行缓存，最后append到body中。
- 如var fragment = document.createDocumentFragment();
- fragment.appendChild(多个新创建的div);
- document.body.append(fragment);
- 使用el.style.cssText = 'width:' + wNum + 'px; height:' + hNum + 'px;';
- 将元素的display设置为none，然后对元素的样式随意设置，最后将display设置为'block';
- 减少回流影响的规模
- 尽可能的在末尾添加或删除元素
- 浏览器队列机制
- 较新的浏览器会将多次回流操作放置到队列中，在固定的时间内刷新队列，批量执行回流操作，减少回流次数。
- 当访问offset、client等属性时，会强制浏览器刷新队列(这样浏览器才能获取到精确的样式值)，因此尽量避免重复调用el.offset，要将其进行变量缓存。如果el.offset是动态变化的，使用getComputedStyle要比el.offset性能更好。
- 动画相关
- 要使用绝对定位动态操作top left等值，这样父级元素不会引起回流重绘
- 但使用margin会导致父级元素回流和重绘。
- table
- 使用table元素性能要比其他元素差很多，属于弹性元素，内部封装了较多的东西，容易引起页面回流。
- 减少回流的次数，尽量避免单个css属性挨个去处理。
