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. 使用服务器端模板引擎从数据生成页面， 然后再将其发送到浏览器