本文中提到的上文请参考:回流与重绘
本人前一阵子开发了一套页面比较复杂的应用,在高级浏览器里面表现良好,非常顺畅,但是放到低版浏览器(如IE8、7、6)里面,就变得非常沉重了。花了很长时间测试,这个问题确实头疼不已。起初以为是程序问题,然后就针对程序进行了调优和排查,消耗了挺长时间。
页面比较复杂。用户频繁操作的部分是用的Table元素,在td中有嵌套多层元素。
首先我猜想是因为CSS样式的写法问题,就把所有CSS文件内容都删除了,但操作速度依然很慢(注意,不是页面加载速度)。然后开始针对js脚本逐步排查。一步步的注释可能影响性能的代码。终于,最后发现只要在Table中点击某按钮改变table中某元素样式或者修改某元素内容的时候,点击按钮的速度就变得很慢。
然后就开始逐量减少HTML中DOM的代码,最后只剩下一个Table。但依然不见效,只要对DOM操作浏览器就卡了。然后我就谷歌到了上文,发现可能是因为回流和重绘的问题。就想了一个比较变态的方法,每次点击按钮时就把这个按钮的样式设置为position:absolute,然后设置好left和top,当然还有z-index。让元素绝对定位但看起来却依然保持在其原来的位置,果然,速度一下就提升上来了。但是,把页面其他DOM元素都补充上来的时候,页面操作的流畅性一下又下去了。
后来想到上文有提到,尽量避免用table,就花了一段时间把table换成了无序列表。速度果然杠杠的。
总结一下,当页面元素过多,或元素嵌入过深时,尽量避免用table。