2

一些背景

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

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

问题

我知道使用这种技术将 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);

    });
});
4

1 回答 1

2

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

于 2017-02-03T07:47:18.477 回答