2011-11-10 79 views
7

Tôi đang đối mặt với một vấn đề thực sự rất lớn (ít nhất là đối với tôi). Tôi sẽ cung cấp cho bạn một số nền tảng.LocalStorage, một số yêu cầu Ajax hoặc yêu cầu Ajax lớn?

Tôi đang phát triển một ứng dụng web dành cho thiết bị di động sẽ hiển thị thông tin về các trạm xe buýt và trạm xe đạp trong thành phố của tôi. Nó sẽ hiển thị các điểm đánh dấu GMap cho cả trạm dừng xe buýt và xe đạp, và nếu bạn nhấp vào nó, bạn sẽ có thông tin về thời gian đến cho xe buýt hoặc có bao nhiêu xe đạp. Tôi có được bảo hiểm khá độc đáo.

Phần có vấn đề đang tải các trạm.

Cách tiếp cận đầu tiên của tôi là tải toàn bộ số lượng số lượng trạm khi tải trang. Đó là khoảng 200 Kb JSON cộng với thời gian nó được lặp qua mảng và đặt nó vào bản đồ. Chúng được tải ẩn, vì vậy, khi người dùng nhấp vào tên dòng, chúng xuất hiện bằng chức năng 'findMarker'. Nếu các trạm khác có mặt trên bản đồ, chúng sẽ bị ẩn để tránh có quá nhiều điểm đánh dấu trên bản đồ.

Điều này làm việc tốt với điện thoại di động mới như iPhone 4 hoặc HTC hoàn toàn mới nhưng nó không hoạt động tốt với điện thoại di động 2 năm tuổi.

Cách tiếp cận thứ hai tôi nghĩ, là để tải chúng theo yêu cầu, vì vậy bạn click vào nhà ga, họ được nạp vào bản đồ, và sau đó hiển thị nhưng điều này dẫn đến hai vấn đề:

  • Các đầu tiên là bạn có thể (hoặc có thể không) thực hiện một số yêu cầu có thể kết thúc giống nhau (?)
  • Điều thứ hai là để tránh việc có quá nhiều dấu, chúng sẽ bị ẩn hoặc xóa để bạn có thể xóa thông tin cần được thực hiện lại sau một thời gian, chẳng hạn như trạm xe đạp được tải dưới dạng nhóm chứ không phải theo dòng.

Cuối cùng, tôi nghĩ về việc sử dụng LocalStorage để lưu trữ chúng, vì chúng sẽ không thay đổi điều đó nhiều nhưng sẽ là một lượng lớn dữ liệu và sau đó, một cơn đau ở ass để khôi phục lại theo họ là chìa khóa -giá trị, và cũng (và tôi không thực sự chắc chắn về điều đó) Tôi có thể tìm thấy các thiết bị không có hỗ trợ của tính năng này có để dự phòng cho một trong các tùy chọn khác.

Vì vậy, điều đó nói rằng, tôi nghĩ rằng có thể có ai đó phải đối mặt với một số vấn đề tương tự và giải quyết nó theo một cách nào đó hoặc có một số lời khuyên cho tôi :).

Mọi trợ giúp sẽ thực sự được đánh giá cao.

+0

Tôi nghĩ rằng đối với một ứng dụng web đó là tất cả về tốc độ và hiệu suất, vì vậy bộ nhớ đệm bất kỳ dữ liệu tĩnh trước tay (trong một màn hình loading giật gân hoặc một cái gì đó) IMHO là cách đi. Điều này cũng sẽ là optinal cho sử dụng ngoại tuyến hoặc khi kết nối là xấu. Tải ban đầu có thể mất nhiều thời gian hơn một chút nhưng tôi nghĩ webapp sẽ trở nên dễ dàng hơn. –

+0

Cảm ơn bạn đã bình luận Phill. Ý nghĩ này là một suy nghĩ dẫn đến nhiều sự bối rối. Sẽ không có nhiều cpu tiêu thụ tìm kiếm và thêm từ lưu trữ địa phương hơn là lấy và thêm từ máy chủ? –

+0

Đọc từ bộ nhớ cục bộ gần như chắc chắn sẽ nhanh hơn so với thực hiện yêu cầu HTTP, đọc phản hồi và phân tích cú pháp dữ liệu JSON. Tuy nhiên, tôi nghĩ rằng bằng cách sử dụng bộ nhớ đệm của trình duyệt, bạn có thể tránh sử dụng bộ nhớ cục bộ, xem câu trả lời của tôi bên dưới. – StefanOS

Trả lời

5

Cách tiếp cận tốt nhất tùy thuộc vào hành vi của người dùng của bạn. Họ thường nhấp vào rất nhiều đài hoặc chỉ một vài trạm? Họ có thích khởi động nhanh hơn (tải theo yêu cầu) hoặc hiển thị chi tiết trạm phản hồi nhanh hơn (dữ liệu tải trước) không?

Một cách tiếp cận giá trị điều tra sẽ được nạp dữ liệu theo yêu cầu nhưng sử dụng bộ nhớ đệm trình duyệt (ETag và Expires header) để tránh lấy những thông tin tương tự hơn và hơn nữa. Điều này sẽ giải quyết cả hai mối quan tâm của bạn mà không phải đối phó với LocalStorage.

Xem này câu hỏi này cho các cách tiếp cận khác nhau đối với bộ nhớ đệm trình duyệt ETag vs Header Expires

+0

Thực sự cảm ơn câu trả lời của bạn StefanO. Điểm của bạn có vẻ là một điểm khởi đầu thực sự tốt. Mặc dù tôi đã tìm thấy rằng jQuery có thuộc tính ifModified trong các cuộc gọi Ajax để kiểm tra cả hai tiêu đề ETag và Expires, tôi không thể tìm thấy bất kỳ nguồn đáng tin cậy nào để thực hiện chúng thành một phản ứng json bằng PHP. Bạn có bất kỳ thông tin về thas? –

+0

Tôi không có chuyên gia về PHP nên tôi không biết về bất kỳ tính năng khung nào có thể giúp tự động hóa điều này. Nhưng đây là tiêu đề HTTP tiêu chuẩn để bạn có thể đặt chúng như sau: tiêu đề ('Hết hạn: Thứ Sáu, 11 tháng 11 năm 2011 15:00:00 GMT'); tiêu đề ('ETag: "686897696a7c876b7e"'); – StefanOS

+0

Ngoài ra, các máy chủ web như Apache và nginx có thể được định cấu hình để đặt tiêu đề bộ nhớ đệm tự động (ví dụ: lưu tất cả các trang trong 24 giờ). Bạn chỉ cần quan tâm mã của bạn với điều này nếu bạn yêu cầu kiểm soát bộ nhớ đệm lớn hơn. – StefanOS