Để cải thiện hiệu suất/đáp ứng của trang web của tôi, tôi đã thực hiện tải trang một phần bằng AJAX, replaceState, pushState và trình nghe popstate.Nút quay lại API lịch sử HTML5 với tải trang một phần
Tôi về cơ bản lưu phần trung tâm của trang (HTML) làm đối tượng trạng thái của tôi trong lịch sử. Khi một liên kết được nhấp, tôi chỉ yêu cầu bit trung tâm của trang từ máy chủ (xác định các yêu cầu này với một tiêu đề Chấp nhận khác) và thay thế bằng javascript. Trên popstate tôi lấy phần trung tâm trước đó và đẩy nó trở lại vào dom.
Điều này chủ yếu hoạt động tốt, tuy nhiên tôi đã tìm thấy một vấn đề cụ thể mà tôi đang gặp phải. Đó là một chút phức tạp để giải thích, vì vậy xin lỗi của tôi nếu điều này không phải là rất rõ ràng.
Có một hình thức tìm kiếm trên hầu hết các trang của chúng tôi. Việc tải trang một phần thông qua ajax chỉ trên các yêu cầu GET và biểu mẫu thực hiện một POST dẫn đến tải trang đầy đủ.
Nếu tôi di chuyển các thiết lập trang sau, tôi kết thúc trên một trang một phần bị thay đổi bao gồm CHỈ nội dung trung tâm, mà không cần bất kỳ dom xung quanh:
Start trên Trang chủ (thông qua trang đầy đủ tải) - thực hiện Tìm kiếm (sau chuyển hướng-nhận)
Đưa bạn đến Kết quả Tìm kiếm (thông qua tải trang đầy đủ) - sau đó nhấp vào Trang chủ
Trả lại bạn về Trang chủ (qua nhận động) - nhấp vào trình duyệt quay lại
Tìm kiếm Kết quả (từ người nghe popstate) - nhấp vào trình duyệt quay lại
Trang chủ không đúng định dạng e.
Khi trang chủ không đúng định dạng xuất hiện, người nghe popstate của tôi không có mặt.
Điều tôi nghĩ rằng đang xảy ra, là tải thứ hai (động, một phần trả lời thay vì trang đầy đủ.
Để cố gắng khắc phục điều này, tôi đã thêm tiêu đề Vary: Accept vào phản hồi để cho trình duyệt biết rằng nội dung có thể thay đổi dựa trên tiêu đề chấp nhận. Tôi cũng đã thêm Cache-Control max-age = 0, pragma no-cache và ngày hết hạn trong quá khứ cho nội dung được tải một phần để cố gắng buộc trình duyệt không lưu vào bộ nhớ cache này, nhưng không có cách nào giải quyết được.
Rất tiếc, công ty của tôi không cho phép lưu lượng truy cập bên ngoài vào máy chủ dev của chúng tôi, vì vậy tôi không thể cho bạn thấy sự cố. Tôi đã xem xét các câu hỏi tương tự khác nhau ở đây, nhưng không có câu hỏi nào trong số họ có vẻ giống nhau, cũng như các giải pháp được đề xuất dường như không hoạt động.
Nếu tôi thêm một tham số vô nghĩa (blah = blah) vào các yêu cầu GET động của tôi, điều này sẽ giải quyết được vấn đề. Tuy nhiên đây là một hack xấu xí mà tôi không muốn làm. Điều này có vẻ như nó nên được giải quyết với các tiêu đề, vì tôi nghĩ rằng đó là một vấn đề bộ nhớ đệm. Bất cứ ai có thể giải thích những gì đang xảy ra?
Cập nhật nhanh - tiêu đề dường như giải quyết được sự cố trên Firefox, tuy nhiên nó vẫn tồn tại trên Chrome và iOS Safari (có thể là do webkit?) –
Nghe có vẻ giống như vấn đề bộ nhớ đệm. Việc thêm tham số vào các yêu cầu GET động có vẻ hợp lý - đó là những gì jquery-pjax thực hiện. –