裝載大量數據的HTML

你能告訴我到大量的數據加載到HTML網頁的最佳方式？我有一個很好的佈局，效果很好，但是我擔心一旦數據庫開始填滿，這會對性能產生重大影響。對我來說最好是使用數據表，並且延遲加載是一個不錯的選擇。我只是想在深入研究項目之前做一些調查，並意識到我走錯了路。 這是當前客戶視圖裝載大量數據的HTML

<div class="row"> 
      <div class="col-lg-4"> 
       <div class="contact-box"> 
        <a href="profile.html"> 
        <div class="col-sm-4"> 
         <div class="text-center"> 
          <img alt="image" class="img-circle m-t-xs img-responsive" src="img/a2.jpg"> 
          <div class="m-t-xs font-bold">Graphics designer</div> 
         </div> 
        </div> 
        <div class="col-sm-8"> 
         <h3><strong>John Smith</strong></h3> 
         <p><i class="fa fa-map-marker"></i> Riviera State 32/106</p> 
         <address> 
          <strong>Twitter, Inc.</strong><br> 
          795 Folsom Ave, Suite 600<br> 
          San Francisco, CA 94107<br> 
          <abbr title="Phone">P:</abbr> (123) 456-7890 
         </address> 
        </div> 
        <div class="clearfix"></div> 
         </a> 
       </div> 
      </div> 
      </div>

來源

2016-11-23 Bish25

你需要的是不是真的懶裝載但懶惰渲染。您可以輕鬆地將10k客戶的名稱和聯繫信息保存爲RAM中的JS對象。你的問題都將集中在這些元素的渲染上，你可能會看到幾百張卡片的表現下降。

因爲你的元素是如此的相似，只是變化的數據，你已經可以重用現有的DOM元素。甚至更好的是，有很多圖書館已經幫助了這個！ React與react-list一起爲我至今偉大的工作。您現在只能在屏幕上顯示元素，並且元素從視圖中出來時，React會確保您重新使用這些DOM元素。

有了這種懶人渲染你也可以期望過濾列表是瞬間！

的缺點是，你需要適應的反應的特殊工作流程（寫你的卡作爲反應的組分，增加對.jsx文件編譯步驟）。還有很多其他圖書館可以解決這個問題（好的搜索短語包括「js list view」和「infinite scroll list」）。但是我發現他們中的大多數都有基本的缺陷，比如糟糕的公共API，或者沒有附加到全局窗口滾動條。 react-list是迄今爲止我唯一滿意的一個。

你真的應該做的是停止猜測。用你喜歡的攤販庫生成數據庫中的一對夫婦一千^{（或您希望無論數量多少）}隨機記錄。

來源

2016-11-23 10:51:45

裝載大量數據的HTML

回答

相關問題