javascript - 如何提高 JavaScript 性能/减少大型 HTML 页面上的页面负载？

Question

我们有一个如下的页面布局，带有用于大量 HTML 元素（数千个 DIV）的 jQuery 单击处理程序。

布局是这样的：

---

导航栏包含至少 2000 多个 DIV 和 UL 、 LI（用于内容导航），并且我们将 jQuery 事件处理程序绑定到每个元素：

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

  /* click handler */

});

加载需要很多时间，在 IE 上性能很糟糕！无论如何我们可以改进它吗？或任何替代设计来处理这个问题？

Answer 1

您还可以使用 on 函数 ( http://api.jquery.com/on/ )

例如：

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

  /* click handler */

});

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

这只是一些帮助你的方法

Answer 3

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

Answer 4

如果更多项目的点击处理程序相同，而不是使用：

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

    /* click handler */

});

你可以这样做：

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

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

如果功能相似，您还可以对功能进行参数化以执行更多任务。