客戶端包括vs服務器端包括？

Question

我們有一個包含多個div塊的HTML頁面。我們希望將這些div分成多個文件，然後將它們合併成一個文件 - 最好是使用服務器端包含（我們的情況爲JSP）還是客戶端包含？

請注意，我們正在使用JQuery--不確定JQuery是否有一種巧妙的方法來執行包含。

Answer 1

就性能而言，它遠遠優於在服務器上進行這種處理。 I/O和處理額外HTTP請求的成本 - 如果您在客戶端進行整理 - 這將是非常重要的。在服務器上包含額外的內容將導致用戶的毫秒延遲;在客戶端上做的事情會更多。

編輯根據Luke Schafer's comment，這假設可以立即生成內容（例如，通過從服務器中包含平面文件）。如果需要時間（例如冗長的數據庫調用），加載頁面的主要部分並用jQuery添加額外的內容可能是合適的。最好的解決方案，一如既往，取決於你的特殊情況。

Answer 2

我會說服務器端。那麼，如果jQuery沒有加載，或者用戶已經轉向了javascript？

Answer 3

我不得不同意其他人，服務器是地方，有一個警告。

如果您的部分包含需要一段時間才能加載的內容，比如說，每個人都有來自單獨的Web服務調用的內容，讓JQuery使用get加載它們可能是有益的，因爲頁面的其餘部分可以在異步加載部分時加載。

除此之外，是啊...服務器端

Answer 4

實際上，客戶端包含有一個屬性，這是非常有用的：客戶端瀏覽器有緩存！如果您的某些內容預計不會經常更改，並且每個客戶端都需要經常加載頁面的某個片段，則客戶端包含是一個不錯的主意，因爲可以利用客戶端的瀏覽器緩存。

這個想法是，你的整個頁面包含一堆佔位符div，其中客戶端包括將被丟棄。 HTML片段通過AJAX調用加載。如果這些片段的HTTP響應頭將來會指定一個Expires和/或Cache-Control，那麼當您的客戶端訪問下一頁時，AJAX請求將從緩存中提供，而不是實際上去服務器。

Answer 5

我不完全確定我在客戶端和服務器端爭論的位置。現在流行的做法似乎是在客戶端處理事情。可能兩者的組合最好。爲了完全在客戶端嘗試，我決定啓動一個客戶端包含異步的對象，但緩存文本供以後使用。有一個加載函數將回調函數作爲成功加載時調用的參數。還有一個函數可以將對象的內部html設置爲加載的文本。該對象需要先前包含jquery。

/** 
* An object to manage client side includes. 
* 
* Loads of text are asynchronous but the result will be cached for later use. 
* 
* @param urlText - the url of the inlcude text 
* @returns an Include object 
*/ 
function Include(urlText) 
{ 
    var self; 
    var loaded; 
    var txt; 
    var url; 

    /** 
    * Sets the url for the include. 
    * 
    * Will unload a previously set include. 
    * 
    * @param url 
    */ 
    this.setUrl = setUrl; 
    function setUrl(url) 
    { 
     if (self.url != url) 
     { 
      unload(); 
     } 
     self.url = url; 
    } 

    /** 
    * 
    * @returns the url 
    */ 
    this.getUrl = getUrl; 
    function getUrl() 
    { 
     return self.url; 
    } 

    /** 
    * Unloads the current url. 
    */ 
    this.unload = unload; 
    function unload() 
    { 
     self.txt = null; 
     self.loaded = false; 
    } 

    /** 
    * Loads the current url asynchronously 
    * 
    * @param fnPostLoad function to call on successful completion 
    */ 
    this.load = load; 
    function load(fnPostLoad) 
    { 

     if (self.loaded) 
     { 
      if (fnPostLoad != null) 
      { 
       fnPostLoad.call(); 
      } 
      return; 
     } 

     $.ajax({ 
      type : "GET", 
      dataType : "text", 
      url : self.url, 
      success : function(data) { 
       self.txt = data; 
       self.loaded = true; 
       if (fnPostLoad != null) 
       { 
        fnPostLoad.call(); 
       } 
      }, 
      error : function(){ 
       alert("An error occurred accessing client side include located at: " + self.url); 
      } 
     });   
    }; 

    /** 
    * Sets the inner html of a given object to be the text of this include. 
    * 
    * Will load the url if not loaded. 
    * 
    * @param obj 
    */ 
    this.setInnerHtmlOf = setInnerHtmlOf; 
    function setInnerHtmlOf(obj) 
    { 
     load(function(){obj.html(self.txt);}) 
    } 

    // initialize members 
    self = this; // must be done first 
    loaded = false; 
    txt = null; 
    setUrl(urlText);  
} 

要使用這個對象，你可以做這樣的事情：

​​

我沒有做太多的測試，但它似乎相當很好地工作。