通過Javascript與普通HTML標記添加的HTML的性能比較

有沒有人測試過，或者有誰知道，這兩種不同的呈現相同html內容的方式的性能差異（除了導入jQuery庫，另一個沒有，並且Ajax版本中有兩個請求與一個）？通過Ajax通過Javascript與普通HTML標記添加的HTML的性能比較

添加HTML

<html> 
<head> 
    <script src="javascripts/jquery.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
    jQuery.ajax({ 
     type: "GET", 
     url: "http://www.mysite.com/events", 
     success: function(result) { 
      $("#container").append(result); 
     } 
    }); 
    </script> 

    <body> 
     <div id="container"> 
     </div> 
    </body> 
</html>

內嵌HTML

<html> 
<head> 
    <body> 
     <div id="container"> 
      <!-- events --> 
      <ol> 
       <li> 
        <p> 
         Event A... 
        </p> 
       </li> 
      </ol> 
     </div> 
    </body> 
</html>

什麼是對這個統計，當你和你不使用這樣的事情？ Ajax版本的速度要慢多少（例如，如果我要渲染像亞馬遜主頁那樣複雜的東西，假設我不必擔心路徑，因爲這將是我自己的應用程序）？這個問題是獨立於可讀性的最佳實踐，所有這一切，只是想知道性能。

來源

2010-03-03 Lance Pollard

從來沒有想過這樣！但肯定的是，添加html的AJAX方式會變慢。 – HotTester 2010-03-03 10:57:00

整體表現一度在你的例子中，並不是由$("#container").append(result);與內聯HTML的渲染性能決定的。它主要由HTTP請求的數量決定。

在HTML-only示例中，只有一個HTTP請求被創建，並且只要前幾個塊被下載，內容就可以開始渲染。

在JS示例中，瀏覽器開始加載HTML，然後它獲得第一個腳本標記，並且必須下載，解析並執行jquery.js。然後它必須下載/事件。只有在這兩個HTTP請求完全完成後，才能開始呈現HTML。所以在實踐中，你的頁面會顯示得慢得多。有關更多信息，請參閱關於scripts at the bottom和minimizing http requests的性能規則。

來源

2010-03-04 07:58:43 Annie

fwiw，這可能看起來沒有關係，但我已經讀過客戶端XSLT將XML文件轉換成DOM 3x的速度比讓js插入它但不提供測試或統計數據更快或更多。

來源

2010-03-03 10:57:50 Rob

在您的示例中，差異不會顯而易見。然而，在亞馬遜樣式的主頁中，使用純HTML版本作爲基準，Ajax版本從幾乎沒有引人注意到慢到幾個數量級都會變慢。有許多變量會影響Ajax版本的速度（連接速度，瀏覽器的JavaScript引擎，被操縱的HTML的複雜性，Ajax調用的數量，JavaScript的編寫以及其他）。

有一個很好的工具叫做dynaTrace，可以幫助您診斷Ajax瓶頸。 Firebug也有助於分析性能問題。

來源

2010-03-03 11:02:29

ajax比加載http://www.mysite.com/events，+ 3ms左右做append + 1 - ms做瀏覽器重排（取決於瀏覽器和頁面的複雜度）要慢得多。

我處於類似的情況，並使用類似的方式來加載html。它主要取決於頁面加載速度本身的速度，但如果通過ajax加載的html比較複雜，那麼瀏覽器的迴流時間可能會很長。

來源

2010-03-03 11:02:51 Mark

jQuery在渲染時比純HTML要慢。正如任何JavaScript DOM操作速度較慢，純HTML文件

但是，除了渲染性能還有更多。一個花哨的HTML格式的大表格可能需要比緊湊的JSON數據查詢和一個小的jQuery格式化要花費更長的時間

只需通過AJAX獲取純HTML片段就不會在總下載時間中獲得任何東西。但經常出現從用戶的角度來看更快，因爲主要的頁面結構加載更快，然後將細節躍然紙上

jQuery的庫緩存，因此他們只有一個開銷每個會話或更少

來源

2010-03-03 11:07:38 TFD

通過Javascript與普通HTML標記添加的HTML的性能比較

回答

相關問題