Ng-repeat vs create dom in jquery

Question

Я пытаюсь сохранить все меню в javascript, чтобы он быстро загружался для пользователей (я знаю, что он идет в памяти, но это не так плохо, и это не должно расти в ближайшее время).

Моя проблема в том, что если я сгенерирую его в простом javascript, он создается почти мгновенно, а если я использую ng-repeat, он намного медленнее.

Его немного грязный, и я упростил потому что я также добавлять классы и другие атрибуты, но вы должны получить суть его от этого ..

Я знаю, что может еще больше упростить следующий повторяющийся HTML с помощью используя директивы, но производительность будет такой же, так что несите меня.

---

Использование нг-повтора (4 вложенной для петель):

<div ng-repeat="item in catList"> 
     <a> <span> {{item.name}}</span> </a> 
     <div ng-if="item.children.length > 0"> 
      <div> 
       <div ng-repeat="item2 in item.children"> 
        <a> <span> {{item2.name}}</span> </a> 
        <div ng-if="item2.children.length > 0"> 
         <div> 
          <div ng-repeat="item3 in item2.children"> 
           <a> <span> {{item3.name}}</span> </a> 
           <div ng-if="item3.children.length > 0"> 
            <div> 
             <div ng-repeat="item4 in item3.children"> 
              <a> <span> {{item4.name}}</span></a> 
              <div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

(проверьте консоль на время, необходимое для обработки и визуализации списка - я не был уверен, когда начала отсчета времени его в угловом. Я знаю, что 'app.run (функцию() {})' работает после загрузки все, но я не уверен, когда все начинается)

http://jsfiddle.net/0m0qod3u/1/

---

И теперь для создания его генерации Dóm элементов динамически в JS/JQuery:

function printCategoriesMenu(list, fatherElem, idObj, currPath, level){ 
    for (var i = 0; i < list.length; i++){ 
     var currElem = list[i]; 

     var thisElemsPath = currPath; 
     if (level == 0){ 
      thisElemsPath += currElem.name; 
     } else { 
      thisElemsPath += "/" + currElem.name; 
     } 

     var el_a = document.createElement('a'); 

     var el_span = document.createElement("span"); 
     el_span.textContent = currElem.name; 

     el_a.appendChild(el_span); 

     var el_div = document.createElement("div"); 
     el_div.setAttribute("id", idObj.eid + "_children"); 

     fatherElem.appendChild(el_a); 
     fatherElem.appendChild(el_div); 

     idObj.eid++; 

     if (currElem.children.length > 0){ 
      printCategoriesMenu(currElem.children, el_div, idObj, thisElemsPath, level+1); 
     } 
    } 
} 

jQuery(document).ready(function(){ 
    var start = window.performance.now(); 
    console.log("START TIME: " + start); 
    printCategoriesMenu(catList, document.getElementById('categoriesList'), {'eid': 0}, "", 0); 
    var end = window.performance.now(); 
    console.log("END TIME: " + end); 
    console.log("time: " + (end - start)); 
}) 

http://jsfiddle.net/wp4jz8qv/

---

После добавить различные атрибуты (класс, нг-нажмите/OnClick ..) , производительность его с использованием повторения ng еще хуже и имеет плохую задержку при первой загрузке страницы.

Что я пытался сделать, чтобы улучшить ее производительность с использованием углового до сих пор:

• Используя ng-repeat, было бы много двухсторонних привязок, поэтому я попытался использовать «bindonce», и это, похоже, не повлияло на производительность, если вообще.

• Пробовал использовать 'track by', без разницы в производительности.

• Пробовал использовать limitTo для генерации подкатегорий в разное время (сначала я бы сгенерировал первый уровень и второй, когда пользователь выберет первую категорию, загрузятся третьи подкатегории и т. Д.). Это работало намного лучше, но при создании уровней подкатегории была бы задержка при выборе пользователем одной категории (повторение ng синхронно, и это выглядело не очень хорошо) выглядели так, что страница застыла на 1-2 секунды :()

• Неудобно хранить часть генерации меню в файле js/jquery, в то время как все остальное является угловым приложением, поэтому я попытался генерировать dom динамически (так что НЕ использую ng-repeat) в своем контроллере с помощью директивного мышления, которое я бы чтобы получить ту же производительность, что и js/jquery. К сожалению, это было так же медленно, как использование ng-repeat (извините, у меня нет jsfiddle для этой части).Эта часть была действительно dissappointing :(

Я видел несколько постов по оптимизации производительности нг-повтора и наблюдение за сколько наблюдатели получают создается для каждого элемента/и т.д .. Я хотел бы сделать это, как скоро, как я сделал в прошлом точку с этим проектом.

Любые предложения?

Спасибо, Mihai

Answer 1

вы используете Угловая JS 1.3? Или вы можете обновить Угловое версию 1.3? Если ответ на любой из них: ДА, n Возможно, вам будет интересно попробовать одностороннюю привязку данных, где вам не нужно привязывать данные по двум способам, например, для статических текстов, как в вашем случае.

Прочтите эту статью о привязке данных в один конец, чтобы точно понять, что она делает.

http://blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html

Это позволит значительно уменьшить количество наблюдателей, созданных и поможет повысить производительность.

Надеюсь, это поможет. Спасибо.