如何在具有大型HTML的頁面上提高JavaScript性能/減少頁面加載？

我們有一個頁面佈局如下，jQuery點擊處理大量的HTML元素（數千個DIV）。如何在具有大型HTML的頁面上提高JavaScript性能/減少頁面加載？

的佈局是這樣的：

enter image description here

導航欄包含至少2000+的DIV和UL，LI（用於內容導航），我們有jQuery的事件處理程序綁定到每個元素：

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

    /* click handler */ 

});

加載需要花費很多時間，並且在IE上性能很糟糕！有反正我們可以改進它嗎？或任何替代設計來處理這個問題？

來源

2013-10-25 Dio Phung

減少頁面上的節點數量。只加載用戶需要的內容，當用戶向下滾動或打開導航級別時進行延遲加載（如果您有可摺疊的樹）。

來源

2013-10-25 09:29:06 Halcyon

您還可以在函數（http://api.jquery.com/on/）

使用例如：

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

    /* click handler */ 

});

來源

2013-10-25 09:33:06 Naster

這對性能有什麼幫助？ – subZero

簡單點擊修改dom樹，就動態地做。但是，不要將事件點擊到html對象，而只能用於div.navbar。 – Naster

你有很多的可能性，以提高性能

1.可以加載DIV只是當用戶滾動並使用Ajax

2.使用.on，而不是.click從James Padolsey添加監聽動態

例如，您可以加載一些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 
      }); 
     } 
    });

這只是一些方法來幫助你

來源

2013-10-25 09:33:41

如果點擊處理程序是相同的更多的項目，而不是usi NG：

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

    /* click handler */ 

});

可以讓這個：

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

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

如果功能是相似的，你也可以parametrise一個功能，使更多的任務。

來源

2013-10-25 09:35:14 Jonathan

如何在具有大型HTML的頁面上提高JavaScript性能/減少頁面加載？

回答

相關問題