客户端包括与服务器端包括？答案

【问题标题】：Client side includes vs server side includes?客户端包括与服务器端包括？
【发布时间】：2011-04-24 00:38:30
【问题描述】：

我们有一个包含多个 div 块的 HTML 页面。我们想将这些 div 分成多个文件，然后将它们组合到一个文件中 - 最好使用服务器端包含（在我们的例子中是 JSP）还是客户端包含？

请注意，我们使用的是 JQuery - 不确定 JQuery 是否有巧妙的方法来执行包含。

【问题讨论】：

【解决方案1】：

就性能而言，在服务器上进行这种处理要好得多。额外 HTTP 请求的 I/O 和处理成本（如果您在客户端上进行排序是必要的）将是巨大的。在服务器上包含额外的内容会给用户带来毫秒级的延迟；在客户端上执行此操作将需要更多数量级。

编辑根据Luke Schafer's comment，这假定组合在一起的内容可以立即生成（例如，通过包含来自服务器的平面文件）。如果需要时间（例如冗长的数据库调用），加载页面的主要部分并使用 jQuery 添加额外内容可能是合适的。与以往一样，最佳解决方案取决于您的具体情况。

【讨论】：

【解决方案2】：

实际上，客户端包含有一个非常有用的属性：客户端浏览器有缓存！如果您的某些内容预计不会经常更改，并且每个客户端都预计会经常加载页面的某些片段，那么客户端包含是一个好主意，因为可以利用客户端的浏览器缓存。

这个想法是您的整个页面包含一堆占位符 div，其中客户端包含将被删除。 HTML 片段通过 AJAX 调用加载。如果片段的 HTTP 响应标头在很远的将来指定 Expires 和/或 Cache-Control，则当您的客户端访问下一页时，AJAX 请求将从缓存中提供，而不是实际发送到服务器。

【讨论】：

你能让浏览器现金HTML文件/片段吗？如果是这样，听起来包括主导航（如果整个网站都相同）可能会很好，对吧？
如果您的片段是通过单独的 HTTP 请求获得的，那么可以。浏览器可以缓存整个 HTTP 响应（只要正确指定了响应的 Expires 和 Cache-Control 标头），但它们不会缓存响应的部分。这就是我提到 AJAX 调用的原因。对 AJAX 调用的响应包含您要缓存在浏览器上的 HTML 片段。

【解决方案3】：

我必须同意其他所有人的观点，即服务器端就是这个地方，但有一点需要注意。

如果您的部分包含一些需要一段时间才能加载的内容，例如，每个部分都有来自单独的 Web 服务调用的内容，那么让 JQuery 通过 get 为您加载它们可能会有所帮助，因为页面的其余部分可以在异步加载部分时加载。

除此之外，是的...服务器端

【讨论】：

+1 我完全同意这一点，并将其添加为我的回答中的一个警告。谢谢。

【解决方案4】：

我不确定我在客户端与服务器端的争论中属于哪个方面。这些天流行的事情似乎是在客户端处理事情。可能两者的某种组合是最好的。只是为了完全尝试客户端，我决定启动一个对象，该对象异步包含客户端，但缓存了文本以供以后使用。有一个加载函数，它将回调函数作为成功加载时调用的参数。还有一个函数可以将对象的内部 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);    
}

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

var foo = new Include("foo.inc");
var bar = new Include("bar.inc");
foo.setInnerHtmlOf($('#treeMargin'));
bar.setInnerHtmlOf($('#mainMargin'));

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

【讨论】：

【解决方案5】：

我会说服务器端。如果 jQuery 没有加载，或者用户关闭了 javascript，该怎么办？

【讨论】：