Người nghèo của bộ nhớ đệm trong JavaScript

[TL;Phiên bản DR: sử dụng cookie để lưu trữ các kết quả của cuộc gọi async; Hiển thị các kết quả của quá khứ async cuộc gọi ngay lập tức và sau đó xác nhận họ sau khi tải trang.]

Tôi đã làm việc trên SharePoint intranet site cho một khách hàng tính năng đó, trong số những thứ khác, một hướng trung học cách điệu mà tùy chọn trình đơn được quản lý thông qua một danh sách tùy chỉnh cũ thường xuyên.  Ý tưởng là rằng khách hàng được để kiểm soát trình đơn "của họ" trang web mà không ảnh hưởng đến hoặc bị ảnh hưởng bởi việc chuyển hướng toàn cầu đặt của nó.

(đó là một cái gì đó vô cùng lật đổ về việc thêm một CEWP điểm vào một tập tin HTML mà tải một số CSS và JS để về cơ bản làm thay đổi gần như tất cả mọi thứ về hành vi của một trang web... nhưng đó là cho đăng bài khác)

Mã này khá đơn giản:

Ở đây tại chỗ đau là mà mỗi khi bất cứ ai chạm một trong các trang của trang web, trình duyệt web của người dùng đó đến để có được khoản mục khỏi danh sách.  Một khi dev được hoàn tất và thử nghiệm đã chứng minh những điều cần được ổn định và đầy đủ, cuộc gọi này là không cần thiết hơn 99% thời gian từ trình đơn hiếm khi thay đổi.  Nó cũng có một ảnh hưởng đến giao diện người dùng lạ mà là phổ biến trong thế giới mới dũng cảm này của các trang web siêu ajaxy-Hiển thị hình ảnh trang và trình đơn đưa ra chỉ sau đó.  Nó là hốt hoảng kinh hai và mất tập trung trong quan điểm của tôi.  Và hốt hoảng kinh hai. Vì vậy, bộ nhớ đệm. 

Tôi đổi logic thusly:

  • Tìm kiếm một cookie trong trình duyệt có chứa trình đơn như tôi cuối đọc nó
    • Nếu tìm thấy, khiến nó ngay lập tức.  Đừng chờ đợi cho trang để hoàn tất tải.  (Bạn cần phải đảm bảo rằng HTML của bạn chiến lược được đặt ở đây, nhưng nó không phải là khó khăn để làm).
  • Chờ đợi cho trang để hoàn tất tải và làm cho một async gọi để tải lên mục trình đơn từ một danh sách bằng cách sử dụng phần còn lại hoặc lists.asmx hoặc bất cứ điều gì
  • So sánh những gì tôi nhận chống lại cookie
    • Nếu nó phù hợp với, Dừng
    • Nếu không, bằng cách sử dụng jQuery, tự động điền một bó nếu <Li>của trong một <ul>
  • Sử dụng CSS để làm tất cả các định dạng
  • Lợi nhuận!

Một số bạn sẽ nói, "hey! có là không có xảy ra bộ nhớ đệm thực sự ở đây kể từ khi bạn đang đọc menu dù sao mỗi lần duy nhất.”  Và bạn nói đúng-tôi không cho các máy chủ bất kỳ hình thức nào của phá vỡ.  Nhưng vì cuộc gọi async và sẽ xảy ra sau khi trang đầu tiên tải trọng chiến đấu HTML đầy đủ ám, "thật" đáp ứng tốt hơn cho người dùng.  Menu ám khá nhiều càng tốt trang thu hút.  Nếu trình đơn sẽ xảy ra với sự thay đổi, người sử dụng phải chịu sự một hốt hoảng kinh hai tái vẽ của menu, nhưng chỉ một lần.

Có một số cách để làm cho bộ nhớ đệm này hiệu quả hơn và giúp đỡ các máy chủ cùng một lúc:

  • Đặt trong một quy tắc rằng bộ nhớ cache cookie"" có hiệu lực tối thiểu 24 giờ hoặc một số khung thời gian khác. Miễn là có không có cookie hết hạn, sử dụng các cookie của menu ảnh chụp và không bao giờ trúng các máy chủ.

Vâng... đó là tất cả những gì tôi suy nghĩ ngay bây giờ :). 

Nếu bất cứ ai có bất cứ ý tưởng thông minh ở đây tôi rất muốn biết họ.

Và cuối cùng-kỹ thuật này có thể được sử dụng cho các công cụ khác.  Điều này khách hàng trang có một số điều hướng dữ liệu trên nhiều trang, nhiều người trong số họ thay đổi tương đối hiếm khi (giống như một lần một tuần hoặc mỗi tháng một lần).  Nếu bạn nhắm mục tiêu các khu vực cụ thể của chức năng, bạn có thể cho một giao diện người dùng phản ứng nhanh hơn bằng cách kéo nội dung từ các cửa hàng địa phương cookie và rendering ngay lập tức.  Nó cảm thấy nhanh hơn để người sử dụng ngay cả khi bạn đang không cứu máy chủ bất kỳ chu kỳ.  Bạn có thể tiết kiệm các chu kỳ máy chủ bằng cách quyết định một số điều kiện và gây nên để làm mất hiệu lực bộ nhớ cache cookie địa phương này.  Đó là tất cả tình huống và artsy stuff và thực sự phần lớn vui :). 

</kết thúc>

undefinedĐăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

Ai nghĩ về “Người nghèo của bộ nhớ đệm trong JavaScript

  1. Jonathan Roussel

    Hi Paul,

    Thực hiện tốt đẹp, đó là một cái gì đó chúng tôi sử dụng nhưng chúng tôi sử dụng lưu trữ cục bộ HTML5 API thay vì cookie. Ổ đĩa đầu tiên là chúng tôi cần thiết để lưu trữ nhiều hơn cookie có thể cho phép. Nhưng một lợi ích bổ sung là rằng nó không tăng dữ liệu, trong khi cookie được gửi trở lại và ra. Từ một dev điểm của xem, nó là rất dễ sử dụng.
    Hỗ trợ trình duyệt là không hoàn hảo nhưng thực sự khá tốt, http://caniuse.com/namevalue-storage .

    Jonathan

Để lại câu trả lời

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *