回流与重绘补充

本文中提到的上文请参考：回流与重绘

本人前一阵子开发了一套页面比较复杂的应用，在高级浏览器里面表现良好，非常顺畅，但是放到低版浏览器（如IE8、7、6）里面，就变得非常沉重了。花了很长时间测试，这个问题确实头疼不已。起初以为是程序问题，然后就针对程序进行了调优和排查，消耗了挺长时间。

页面比较复杂。用户频繁操作的部分是用的Table元素，在td中有嵌套多层元素。

首先我猜想是因为CSS样式的写法问题，就把所有CSS文件内容都删除了，但操作速度依然很慢（注意，不是页面加载速度）。然后开始针对js脚本逐步排查。一步步的注释可能影响性能的代码。终于，最后发现只要在Table中点击某按钮改变table中某元素样式或者修改某元素内容的时候，点击按钮的速度就变得很慢。

然后就开始逐量减少HTML中DOM的代码，最后只剩下一个Table。但依然不见效，只要对DOM操作浏览器就卡了。然后我就谷歌到了上文，发现可能是因为回流和重绘的问题。就想了一个比较变态的方法，每次点击按钮时就把这个按钮的样式设置为position:absolute，然后设置好left和top，当然还有z-index。让元素绝对定位但看起来却依然保持在其原来的位置，果然，速度一下就提升上来了。但是，把页面其他DOM元素都补充上来的时候，页面操作的流畅性一下又下去了。

后来想到上文有提到，尽量避免用table，就花了一段时间把table换成了无序列表。速度果然杠杠的。

总结一下，当页面元素过多，或元素嵌入过深时，尽量避免用table。