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