Запуск многих макетных проекторов на странице

Question

Некоторый Фон

Я работаю со структурой пользовательского интерфейса, основанной на компонентах внешнего интерфейса, которая полностью управляет своим пользовательским интерфейсом через jQuery. В то время как это было первоначально создано, это не звучало так безумно, и jQuery был стабильным логическим выбором для создания интерактивных веб-компонентов. Однако в наши дни ручное отслеживание каждой переменной и каждого изменения данных, а затем отражение этого в DOM больше не является единственно возможным вариантом. И по мере роста инфраструктуры растет и бремя поддержания согласованного стиля кода и эффективности кода.

Я недавно проверял Maquette.js, и похоже, что он может быть просто основой для решения этих проблем и многого другого.

Вопрос

Я знаю об использовании этой техники для интеграции Maquette с другими библиотеками. Тем не менее, мой каркас большой, многие люди зависят от него, и не представляется возможным преобразовать весь наш рендеринг в 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

Хороший вопрос. Проекторы легкие и пассивные. Я ожидаю снижения производительности только в том случае, если вы вызываете scheduleRender на всех 1000 проекторах одновременно. Это будет означать, что каждый проектор вызывает requestAnimationFrame. Если вы вызываете scheduleRender только на нескольких проекторах одновременно, накладные расходы должны быть минимальными.