如何在具有大型HTML的页面上提高JavaScript性能/减少页面加载?

时间:2013-10-25 09:26:52

标签: javascript jquery performance huge-pages

我们有一个页面布局如下所示,jQuery点击处理程序用于大量HTML元素(数千个DIV)。

布局如下:

enter image description here


Navbar包含至少2000多个DIV和UL,LI(用于内容导航),我们将jQuery事件处理程序绑定到每个元素:

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

  /* click handler */

});

加载需要花费很多时间,在IE上性能非常糟糕! 反正我们可以改进吗?或任何替代设计来处理这个问题?

4 个答案:

答案 0 :(得分:2)

您也可以使用on function(http://api.jquery.com/on/

例如:

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

  /* click handler */

});

答案 1 :(得分:2)

你有很多提高表现的可能性

1. 您可以在用户滚动并使用Ajax时加载div

2. 使用 .on 而非 .click 动态添加侦听器

例如,您可以加载一些div并检查滚动,使用James Padolsey中的此功能,它适用于所有浏览器

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
           });
       }
   });

这只是一些帮助你的方法

答案 2 :(得分:1)

减少页面上的节点数量。仅加载用户需要的内容,当用户向下滚动时延迟加载或打开导航级别(如果您有可折叠的树)。

答案 3 :(得分:0)

如果点击处理程序与更多项目相同而不是使用:

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

    /* click handler */

});

你可以做到这一点:

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

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

如果函数类似,您还可以参数化函数以执行更多任务。