Codelab นี้จะแนะนำขั้นตอนการตีความการจราจรของข้อมูลในเครือข่ายทั้งหมดสำหรับแอปพลิเคชันตัวอย่างที่ค่อนข้างซับซ้อน เมื่อจบแบบฝึกหัดนี้ คุณจะมีทักษะที่จำเป็นในการระบุสิ่งที่เว็บแอปพลิเคชันของคุณกำลังโหลด และเวลาที่เว็บแอปพลิเคชันส่งคำขอแต่ละรายการ
ไปที่แผงเครือข่าย
ไปที่แผงเครือข่ายเพื่อดูการจราจรของข้อมูลในเครือข่ายสำหรับแอปพลิเคชันสาธิต
- กด `Control+Shift+J` (หรือ `Command+Option+J` บน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บเครือข่าย
- โหลดหน้าเว็บซ้ำเพื่อดูการจราจรของข้อมูลในเครือข่าย
แผงเครือข่ายจะแสดงชิ้นงานทั้งหมดที่โหลดเนื่องจากการนําทางเริ่มต้นของคุณ ดังนี้
วิธีตีความรายการ
การจราจรของข้อมูลในเครือข่ายที่บันทึกไว้แต่ละแถวแสดงถึงคู่คำขอและการตอบกลับ 1 คู่
แถวแรกซึ่งมีประเภท document คือคำขอการนำทางเริ่มต้นสำหรับ HTML ของเว็บแอป ซึ่งเป็นแหล่งที่มาของ Waterfall โดยคำขอชิ้นงานเพิ่มเติมที่ตามมาแต่ละรายการ (เรียกว่าทรัพยากรย่อยของเอกสารหลัก) จะมาจากแหล่งที่มาเดิมนี้
แถวที่ 2 และ 3 ซึ่งแสดงทรัพยากรย่อย CSS stylesheet และ script ที่กำลังโหลดเป็นคำขอที่ขึ้นอยู่กับเอกสารหลักซึ่งเป็นผู้เริ่มต้น
เมื่อดูเวลาที่ส่งคำขอเหล่านั้น แผนภาพ Waterfall จะแสดงให้เห็นว่าคำขอเหล่านั้นจะไม่เริ่มจนกว่าจะถึงช่วงท้ายๆ ของกระบวนการตอบสนองต่อคำขอการนำทาง
เมื่อรวมกันแล้ว คำขอเอกสาร HTML, CSS และ JavaScript จำเป็นต่อการแสดงหน้าเว็บแบบเต็มในระหว่างการไปยังส่วนต่างๆ ครั้งแรก
สร้างคำขอรันไทม์เพิ่มเติม
เมื่อแผงเครือข่ายยังคงเปิดอยู่และบันทึกอยู่ ก็ถึงเวลาจำลองสิ่งที่พบได้ทั่วไปสำหรับเว็บแอปจำนวนมาก นั่นคือคำขอ API เพิ่มเติมที่ใช้เพื่อเพิ่มข้อมูลลงในหน้าเว็บหลังจากที่การนำทางเริ่มต้นเสร็จสมบูรณ์แล้ว
เรียกใช้คำขอเพิ่มเติมเหล่านี้โดยคลิกค้นหาฉันในแอป แล้วคลิกอนุญาตในป๊อปอัปที่ปรากฏขึ้น การดำเนินการนี้จะอนุญาตให้เว็บไซต์เข้าถึงตำแหน่งปัจจุบันของคุณ
เมื่อเว็บแอปมีตำแหน่งที่จะทำงานด้วยแล้ว การคลิกค้นหารายการ Wikipedia ที่อยู่ใกล้เคียงจะส่งผลให้มีคำขอเครือข่ายเพิ่มเติมหลายรายการ คุณจะเห็นข้อความลักษณะนี้
ตีความรายการใหม่
เช่นเดียวกับก่อนหน้านี้ การจราจรของข้อมูลในเครือข่ายที่บันทึกไว้แต่ละแถวจะแสดงถึงคู่คำขอและการตอบกลับ 1 คู่
แถวแรกของรายการใหม่แสดงคำขอที่มีประเภทเป็น fetch ซึ่งสอดคล้องกับวิธีที่เว็บแอปขอข้อมูลจาก Wikipedia API
แถวต่อไปนี้ทั้งหมดเป็นรูปภาพ (png หรือ jpeg) ที่เชื่อมโยงกับรายการ Wikipedia แม้ว่าจะดูจากภาพหน้าจอได้ยากสักหน่อย แต่รายการในคอลัมน์ Waterfall จะไหลมาจากคำตอบจาก API โดยตรง
สำหรับคำขอเพิ่มเติมทั้งหมดนี้ เวลาจะแตกต่างกันไปตามระยะเวลาที่คุณเปิดหน้าเว็บไว้ก่อนที่จะคลิกค้นหารายการ Wikipedia ที่อยู่ใกล้เคียง สิ่งที่สำคัญที่สุดคือเวลาที่ตัดการเชื่อมต่อจากคำขอการนำทางเริ่มต้น คุณจะเห็นช่องว่างขนาดใหญ่ที่ปรากฏในจอแสดงผล Waterfall ซึ่งแสดงระยะเวลาที่ผ่านไประหว่างการโหลดครั้งแรกและเมื่อมีการส่งคำขอ Wikipedia API
คำขอที่เกิดขึ้นหลังจากช่วงเวลาหนึ่งหลังจากการนำทางจะจัดอยู่ในหมวดหมู่ "คำขอรันไทม์" ซึ่งต่างจากชุดคำขอเริ่มต้นที่ใช้เพื่อแสดงหน้าเว็บเมื่อคุณไปยังหน้าเว็บนั้นเป็นครั้งแรก
สรุปข้อมูล
เมื่อทำตามขั้นตอนใน Codelab นี้แล้ว คุณจะคุ้นเคยกับเครื่องมือที่ใช้ในการวิเคราะห์สิ่งที่เว็บแอปพลิเคชันใดๆ โหลด
แผงเครือข่ายช่วยให้คุณตอบคำถามได้ว่าอะไรกำลังโหลดผ่าน URL ในคอลัมน์ชื่อและข้อมูลในคอลัมน์ประเภท รวมถึงเมื่อใดที่กำลังโหลดผ่านการแสดงผลแบบ Waterfall
นอกจากนี้ คุณยังได้เห็นว่าคำขอที่หน้าเว็บสร้างขึ้น (โดยปกติ) สามารถจัดกลุ่มเป็นหมวดหมู่ใดหมวดหมู่หนึ่งจาก 2 หมวดหมู่ต่อไปนี้
- คำขอเริ่มต้นที่ส่งทันทีหลังจากไปยังหน้าใหม่สำหรับ HTML, JavaScript, CSS (และอาจรวมถึงเนื้อหาอื่นๆ)
- คำขอรันไทม์ที่เกิดขึ้นจากการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งมักจะเริ่มต้นด้วยคำขอไปยัง API จากนั้นจึงส่งคำขอติดตามผลหลายรายการตามข้อมูล API ที่ดึงมา