Javascript大數據優化

Question

背景

因此，我正在開發一個Intranet網站，該網站提供制造操作的文檔。 每個“文檔”都是存儲在SQL數據庫中的一系列數據，但是我需要為其創建JS庫的文檔中的某些元素隨頁面一起加載。

本質上，這些對象是由我為桌面開發的管理應用程序生成的單個JS文件“填充”的。 該文件已經違反了3K行代碼，我擔心一旦實施並滾動該項目，性能將會如何。 我之所以使用JavaScript文件，是因為它可以通過管理應用程序快速生成，並且只需要在理想情況下在藍色月亮中生成一次即可。 因此，在后面的代碼中編譯數據將對性能產生不利影響。

例子

到目前為止，我采用了直接引用各個對象，逐行並設置其重要值的方法。 例如：

var tmpTool;
var tmpChara;
tmpTool = new Tool();
tmpTool.Type = new Type(GRVR.Type.Delem, GRVR.Type.List, GRVR.Type.Case, GRVR.Type.Label, GRVR.Type.AlternateText);
tmpTool.ID = 1200;
tmpChara = tmpTool.AddCharacteristic('#M', 'Material Type', 'Material Type', false);
tmpChara.setValue('');
tmpChara = tmpTool.AddCharacteristic('#G', 'Grade Type', 'Grade Type', false);
tmpChara.setValue('');
tmpChara = tmpTool.AddCharacteristic('FL', '', 'Functional Length', false);
tmpChara.setValue('0.79');
tmpChara = tmpTool.AddCharacteristic('CW', '', 'Cutter Width', false);
tmpChara.setValue('0.118');
tmpChara = tmpTool.AddCharacteristic('CL', '', 'Cutter Length', false);
tmpChara.setValue('0.748');
tmpChara = tmpTool.AddCharacteristic('R', '', 'Radius', false);
tmpChara.setValue('0.008');
tmpChara = tmpTool.AddCharacteristic('TA', '', 'Tip Angle', false);
tmpChara.setValue('');
tmpChara = tmpTool.AddCharacteristic('MD', '', 'Minimum Bore Diameter', false);
tmpChara.setValue('');
tmpChara = tmpTool.AddCharacteristic('CD', '', 'Connection Diameter', false);
tmpChara.setValue('');
tmpChara = tmpTool.AddCharacteristic('*B', '', 'Chip Breaker', false);
tmpChara.setValue('');
tmpChara = tmpTool.AddCharacteristic('*I', '', 'Tool Style', false);
tmpChara.setValue('');
tmpChara = tmpTool.AddCharacteristic('**', 'Shape Type_GRVR', 'Shape Type', false);
tmpChara.setValue('DOUBLE');
tmpTool.SpecialDescription = new SpecialDescription(GRVR.SpecialDescription.Delem, GRVR.SpecialDescription.List, GRVR.SpecialDescription.Label);
tmpTool.SpecialDescription.setValue('');
tmpTool.Manufacturer = new Manufacturer(GRVR.Manufacturer.Delem, GRVR.Manufacturer.List, GRVR.Manufacturer.Label);
tmpTool.Manufacturer.setValue('INGERSOLL');
tmpTool.ManufacturerNo = new ManufacturerNo(GRVR.ManufacturerNo.Delem, GRVR.ManufacturerNo.List, GRVR.ManufacturerNo.Label);
tmpTool.ManufacturerNo.setValue('TDC3 TT8020');
tmpTool.EDP = '6000200';
tmpTool.Availability = 'Available';
savTools.push(tmpTool);

那是一個對象，目前有800個，還在增加。 此方法運行速度相當快，尤其是在使用For循環時。

我使用For循環的方法如下（它崩潰了我的瀏覽器...）：

var tmpTool;
var tmpChara;
tmpTool = new Tool();
tmpTool.Type = new Type(GRVR.Type.Delem, GRVR.Type.List, GRVR.Type.Case, GRVR.Type.Label, GRVR.Type.AlternateText);
tmpTool.ID = 1200;
for (var n = 0, len = CYL.Characteristics.length; n < len; n++){
    tmpChara = CYL.Characteristics[n];
    tmpChara = tmpTool.AddCharacteristic(tmpChara.Delem, tmpChara.List, tmpChara.Label, false);
    tmpChara.setValue(tmpVal[n]);
}
tmpTool.SpecialDescription = new SpecialDescription(GRVR.SpecialDescription.Delem, GRVR.SpecialDescription.List, GRVR.SpecialDescription.Label);
tmpTool.SpecialDescription.setValue('');
tmpTool.Manufacturer = new Manufacturer(GRVR.Manufacturer.Delem, GRVR.Manufacturer.List, GRVR.Manufacturer.Label);
tmpTool.Manufacturer.setValue('INGERSOLL');
tmpTool.ManufacturerNo = new ManufacturerNo(GRVR.ManufacturerNo.Delem, GRVR.ManufacturerNo.List, GRVR.ManufacturerNo.Label);
tmpTool.ManufacturerNo.setValue('TDC3 TT8020');
tmpTool.EDP = '6000200';
tmpTool.Availability = 'Available';
savTools.push(tmpTool);

問題

給我第一個例子，我應該擔心我的JS文件的長度嗎？

在這種情況下是否應避免For循環？

向頁面提供JavaScript對象數據還有哪些其他選擇？

解決方案

我遵循@Icepickle和@PatrickEvans建議使用JSON語法加載對象數據。 最初，我遇到了一個同樣的問題，即（未升級的）For循環使瀏覽器陷入癱瘓。 我的解決方案是簡單地將For循環轉換為chached循環（類似於第二個示例）。

Answer 1

如果您將文檔創建為包含javascript工具類實現的信息的JSON文檔，則可以按照PatrickEvans的建議，只需將服務器中的數據解析為對象。

例如，我制作了模型的較小版本並進行了解析（不知道GRVR變量來自何處，因此我只添加了一些虛擬數據）

這種解析模型的一個優點是，您不必創建大量的javascript文件來手動准備工具，而是可以向類提供數據，並且如果將來您的模型會發生變化，則很多在一個類中，比在您所有不同的文件（都是生成的）中更改處理要容易得多。

 var GRVR = { specialDescription: { dElem: 'dElem', list: 'list', label: 'label' }, manufacturer: { dElem: 'dElem', list: 'list', label: 'label' }, type: { dElem: 'dElem', list: 'list', label: 'label' } }, documentFromServer = { characteristics: [{ shortCut: '#M', description: 'Material Type', title: 'Material Type', hidden: false, value: '' }, { shortCut: '#G', description: 'Grade Type', title: 'Grade Type', hidden: false, value: '' }, { shortCut: 'FL', description: '', title: 'Functional Length', hidden: false, value: '0.79' }], edp: '6000200', availability: true, manufacturer: GRVR.manufacturer, specialDescription: GRVR.specialDescription, type: GRVR.type }; function Characteristic(properties) { var props = properties || {}; this.shortCut = props.shortCut || ''; this.description = props.description || ''; this.title = props.title || ''; this.hidden = !!props.hidden; this.value = props.value || null; this.setValue = function(val) { this.value = val || null; }; } function DescriptiveElement(properties) { var props = properties || {}; this.dElem = props.dElem || null; this.list = props.list || null; this.label = props.label || null; } function Tool(properties) { this._rawDocument = properties; this.characteristics = []; this.manufacturer = {}; this.specialDescription = {}; this.init = function() { var properties = this._rawDocument || {}; this.setCharacteristics(properties.characteristics || []); this.specialDescription = new DescriptiveElement(properties.specialDescription); this.type = new DescriptiveElement(properties.type); this.manufacturer = new DescriptiveElement(properties.manufacturer); this.edp = properties.edp; this.availability = properties.availability; }; this.setCharacteristics = function(cstics) { var i, len; this.characteristics = []; for (i = 0, len = cstics.length; i < len; i++) { this.characteristics.push(new Characteristic(cstics[i])); } }; this.init(); } var tmpTool = new Tool(documentFromServer); console.log(tmpTool); 

文件的大小可能會有所不同，具體取決於設備和需要支持的連接類型，盡管在當前的時代，要真正有所作為，它的大小已經相當大了。 如果這真的很重要，那么仍然有可能縮小您的JavaScript文件...

您可以通過閱讀以下教程來檢查使您的網站與OData兼容。

Answer 2

我會問為什么您需要一次性解析所有這些數據？ 您實際可以顯示多少？

我會調查：

1. 用范圍請求對大數組進行分頁
2. 添加深度級別參數，以允許您根據需要在視圖中向下鑽取
3. 使用服務器端模板引擎從數據生成頁面， 然后再將其發送到瀏覽器