Как улучшить производительность JavaScript / уменьшить нагрузку на страницу с большим HTML?

Question

У нас есть макет страницы, как показано ниже, с обработчиком кликов jQuery для большого количества элементов HTML (тысячи DIV).

Макет выглядит так:

---

Navbar содержит не менее 2000+ DIV и UL, LI (используется для навигации по контенту), и у нас есть привязка обработчика событий jQuery к каждому элементу:

$('.navbar-item').click(function(){ 

  /* click handler */

});

Загрузка заняла много раз, и на IE производительность ужасна!!! Есть ли в любом случае, мы можем улучшить это? или любой альтернативный дизайн для решения этой проблемы?

Answer 1

У вас есть много возможностей улучшить выступления

1. Вы можете загрузить div только тогда, когда пользователь прокручивает и использует Ajax

2. использование .on и не .click динамически добавлять слушателя

Например, вы можете загрузить некоторые div и проверьте прокрутку, используйте эту функцию от Джеймса Падольси, она работает во всех браузерах

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}


$(window).scroll(function() {
       // when the scroll is in bottom
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           // use ajax to get more div
           $.ajax({
               url: "otherDivs.php", // page where you load div
               data { firstDiv : '10', secondDiv : '20'}, // parameters : To load div 10 to 20
               type: "POST"
           })
           .done(function( html ) {
               $( "body" ).append( html ); // html contain div 10 to 20
           });
       }
   });

Это всего лишь несколько способов помочь вам

Answer 2

Вы также можете использовать функцию ( http://api.jquery.com/on/)

например:

$('div.navbar').on('click', '.navbar-item', function(){ 

  /* click handler */

});

Answer 3

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

Answer 4

Если обработчик кликов одинаков для других элементов вместо использования:

$('.navbar-item').click(function(){ 

    /* click handler */

});

Вы можете сделать это:

var functionNav = function(){
    /* click handler */
}

$('.navbar-item').on("click", functionNav)

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