Phía máy khách bao gồm phía máy chủ bao gồm?

Question

Chúng tôi có một trang HTML có nhiều khối div. Chúng tôi muốn tách các div này thành nhiều tệp và sau đó kết hợp chúng lại với nhau thành một tệp duy nhất - cách tốt nhất để sử dụng phía máy chủ có bao gồm (JSP trong trường hợp của chúng tôi) hay phía khách hàng không?

Lưu ý rằng chúng tôi đang sử dụng JQuery - không chắc chắn liệu JQuery có một cách thông minh để thực hiện việc bao gồm hay không.

Answer 1

Xét về hiệu suất, nó vượt trội hơn nhiều so với việc xử lý loại này trên máy chủ. Các chi phí về I/O và xử lý các yêu cầu HTTP bổ sung - như là cần thiết nếu bạn đang thực hiện đối chiếu trên máy khách - sẽ là đáng kể. Bao gồm nội dung bổ sung trên máy chủ sẽ dẫn đến mili giây trì hoãn cho người dùng; thực hiện nó trên máy khách sẽ có nhiều đơn đặt hàng hơn.

Chỉnh sửa Per Luke Schafer's comment, điều này giả định rằng nội dung được đặt cùng nhau có thể được tạo ngay lập tức (ví dụ: bằng cách bao gồm tệp phẳng từ máy chủ). Nếu cần thời gian (ví dụ: các cuộc gọi cơ sở dữ liệu dài), nó có thể thích hợp để tải phần chính của trang và thêm nội dung bổ sung bằng jQuery. Giải pháp tốt nhất, bao giờ hết, tùy thuộc vào hoàn cảnh cụ thể của bạn.

Answer 2

Tôi sẽ nói phía máy chủ. Điều gì về, nếu jQuery không tải, hoặc người dùng đã chuyển javascript?

Answer 3

Tôi phải đồng ý với mọi người khác rằng máy chủ là nơi, với báo trước.

Nếu các phần của bạn chứa nội dung cần tải trong một thời gian, mỗi người có nội dung từ một cuộc gọi dịch vụ web riêng biệt, có thể có lợi cho phép JQuery tải chúng cho bạn với phần còn lại của trang có thể được tải trong khi các phần được tải không đồng bộ.

Ngoài ra, vâng ... phía máy chủ

Answer 4

Thực ra, phía máy khách bao gồm có một thuộc tính rất hữu ích: trình duyệt của khách hàng có lưu trữ! Nếu một số nội dung của bạn không được dự kiến ​​thay đổi thường xuyên và mỗi khách hàng được dự kiến ​​sẽ tải một số trang thường xuyên, thì phía máy khách bao gồm là một ý tưởng tốt vì bộ nhớ cache của trình duyệt của khách hàng có thể được tận dụng.

Ý tưởng là trang đầy đủ của bạn chứa một loạt các div giữ chỗ, trong đó phía máy khách bao gồm sẽ bị xóa. Các đoạn HTML được tải thông qua các cuộc gọi AJAX. Nếu tiêu đề phản hồi HTTP của các đoạn xác định Expires và/hoặc Cache-Control trong tương lai, khi khách hàng của bạn truy cập trang tiếp theo, yêu cầu AJAX sẽ được phục vụ từ bộ nhớ cache thay vì thực sự đi tới máy chủ.

Answer 5

Tôi không chắc chắn nơi tôi rơi vào phía khách hàng so với cuộc tranh luận phía máy chủ. Điều phổ biến để làm những ngày này dường như là để xử lý mọi thứ ở phía khách hàng. Có lẽ một số kết hợp của hai là tốt nhất. Chỉ cần để thử nó hoàn toàn phía khách hàng, tôi quyết định quay lên một đối tượng mà phía khách hàng bao gồm không đồng bộ, nhưng lưu trữ các văn bản để sử dụng sau này. Có một hàm tải có chức năng gọi lại như một tham số được gọi là tải thành công. Ngoài ra còn có một chức năng để thiết lập html bên trong của một đối tượng cho văn bản được nạp. Đối tượng yêu cầu bao gồm jquery trước đó.

/** 
* 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);  
} 

Để sử dụng đối tượng này, bạn có thể làm điều gì đó như thế này:

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

Tôi đã không làm quá nhiều thử nghiệm, nhưng nó dường như làm việc khá độc đáo.