顯示大量數據的最佳方式

Question

在網頁上處理大量數據條目的最佳方法是什么？

假設我在一個包含song_name，author_name，song_id，posted_by的表上有5000條記錄的數據庫; 我想在一個頁面上構建一個包含所有歌曲的播放列表。 此頁面上還有一個播放器根據頁面上顯示的播放列表條目播放歌曲。

我試圖從該表中提取所有5000個條目並使用它們構建一個javascript對象，並處理該對象我已經構建了播放列表，在播放列表中搜索，等等。 但是這需要非常大量的資源（不是用戶端）和大量的頁面加載時間（因為有很多條目！）並且頁面非常慢。

是否最好將所有數據加載到一個對象中，並通過JavaScript對每100個播放列表記錄進行分頁，或者更好地從數據庫中分頁結果並更新播放列表？ （ 這考慮到這樣一個事實，即如果玩家已經激活了隨機播放按鈕，它可以隨機播放到用戶數據庫中的任何歌曲，而不僅僅是來自可見播放列表的當前歌曲 ）

Answer 1

我認為分頁是你最好的選擇。 只需創建一個100的限制（例如）並使用AJAX提取下一個100.如果客戶端打開shuffle，只需向服務器發送另一個請求並讓它調用執行以下操作的函數：

1. 計算數據庫中的總行數
2. 使用randomize函數可以獲得100個隨機數
3. 現在創建一個稍微棘手的查詢，根據他們的rownumber從db獲取記錄：

function getRandomTracks（$ limit）{

  $total = $this->db->count_all('table_tracks');

  //Get random values. Speed optimization by predetermine random rownumbers using php

  $arr = array();
  while (count($arr) < $limit) { 
    $x = mt_rand(0, $total); //get random value between limit and 0
    if (!isset($arr[$x])) { //Random value must be unique
      //using random value as key and check using isset is faster then in_array
      $arr[$x] = true; 
    }
  }

  //Create IN string
  $in = implode(',', array_keys($arr));

  //Selection based on random rownumbers
  $query = $this->db->query('SELECT * FROM
      (SELECT  @row := @row + 1 as row, t.*
         FROM `table_tracks` t, (SELECT @row := 0) r) AS tracks
     WHERE `row` IN(' . $in . ')');

  return $query->result();

}

我正在使用類似的功能，也會處理大量的曲目（超過300.000），所以我相信這會起作用！

Answer 2

使用ajax以100步（或更多，只是嘗試）的步驟加載數據

對記錄集進行循環並每次增加限制：

<?php
$Step = 100;
$u_limit = 0;
$sql = "SELECT song_id FROM $MySQL_DB.songs";
$data = mysql_query($sql, $dblk);
$numer_of_entries = mysql_num_rows($data);
while($o_limit < $numnumer_of_entries)
{
    $o_limit = u_limit + $Step;
    $sql = "SELECT * FROM $MySQL_DB.songs order by id DESC LIMIT $u_limit, $o_limit";
    $data = mysql_query($sql, $dblk);
    while($row = mysql_fetch_array($data))
    {
        // built an array and return this to ajax
    }
    $u_limit += $Step;
}

Answer 3

即使您使用的是jQuery或其他庫，也很難將“整個”數據加載到客戶端程序，因為關鍵因素不是您使用的是什么代碼/ sdk而是瀏覽器本身！
順便說一句，chrome是最快的，IE（在ver.10之前）是最低的。

您可以參考以下鏈接：
http://www.infoq.com/news/2010/09/IE-Subsystems-Spends-Time
http://www.nczonline.net/blog/2009/01/05/what-determines-that-a-script-is-long-running/
http://www.zdnet.com/browser-benchmarks-ie-firefox-opera-and-safari-3039420732/
http://msdn.microsoft.com/en-us/library/Bb250448
http://support.microsoft.com/kb/175500/en-us

所以你應該做的是將客戶端邏輯移動到服務器端，就像其他人建議的那樣。

正如你所提到的那樣，為了獲得所有數據而只使用javascript進行分頁，實際上它與無分頁相同。

Answer 4

試試這個： http ： //www.datatables.net/

我想知道但也許它的確有效。