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

Question

一些背景

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

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

问题

我知道使用 this将 Maquette 与其他库集成的技术。但是，我的框架很大，很多人都依赖它，将我们的所有渲染转换为 Maquette 是不可行的。至少不是一蹴而就。因此，如果我确实使用 Maquette，我预见自己将被迫为组件的每个实例使用新的投影仪。这就是我所关心的。

与使用单个投影仪渲染所有内容相比，在页面上显示大量投影仪是否会对性能产生负面影响？换句话说，就性能而言，将页面上的投影仪数量降至最低有多理想？

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

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，开销应该是最小的。