2012-05-15 24 views
7

Tôi đã ứng dụng mvc asp.net trả về kết quả JSON chứa tối đa n số năm giá trị của dữ liệu mà sau đó được hiển thị trên biểu đồ Javascript.Cache khối lượng lớn kết quả json trên phía máy khách

Để có trải nghiệm người dùng tốt (về hiệu suất), tôi đang tìm giải pháp tốt nhất cho dù có thể lưu dữ liệu JSON ở phía máy khách để khi người dùng nhấp vào Biểu đồ với các thông số khác nhau như ngày, xem tuần vv, cùng một dữ liệu JSON được truy vấn mà không cần nhấn máy chủ.

Có thể ai đó vui lòng giúp chúng tôi đưa ra quyết định tốt nhất về các phương pháp hay nhất về việc liệu dữ liệu có được lưu vào bộ nhớ cache ở phía máy khách hoặc phía máy chủ hay không.

Xin cảm ơn trước.

+0

Giá trị dữ liệu * 2 năm là bao nhiêu? * Có phải 2 năm nhật ký máy chủ web của Google hoặc một bản ghi nhỏ hơn không? – Matt

+0

@Matt khoảng 32K hàng. –

+0

Sau đó, không gửi nó cho khách hàng. Hãy để khách hàng thăm dò ý kiến ​​máy chủ. – Matt

Trả lời

11

Trước hết, cơ sở dữ liệu ở đâu? Nếu bạn đang ở trên một mạng nội bộ với mạng LAN gigabit, sau đó nhấn nó sẽ không là một vấn đề. Tuy nhiên, điều đó không đúng trên internet. Mọi người có băng thông hạn chế, đặc biệt là trên thiết bị di động và do đó bạn nên hạn chế các cuộc gọi HTTP của mình. Ngoài ra, các cuộc gọi HTTP ít hơn có nghĩa là ít căng thẳng hơn trên máy chủ.

Dưới đây là một số lời khuyên:

  • Cân nhắc pagination

    Khi nạp "trị giá 2 năm", tôi tưởng tượng rất nhiều, giống như một luận án 100 trang. Xem xét dữ liệu phân trang thay vì tải tất cả cùng một lúc. Điều này giúp bạn tiết kiệm băng thông cũng như không gian bộ nhớ đệm (Nếu nó bị giới hạn).

    Cách: Đặt tập lệnh máy chủ chia nhỏ dữ liệu theo những gì khách hàng muốn. Thật dễ dàng để tạo phân trang trong SQL bằng cách sử dụng LIMIT trong truy vấn. Logic là như

  • dữ liệu JSONify

    Sử dụng JSON để vận chuyển dữ liệu đến và đi từ mạng. Ngoài trọng lượng nhẹ, nó cũng được cấu trúc. Nó sẽ dễ dàng hơn để phân tích và lưu trữ sau này.

    Cách: PHP có hàm json_encode để chuyển đổi mảng thành chuỗi JSON. Tôi cho rằng khung của bạn có một tính năng tương tự. Có chuỗi lặp lại trên một trang sau đó sử dụng JSON.parse để chuyển đổi từ chuỗi JSON thành đối tượng JS. JSON methods đến bản địa modern browsers nhưng nếu bạn cần để phục vụ cho các trình duyệt cũ, Crockford has a library để phân tích nó

  • Sử dụng một khuôn khổ lưu trữ nổi tiếng

    Nếu một lưu trữ liên tục là cần thiết cho bộ nhớ cache trên trang, tôi vừa đi qua PersistJS mà abstracts localStorage cho những cái có sẵn trên trình duyệt. Ngoài ra, đây là JS implementation of LZW. Giữ nó tiện dụng vì localstorage sử dụng các chuỗi để lưu trữ dữ liệu và nó có giới hạn 5-10MB.

    Cách: chuyển đổi dữ liệu thành chuỗi bằng cách sử dụng JSON.stringify và lưu trữ bằng PersistJS. Sau đó, để thu hồi, có được chuỗi và phân tích nó lại sử dụng JSON.parse()

  • Gọi chỉ khi cần thiết

    Có hệ thống bộ nhớ cache chỉ gọi máy chủ nếu một cái gì đó được sửa đổi, bổ sung hoặc nếu có điều gì là không có. Nếu dữ liệu ở đó, tại sao bạn nên gọi máy chủ cho nó?

  • Sync cache

    Nếu bạn sợ của dữ liệu cũ, sau đó có một số AJAX đồng bộ hóa hệ thống bộ nhớ cache của bạn bằng cách sử dụng một số phương pháp dữ liệu trực tiếp lấy như mô tả trong wiki này về Comet.

Hai điểm cuối cùng phụ thuộc vào khung bộ nhớ cache của bạn. Nhưng BackboneJS cho phép các mô hình và bộ sưu tập của nó đồng bộ hóa với máy chủ, có cùng chức năng tôi đã đề cập.

+0

cảm ơn. Có bất kỳ mẫu nào có sẵn sử dụng các công nghệ bạn đã đề cập không? –

+0

@nilpun cập nhật – Joseph

0

Tôi đã làm những gì bạn đang cố gắng làm và đây là kinh nghiệm của tôi. Tôi sử dụng phần mềm trung gian Site Studio của Oracle tại nơi làm việc. Tôi đã tìm một khung làm việc với nó nhưng không thể tìm được. Vì vậy, tôi đã thử cả hai tùy chọn bên dưới.

1) Truy vấn cơ sở dữ liệu trả về một số lượng hàng nhất định. Tôi đã thử 2.000 như một bài kiểm tra. Một vòng lặp foreach đơn giản chuyển đổi dữ liệu trả về thành dữ liệu JSON. Vì vậy, nó có nghĩa là xây dựng một mảng dài các biến JSON khi nó lặp qua các hàng. Bằng cách này, bạn bắt chước một ảnh chụp nhanh của một cơ sở dữ liệu cục bộ. JS thực sự có thể truy cập vào các phần tử mảng rất nhanh và nó có thể làm bạn ngạc nhiên đến mức nào bạn có thể sắp xếp, thay đổi, xóa thông tin.

<script> 
var appData = [{'id':'0','first':'Sam','last':'Smith'},{'id':'1','first':'Dan','last':'Smith'}]; 
</script> 

Dữ liệu JSON này được chứa trong thẻ tập lệnh. JQuery trên doc.ready sau đó đọc dữ liệu và thêm nó vào văn bản html nếu cần. Khi người dùng thay đổi giá trị dữ liệu JSON ajax sẽ tắt và lưu các thay đổi vào cơ sở dữ liệu. Không quá khó để thêm một hệ thống như thế này vào ứng dụng của bạn. Tôi đã sử dụng Angular.js của Google sau này để liên kết dữ liệu với giao diện người dùng để có mẫu MV sạch và cũng dễ dàng để sắp xếp và lọc các loại phía máy khách nhanh. Như đã đề cập Backbone.js và các khung công tác JS khác có thể đồng bộ hóa dữ liệu máy khách với máy chủ.

2) Cách thứ hai tôi đã lưu dữ liệu vào trang html là một lần nữa lặp lại thông qua các hàng được trả về với một foreach. Sau đó, tôi đã lưu dữ liệu trong HTML bằng cách sử dụng kiểu cũ

<input type="hidden" name="someName" value="someValue" /> 

Sau đó, tôi đã sử dụng JQuery để xử lý dữ liệu và thêm dữ liệu vào giao diện người dùng. Nếu bạn thực sự muốn có được hoang dã với JSON bạn thực sự có thể nhúng nó trong các biến HTML như vậy

<input type="hidden name="row1" value="{'color':'red','style':'fancy','age':'44'}" /> 

Sau đó bạn có thể sử dụng JQuery hoặc Angular.js để xử lý các dữ liệu và ràng buộc nó vào giao diện người dùng của bạn.

Điều thú vị là rất nhiều khung ứng dụng không có hệ thống lưu vào bộ nhớ cache phía máy khách. Nó thực sự là không hiệu quả để sắp xếp một menu chọn ở phía máy chủ và sau đó xây dựng lại html. Tốt hơn là sắp xếp nó trong JS và tự động xây dựng lại menu chọn. Có một mối quan tâm với bảo mật ở đây và bạn sẽ không muốn in thông tin cá nhân vào các biến JSON hoặc HTML vì nó có thể nhìn thấy dưới nguồn xem. Ngoài ra, bạn có thể nhúng dữ liệu vào các trang bằng cách sử dụng các kỹ thuật giả mạo hơn. Hãy xem xét bên dưới:

<span class="data" value="1234"></span> 
$(function() { 
    $('.data').each(function() { 
     var val = $(this).attr('value'); 
     console.log(val); //process data 
    }); 
}); 

Sau đó, bạn có thể sử dụng JQuery trên doc.ready để xử lý dữ liệu có tên của lớp. Bạn cũng có thể đưa dữ liệu JSON vào giá trị và phân tích cú pháp sau đó. Hãy nhớ rằng những người sử dụng JQuery chống lại các nhà phát triển bằng cách sử dụng các lớp theo cách này. Theo kinh nghiệm của tôi nếu bạn không đi quá mức với nó, nó hoạt động rất tốt.

0
  1. Truy xuất dữ liệu từ cơ sở dữ liệu và lưu dưới dạng tệp tĩnh tại máy chủ. Cung cấp phần mở rộng .css hoặc .png. (Trình duyệt sẽ tự động lưu trữ tệp định kiểu và tệp hình ảnh).
  2. Lưu tên tệp dữ liệu bằng dấu thời gian trong trường ẩn (để đảm bảo tải tệp mới nhất từ ​​máy chủ nếu có thay đổi đối với tệp)
  3. Tải tệp từ máy chủ bằng AJAX, Lần đầu tiên tệp sẽ tải từ máy chủ, nhưng lần sau nó sẽ tải từ bộ nhớ cache của trình duyệt.
  4. Bạn có thể sử dụng kết quả JSON.Parse() để phân tích cú pháp yêu cầu AJAX.
+0

Bạn không thể lưu dữ liệu tốt hơn vào tệp .js? Bạn có thể sử dụng các đối tượng javascript gốc để lưu trữ dữ liệu và bạn không "nói dối" về các loại nội dung ... –

Các vấn đề liên quan