大容量数据的显示

 

起因：

 

在将 windowlite 应用于大数据 （1.5 M 的 table 数据）显示场景时，刚开始频频让浏览器弹出”中断脚本“窗口，后经过优化代码以及关键的调用流程的改变而终于使得数据得以显示成功，步鄹如下：

 

 

步鄹：

 

1.采用固定css宽高的窗口， windowlite 支持自适应宽度，但是仍然要计算 window容器的宽度，其中调用了 Ext.Element.getTextWidth ， 而ext的实现为重新建造一个div，将元素复制过去再计算宽度(offsetWidth) ，十分消耗资源，故 改为固定宽高后，省去步鄹占用时间

2.禁止读取offset等 BOM 属性， 由于我们采用了固定宽高，而大小属性可以直接从css中style读取，而不再需要读取offset系列属性，发现offset属性要比css属性读取慢得多。故 Ext.Element.getWidth ,getHeight,getX 等尽量不要使用，因为这些操作的实现非常繁琐，很多多余操作，对于一个完全自己掌控的div，完全不需要这些操作

3.关键一步：延迟数据加载，固定显示位置。 原来数据加载在window显示之前的构造函数当中，由于当window show操作进行时要居中，或者一些宽度高度调整，避免不了对容器的 style 属性读取 ，而容器内数据越多则读取越慢。若固定显示位置，并先将空白窗口显示出来，再append大数据量到窗体body，则可显著提高显示速度。

4.多利用settimeout 分批计算 ，将show 操作放在 settimeout 中，防止脚本占用过长时间，留给其他操作时间。

5.ie 可用insertAdjacentHtml ,其他浏览器用 range 操作 可以取得比 innerHtml 更高的效率。

 

6.多次操作设置元素 style 时，可以设置 cssText 来减少 reflow :

 

from YUI3 StyleSheet

 

var el = document.getElementById('some_element');
 
el.style.borderBottom = '3px solid #eee'; // reflow
el.style.borderTop    = '3px solid #ccc'; // another reflow
el.style.fontWeight   = 'bold';           // another reflow
 
// Vs. three changes in one reflow
el.style.cssText += '; border-bottom: 3px solid #eee; border-top: 3px solid #ccc; font-weight: bold';

 

 

 

附录：

 

 

频繁DOM操作问题

 

使用 javascript Workers 进行计算

 

Nicholas Zakas :writing-efficient-javascript