客户端包括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);  
} 

要使用这个对象，你可以做这样的事情：

​​

我没有做太多的测试，但它似乎相当很好地工作。