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通过检查以下内容来兼容 tutorials .