jQuery獲取php數據很慢。 如何使其快速？

Question

如標題所述，jquery顯示數據的速度比純php慢1至2秒。 在http://plekz.com/test-slow3.php上進行演示。 如何使jQuery顯示數據的速度與純PHP一樣快？

代碼：

<div id="jqryd">
</div>

<script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
    var jqryd = $('#jqryd');
    jQuery.get("sale-show-month2.php", function(data) {
        jqryd.html(data);
    });
</script>


<?php
    $sql = "SELECT payment_date, SUM(price) FROM sale WHERE seller_id=? && Year(payment_date)=? GROUP BY Month(payment_date) DESC"; //this is loged-in user.
    $q = $conn->prepare($sql);
    $result = $q->execute(array($user_id, $selected_year));
    if(!$result){
        die("Error Select user table query : ". implode(" : ", $q->errorInfo())); //if don't use implode, output of errorInfo() will be "Array".
    }
    while($r = $q->fetch(PDO::FETCH_ASSOC)){
        $price_db2 = $r['SUM(price)'];
        $payment_date_db = $r['payment_date'];
        $payment_month_db = date("F", strtotime($payment_date_db));
        $payment_month_db2 = date("m", strtotime($payment_date_db));
        echo "This is pure php : " . $payment_month_db . " - " . $money_currency . $price_db2 ."<br>";
    }
?>

Answer 1

通過分析網站示例中的訪問量，我發現，除結果以外，在sale-show-month2.php頁面中，您甚至還返回了jquery javascript。 這會減慢整個頁面的速度：由於某種原因，網絡跟蹤程序會在調用中看到查詢字符串，例如http://plekz.com/javascripts/jquery-1.5.js?_=1337691808625 ，這不允許緩存使用。

只需避免將鏈接返回到jquery即可提高性能。

即使在那之后，您也會看到jquery加載的數據稍后出現，但這是由於以下事實：首先加載了get方法，然后get加載第一頁。 您可以使用Firebug或其他工具（Chrome和IE都有自己的工具）非常清楚地看到它。

Answer 2

關於在服務器和客戶端之間傳輸的數據量，我總是會只傳輸所需的最少數據（可能根據數據使用純文本/ XML或JSON），並使用最有效的方法將其附加到DOM

不管數據量有多大，都使用最佳（以您為例，最快）方法來附加到DOM。 請查看此jsperf，以了解哪種方法最快

您會看到，使用內置DOM創建方法總是更快，例如

var li = document.createElement('li');
li.innerHTML = i;
li.setAttribute('title', 'Element number ' + i);
li.setAttribute('class', 'list-item');
container.appendChild(li);

因此，在您的情況下，我會將數據作為JSON傳遞，然后循環節點並根據需要追加。 如果返回了大量數據，則我將對數據進行分頁-或顯示一些初始數據，然后添加“顯示更多”功能，以檢索要顯示的下一部分數據。

關於后端-我將確保優化查詢並使用正確的索引。

Answer 3

您的問題真的沒有道理。 使用Firebug或Chrome瀏覽器檢查網絡傳輸-在兩種情況下，您將花費大約相同的時間等待數據。 但是，在收到php生成的數據后，該頁面會花一些時間來下載jquery-只有這樣，它才能請求新數據。

唯一值得注意的是，使用jquery連接到服務器需要花費半秒鍾的時間-如果連接不好，這種延遲將始終存在。 使用服務器端生成的數據，您將獲得一次，而使用Ajax，您將獲得兩次。

因此，在您的情況下，您無法加快獲取速度-除非您將服務器切換到具有適當吞吐量和適當響應時間的服務器。

Answer 4

雖然有一些方法可以優化結果，但是您問題的答案

如何使jQuery顯示數據的速度與純PHP一樣快？

是：不可能。

您的Javascript在解析並准備就緒之前將無法將任何內容加載到DOM中。 這意味着“純PHP”數據已經加載，因為它是服務器作為主頁的一部分提供的。

只有這樣，當瀏覽器不得不向服務器發出另一個請求時，要花費另一個往返時間才能獲得AJAX版本。 因此：無論您的服務器和JS多么出色，AJAX版本都不會像服務器端版本一樣快。

注意：這僅適用於兩個版本相互競爭的設置。 當然，可以通過不使用PHP和數據庫請求來加快HTML頁面的初始交付速度，然后在以后使用AJAX加載某些內容，這是有意義的。