javascript - 在一个页面上运行多个模型投影仪

Question

一些背景

我使用基于前端组件的 UI 框架，该框架完全通过 jQuery 管理其 UI。在它最初创建时，这听起来并没有那么疯狂，jQuery 是制作交互式 Web 组件的稳定的逻辑选择。然而，如今，手动跟踪每个变量和数据的每次更改，然后将其反射(reflect)在 DOM 中，不再是唯一可行的选择。随着框架的发展，维护一致的代码风格和代码效率的负担也随之增加。

我最近一直在查看 Maquette.js，看起来它可能只是帮助解决这些挑战及更多挑战的框架。

问题

我知道使用 this将 Maquette 与其他库集成的技术。然而，我的框架很大，很多人依赖它，并且将我们的渲染全部转换为 Maquette 是不可行的。至少不是一下子就完成的。因此，如果我确实使用模型，我预计自己将被迫为组件的每个实例使用新的投影仪。这就是我关心的问题。

与使用单个投影仪渲染所有内容相比，页面上存在大量投影仪是否会对性能产生负面影响？换句话说，就性能而言，最大限度地减少页面上的投影仪数量有多理想？

如果代码有帮助，我已经修改了 Maquette 主页上的简单示例来说明这一点。 1000 台投影仪同时运行。看起来不错，但感觉就像我正在做一些模型设计不该做的事情。

document.addEventListener('DOMContentLoaded', function () {
  var h = maquette.h;
  var domNode = document.body;
  var yourName = ''; // Piece of data
  var numbers = [];

  // Load up our array
  for(var i = 0; i < 1000; i++){ numbers.push(i); };

  numbers.forEach(function(){
     var projector = maquette.createProjector();
    // Plain event handler
    function handleNameInput(evt) {
      yourName = evt.target.value;
    }

    // This function uses the 'hyperscript' notation to create the virtual DOM. 
    function renderMaquette() {
      return h('div', [
        h('input', { 
          type: 'text', placeholder: 'What is your name?', 
          value: yourName, oninput: handleNameInput 
        }),
        h('p.output', ['Hello ' + (yourName || 'you') + '!'])
      ]);
    }

    projector.append(domNode, renderMaquette);

    });
});

Answer 1

好问题。投影仪重量轻，而且是被动式的。如果您同时在所有 1000 台投影仪上调用 ScheduleRender，我只会预见到一些性能损失。这意味着每个投影仪都会调用 requestAnimationFrame。如果您仅同时在几台投影仪上调用scheduleRender，则开销应该是最小的。