แผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์จะช่วยระบุทรัพยากรที่โหลดและเวลาที่โหลด แต่ละแถวในแผงเครือข่ายจะสอดคล้องกับ URL เฉพาะที่เว็บแอปโหลดไว้
ทราบว่าคุณโหลดอะไร
การหากลยุทธ์การแคชที่เหมาะสมสำหรับเว็บแอปพลิเคชันนั้นคุณต้องเข้าใจสิ่งที่กำลังโหลด เมื่อสร้างเว็บแอปพลิเคชันที่เชื่อถือได้ เครือข่ายอาจตกอยู่ภายใต้อำนาจมืดทุกประเภท คุณต้องเข้าใจช่องโหว่ของเครือข่ายหากต้องการรับมือกับช่องโหว่ของเครือข่ายในแอป
คุณอาจคิดว่าคุณมีไอเดียที่ดีอยู่แล้วว่าเว็บแอปพลิเคชันโหลดอะไร หากคุณใช้แค่ไฟล์ HTML, JavaScript, CSS และรูปภาพกระจัดกระจายจำนวนเล็กน้อย ก็อาจเป็นความจริงได้ แต่เมื่อคุณเริ่มผสมทรัพยากรของบุคคลที่สามที่โฮสต์บนเครือข่ายส่งเนื้อหา โดยใช้คำขอ API แบบไดนามิกและการตอบกลับที่เซิร์ฟเวอร์สร้างขึ้น ภาพก็จะหมิ่นเหม่ลงอย่างรวดเร็ว
กลยุทธ์การแคชที่เหมาะกับไฟล์ CSS ขนาดเล็ก 2-3 ไฟล์อาจไม่เหมาะกับรูปภาพขนาดใหญ่หลายร้อยภาพ
ทราบเมื่อโหลด
อีกส่วนหนึ่งของภาพการโหลดโดยรวมคือเมื่อโหลดทุกอย่าง
คำขอบางอย่างที่ส่งไปยังเครือข่าย เช่น คำขอการนำทางสำหรับ HTML เริ่มต้นจะมีการดำเนินการอย่างไม่มีเงื่อนไขทันทีที่ผู้ใช้เข้าชม URL หนึ่งๆ HTML ดังกล่าวอาจมีการอ้างอิงแบบฮาร์ดโค้ดไปยังไฟล์ CSS หรือ JavaScript ที่สำคัญซึ่งจะต้องโหลดเพื่อแสดงหน้าเว็บแบบอินเทอร์แอกทีฟ คำขอเหล่านี้ทั้งหมดจะอยู่ในเส้นทางการโหลดที่สำคัญของคุณ คุณจะต้องแคชเนื้อหาเหล่านี้ ในเชิงรุกเพื่อให้โหลดได้อย่างรวดเร็ว
ทรัพยากรอื่นๆ เช่น คำขอ API หรือเนื้อหาที่โหลดแบบ Lazy Loading อาจไม่เริ่มโหลดจนกว่าการโหลดครั้งแรกทั้งหมดจะเสร็จสมบูรณ์ หากคำขอเหล่านั้นเกิดขึ้นหลังจากลำดับการโต้ตอบของผู้ใช้หนึ่งๆ เท่านั้น ก็อาจมีการขอชุดทรัพยากรที่แตกต่างกันโดยสิ้นเชิงในการเข้าชมหน้าเดียวกันหลายครั้ง กลยุทธ์การแคชที่เข้มงวดน้อยกว่ามักเหมาะสำหรับเนื้อหาที่คุณได้ระบุว่าอยู่นอกเส้นทางการโหลดที่สำคัญ
คอลัมน์ "ชื่อ" และ "ประเภท" จะช่วยใน
คอลัมน์ชื่อและประเภทจะช่วยให้เห็นภาพรวมที่ชัดเจนของสิ่งที่กำลังโหลด คำตอบว่า "โหลดอะไร" ในตัวอย่างด้านบนเป็น URL ทั้งหมด 4 รายการ โดยแต่ละ URL จะแสดงประเภทเนื้อหาที่ไม่ซ้ำกัน
ชื่อจะแสดง URL ที่เบราว์เซอร์ของคุณขอ แต่คุณจะเห็นเฉพาะส่วนสุดท้ายของเส้นทาง URL ที่แสดงอยู่ ตัวอย่างเช่น หากโหลด https://example.com/main.css แล้ว คุณจะเห็นแค่ main.css แสดงอยู่ใต้ "ชื่อ"
อักขระ 2-3 ตัวสุดท้ายของเส้นทาง URL ซึ่งอยู่ต่อจากจุด (เช่น "css") นั้นเรียกว่าส่วนขยายของ URL
โดยทั่วไปแล้ว ส่วนขยายของ URL จะบอกคุณว่ามีคำขอทรัพยากรประเภทใด และแมปกับข้อมูลที่แสดงในคอลัมน์ประเภทโดยตรง ตัวอย่างเช่น v2.html คือเอกสาร และ main.css เป็นสไตล์ชีต
คอลัมน์ Waterfall จะช่วยในเรื่อง
ตรวจสอบคอลัมน์ Waterfall โดยเริ่มที่ด้านบนสุดและเลื่อนลงไปด้านล่าง ความยาวของแท่งกราฟแต่ละแท่งแสดงระยะเวลาทั้งหมดที่ใช้ในการโหลดทรัพยากรแต่ละรายการ คุณจะบอกความแตกต่างระหว่างคำขอที่สร้างขึ้นเพื่อเป็นส่วนหนึ่งของเส้นทางการโหลดวิกฤติกับคำขอที่เริ่มทำงานแบบไดนามิกได้อย่างไรหลังจากที่การโหลดครั้งแรกเสร็จสมบูรณ์
คำขอแรกใน Waterfall จะเป็นคำขอสำหรับเอกสาร HTML เสมอ เช่น v2.html คำขอที่ตามมาทั้งหมดจะมาจากคำขอการนำทางเริ่มต้นนี้ (เช่น น้ำตก) โดยอิงตามรูปภาพ สคริปต์ และสไตล์ที่เอกสาร HTML อ้างอิง
Waterfall จะแสดงว่าทันทีที่ v2.html โหลดเสร็จ คำขอสำหรับเนื้อหาที่อ้างอิง (หรือที่เรียกว่าทรัพยากรย่อย) จะเริ่มขึ้น เบราว์เซอร์จะขอทรัพยากรย่อยหลายรายการพร้อมกันได้ และแสดงด้วยแถบที่ทับซ้อนกันในคอลัมน์ Waterfall สําหรับ main.css และ logo.svg สุดท้าย ดูจากภาพหน้าจอที่ main.js เริ่มโหลดเป็นลำดับสุดท้าย และโหลดจนเสร็จหลังจากที่ URL อีก 3 รายการเสร็จสมบูรณ์แล้วเช่นกัน