Javascript大数据优化

Question

背景

因此，我正在开发一个内联网站点，为制造操作提供文档。每个“文档”都是存储在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文件的长度吗？

在这种情况下，应该避免使用循环吗？

提供带有JavaScript对象数据的页面的其他选项有哪些？

解决方案

我遵循@Icepickle和@PatrickEvans的建议，使用JSON语法加载对象数据。最初，我遇到了相同的问题，即(未被缓存的) Loops使浏览器陷入困境。我的解决方案是简单地将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. 在将页面发送到浏览器之前，使用服务器端模板引擎从数据生成页面。