กลไกแคช AJAX ที่ด้านเบราว์เซอร์

เบราว์เซอร์ของ Ajax ได้รับการดูแลรักษาโดยเบราว์เซอร์ สำหรับ URL ที่ส่งไปยังเซิร์ฟเวอร์ AJAX จะโต้ตอบกับเซิร์ฟเวอร์เฉพาะในระหว่างการร้องขอครั้งแรกเท่านั้น ในคำขอที่ตามมา AJAX จะไม่ส่งคำขอไปยังเซิร์ฟเวอร์อีกต่อไป แต่แยกข้อมูลโดยตรงจากแคช

ในบางกรณีเราจำเป็นต้องได้รับข้อมูลที่อัปเดตจากเซิร์ฟเวอร์ทุกครั้ง แนวคิดคือการทำให้ URL ที่ร้องขอแตกต่างกันโดยไม่ส่งผลกระทบต่อแอปพลิเคชันปกติ: เพิ่มเนื้อหาแบบสุ่มหลังจาก URL

เช่น

 url = url+"&"+math.random ();

ประเด็นสำคัญ:

1. URL ที่ร้องขอในแต่ละครั้งนั้นแตกต่างกัน (Ajax Cache ไม่ทำงาน)

2. มันไม่ส่งผลกระทบต่อแอปพลิเคชันปกติ (พื้นฐานที่สุด)

ที่นี่เรามีสองข้อสรุป:

1: แคช AJAX และ HTTP Cache เหมือนกัน

กลไก HTTP และการแคชของเบราว์เซอร์ที่ทันสมัยนั้นแย่กว่าวัตถุ XMLHTTPRequest ของ AJAX มากดังนั้นจึงไม่รู้จักหรือสนใจเกี่ยวกับคำขอ AJAX มันเป็นไปตามกฎการแคช HTTP ทั่วไปและแคชพวกเขาผ่านส่วนหัวการตอบกลับที่ส่งคืนโดยเซิร์ฟเวอร์

หากคุณมีความเข้าใจในแคช HTTP อยู่แล้วคุณสามารถใช้ความรู้ของแคช HTTP เพื่อทำความเข้าใจแคช AJAX ความแตกต่างเพียงอย่างเดียวคือวิธีการตั้งค่าส่วนหัวการตอบสนองจะแตกต่างจากไฟล์ธรรมดา

ส่วนหัวการตอบกลับต่อไปนี้สามารถทำให้อาแจ็กซ์แคชได้:

หมดอายุ: รายการนี้ควรตั้งค่าเป็นจุดเวลาที่เหมาะสมในอนาคต การตั้งค่าจุดเวลาขึ้นอยู่กับความถี่ของการเปลี่ยนแปลงเนื้อหา ตัวอย่างเช่นหากปริมาณสินค้าคงคลังที่ร้องขอค่าของการหมดอายุอาจเป็น 10 วินาทีในภายหลัง หากภาพถ่ายที่ร้องขอค่าของการหมดอายุอาจยาวนานขึ้นเนื่องจากจะไม่เปลี่ยนแปลงบ่อยครั้ง ส่วนหัวที่หมดอายุจะช่วยให้เบราว์เซอร์สามารถนำข้อมูลแคชในท้องถิ่นกลับมาใช้ใหม่ได้เป็นระยะเวลาหนึ่งดังนั้นจึงหลีกเลี่ยงการโต้ตอบที่ไม่จำเป็นกับข้อมูลเซิร์ฟเวอร์

ล่าสุดแก้ไข: การตั้งค่ารายการนี้เป็นตัวเลือกที่ดี เบราว์เซอร์จะใช้หากได้รับการดัดแปลงในส่วนหัวคำขอเพื่อตรวจสอบเนื้อหาแคชท้องถิ่นเมื่อส่งคำขอ GET แบบมีเงื่อนไข หากข้อมูลไม่จำเป็นต้องได้รับการอัปเดตเซิร์ฟเวอร์จะส่งคืนสถานะการตอบกลับ 304

Cache-Control: ในกรณีที่มีสถานการณ์ที่เหมาะสมค่านี้ควรถูกตั้งค่าให้เป็นสาธารณะเพื่อให้สามารถบันทึกและแชร์พร็อกซีระดับกลางทั้งหมดและแคชทั้งหมดกับผู้ใช้รายอื่น ใน Firefox ยังรองรับแคชสำหรับคำขอ HTTPS

แน่นอนถ้าคุณใช้วิธีการโพสต์เพื่อส่ง Ajax มันไม่สามารถแคชได้เนื่องจากคำขอโพสต์จะไม่ถูกแคช หากคำขอ AJAX ของคุณจะมีผลกระทบอื่น ๆ (เช่นการโอนระหว่างบัญชีธนาคาร) โปรดใช้คำขอโพสต์

เราตั้งค่าการสาธิต (การสาธิตนี้ไม่สามารถดูได้อีกต่อไป (□) ノ) เพื่อชี้แจงว่าส่วนหัวเหล่านี้ทำงานอย่างไร ใน HTTPWATCH คุณจะเห็นว่าเราตั้งค่าส่วนหัวการตอบกลับสามข้อด้านบนในข้อมูลส่วนหัวการตอบกลับ

หากคุณคลิกปุ่ม 'Ajax Update' เป็นประจำเวลาการเปลี่ยนแปลงมักจะเป็นทุกนาที เพราะส่วนหัวการตอบกลับที่หมดอายุจะถูกตั้งค่าเป็นนาทีถัดไป ในภาพหน้าจอด้านล่างคุณจะเห็น: เมื่อคุณคลิกปุ่มอัปเดตซ้ำ ๆ คำขอ AJAX จะอ่านแคชท้องถิ่นของเบราว์เซอร์โดยไม่ต้องสร้างกิจกรรมเครือข่าย (ค่าของแถบการส่งและถ่ายโอนคือ 0)

คำขอ AJAX ที่ส่งโดยคลิกล่าสุดที่ 1: 06.531 การส่งข้อมูลเครือข่ายที่สร้างขึ้นเนื่องจากข้อมูลแคชเกินกว่าหนึ่งนาที เซิร์ฟเวอร์ส่งคืนสถานะการตอบกลับ 200 ครั้งเพื่อระบุว่าได้รับสำเนาข้อมูลใหม่

เดาการสาธิตนี้ควรเป็นปุ่มรับเวลาปัจจุบันทุกครั้งที่คุณคลิกจากนั้นกลับไปที่หน้าปัจจุบัน

2: IE เบราว์เซอร์จะไม่รีเฟรชเนื้อหาที่ได้รับผ่าน AJAX ก่อนที่เวลาจะหมดอายุ

บางครั้ง AJAX ใช้เพื่อเติมเต็มบางส่วนของหน้า (เช่นรายการราคา) เมื่อโหลดหน้าเว็บ มันไม่ได้ถูกเรียกใช้โดยเหตุการณ์ของผู้ใช้ (เช่นคลิกปุ่ม) แต่จะถูกส่งผ่าน JavaScript เมื่อโหลดหน้าเว็บ ราวกับว่าคำขอ AJAX นั้นเหมือนกับทรัพยากรที่ฝังตัว (เช่น JS และ CSS)

หากคุณพัฒนาหน้าดังกล่าวเมื่อรีเฟรชคุณอาจต้องการอัปเดตเนื้อหาคำขอ AJAX แบบฝังตัว สำหรับทรัพยากรที่ฝังตัว (ไฟล์ CSS รูปภาพ ฯลฯ ) เบราว์เซอร์จะส่งคำขอประเภทต่าง ๆ ต่อไปนี้โดยอัตโนมัติว่าผู้ใช้รีเฟรชเป็น F5 (รีเฟรช) หรือ CTRL+F5 (Force Refresh):

1.F5 (รีเฟรช): หากเนื้อหาคำขอมีส่วนหัวการตอบกลับที่แก้ไขล่าสุดเบราว์เซอร์จะส่งคำขออัปเดตแบบมีเงื่อนไข มันใช้ส่วนหัวคำขอ IF-Modified-Snice สำหรับการเปรียบเทียบเพื่อให้เซิร์ฟเวอร์สามารถส่งคืนสถานะ 304 เพื่อหลีกเลี่ยงการส่งข้อมูลที่ไม่จำเป็น

2.CTRL+F5 (Force Refresh): บอกเบราว์เซอร์ให้ส่งคำขออัปเดตที่ไม่มีเงื่อนไขและการควบคุมแคชของส่วนหัวคำขอถูกตั้งค่าเป็น 'No-cache' สิ่งนี้จะบอกพร็อกซีและแคชกลางทั้งหมด: เบราว์เซอร์ต้องได้รับเวอร์ชันล่าสุดไม่ว่าจะถูกแคชหรือไม่

Firefox เผยแพร่วิธีการรีเฟรชนี้ไปยังคำขอ AJAX ที่ส่งเมื่อโหลดหน้าเว็บและปฏิบัติต่อคำขอ AJAX เหล่านี้เป็นทรัพยากรที่ฝังตัว ด้านล่างเป็นภาพหน้าจอของ HTTPWATCH ภายใต้ Firefox โดยแสดงผลของคำขอ AJAX เมื่อการรีเฟรช (F5) หน้า:

Firefox ทำให้มั่นใจได้ว่าคำขอที่ริเริ่มโดย Ajax นั้นมีเงื่อนไข ในตัวอย่างนี้หากข้อมูลถูกแคชน้อยกว่า 10 วินาทีเซิร์ฟเวอร์จะส่งคืน 304 ถ้าเกิน 10 วินาทีเซิร์ฟเวอร์จะส่งคืน 200 และส่งข้อมูลส่งกลับ

ใน IE คำขอ AJAX ที่เริ่มต้นเมื่อโหลดหน้าถูกพิจารณาว่าไม่มีส่วนเกี่ยวข้องกับการรีเฟรชส่วนอื่น ๆ ของหน้าและจะไม่ได้รับผลกระทบจากวิธีการรีเฟรชของผู้ใช้ หากข้อมูล AJAX ที่แคชยังไม่หมดอายุจะไม่มีการร้องขอรับที่ส่งไปยังเซิร์ฟเวอร์ มันจะอ่านข้อมูลโดยตรงจากแคชและจาก httpwatch มันเป็นผลลัพธ์ (แคช) รูปต่อไปนี้คือการกด F5 เพื่อรีเฟรชหากแคชไม่หมดอายุภายใต้ IE:

แม้ว่าจะถูกบังคับให้รีเฟรชผ่าน Ctrl+F5 ข้อมูลที่ได้จาก AJAX จะถูกอ่านจากแคช:

ซึ่งหมายความว่าสิ่งใดก็ตามที่ได้รับผ่าน AJAX จะไม่ได้รับการอัปเดตภายใต้ IE หากยังไม่หมดอายุ - แม้ว่าคุณจะใช้ Ctrl+F5 เพื่อบังคับให้รีเฟรช วิธีเดียวที่จะทำให้แน่ใจว่าคุณได้รับข้อมูลล่าสุดคือการล้างแคชด้วยตนเอง คุณสามารถใช้แถบเครื่องมือ httpwatch:

โปรดทราบว่าผลลัพธ์แคชและผลลัพธ์ 304 นั้นแตกต่างกัน แคชจริง ๆ แล้ว 200 (แคช), 304 หมายถึง 304. แคชจริง ๆ ไม่ได้ส่งคำขอไปยังเซิร์ฟเวอร์ คุณสามารถเห็นได้จาก Chrome ว่าเวลาคือ 0 และการตอบสนองก็ว่างเปล่า อย่างไรก็ตาม 304 นั้นแตกต่างกัน

คำขอ 304 เป็นคำขอตามเงื่อนไขที่ริเริ่มโดยเบราว์เซอร์ คำขอนี้มีส่วนหัวคำขอ if-modified-snice หากไฟล์ยังไม่ได้รับการแก้ไขหลังจากเบราว์เซอร์ส่งเวลาฝั่งเซิร์ฟเวอร์จะส่งคืนสถานะ 304 และบอกให้เบราว์เซอร์ใช้เนื้อหาแคชท้องถิ่น มันไม่เร็วเท่ากับคำขอถูกส่งไปยังฝั่งเซิร์ฟเวอร์ แต่ฝั่งเซิร์ฟเวอร์ไม่ส่งข้อมูล

คุณสามารถตรวจสอบโฮมเพจของ Taobao ซึ่งมีทั้ง 200 (แคช) และ 304 คุณสามารถตรวจสอบความแตกต่างของพวกเขา

สรุป:

เราทุกคนรู้ว่าเหตุผลหลักว่าทำไม AJAX สามารถเพิ่มความเร็วในการโหลดหน้าเว็บคือมันช่วยลดการโหลดข้อมูลที่ซ้ำกันผ่าน AJAX และบรรลุการได้มาตามความต้องการอย่างแท้จริง เนื่องจากเป็นกรณีนี้เมื่อเราเขียนโปรแกรม AJAX เราอาจส่งไปทางทิศตะวันตกและแคชอีกครั้งบนไคลเอนต์เพื่อปรับปรุงความเร็วในการโหลดข้อมูล นั่นคือแคชข้อมูลในหน่วยความจำเบราว์เซอร์ในขณะที่โหลดข้อมูล เมื่อโหลดข้อมูลตราบใดที่หน้าไม่ได้รีเฟรชข้อมูลจะถูกแคชในหน่วยความจำตลอดไป เมื่อผู้ใช้ดูข้อมูลอีกครั้งไม่จำเป็นต้องได้รับข้อมูลจากเซิร์ฟเวอร์ซึ่งจะช่วยลดภาระของเซิร์ฟเวอร์และปรับปรุงประสบการณ์ของผู้ใช้อย่างมาก