推遲HTML代通過handlebars.js

Question

我們有一個頁面，顯示海量數據。

目前，整個頁面在IIS服務器上生成，然後下載到瀏覽器。

由於正在服務器上執行的代碼量，測試團隊可以看到性能問題。

我們是計劃使用handlebars.js將生成html的任務從服務器委託給瀏覽器。

因此，基本上服務器代碼將被重構以快速生成一些json數據，這些數據將被髮送到瀏覽器，並且html將在瀏覽器上生成，從而減少從服務器傳輸到瀏覽器的數據量。

馬上想到我的想法是這麼多（很多）的HTML將被生成的JavaScript可能會導致瀏覽器掛起，非常不會令人愉快的用戶體驗。

因此，我想要處理json對象的數量'x'，使得它們生成的html只提供少量滾動，並且當用戶滾動並且頁面即將達到底部時，我生成下一個'x'數量的json對象，等等。

作爲參考，這將是東西像GOOLGE圖像搜索其中滾動到屏幕下方會自動列出下一組圖像的。

但是，在我的情況下，我已經在我的頁面上加載了json對象。

我們已經添加了處理欄到項目中，並希望將第三方庫保持在最低限度。

Answer 1

查詢數據庫時只發送有限數量的結果（例如10個結果）。然後，當他們到達結果列表的末尾時，他們會點擊一個按鈕，例如「加載更多」，然後嚮應用程序發起一個AJAX請求以查詢數據庫並返回下一個10個結果，等等上。您不應該立即將整個數據集發回，這就是您遇到內存性能問題的原因。

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/waypoints.min.js"></script> 

<script> 
$(document).ready(function(){ 

    // will initiate when the element with id="my_results" first comes into the users view 
    $('#my_results').waypoint(function(){ 
      // do you stuff with the json that you already have loaded on the page (this is the callback function) 
     }, 
     { offset: 'bottom-in-view' } 
    ); 

}); 
</script>