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 โดยแสดงระยะเวลาที่ผ่านไปในระหว่างการโหลดครั้งแรกและเวลาที่ส่งคำขอ API ของ Wikipedia
คำขอที่สร้างขึ้นหลังจากเวลาผ่านไประยะหนึ่งหลังจากการนำทางจะจัดอยู่ในหมวดหมู่ "คำขอรันไทม์" ซึ่งต่างจากคำขอชุดแรกที่ใช้เพื่อแสดงหน้าเว็บเมื่อคุณไปยังหน้าเว็บนั้นเป็นครั้งแรก
สรุปสิ่งต่างๆ
หลังจากดูขั้นตอนต่างๆ ใน Codelab นี้แล้ว คุณจะคุ้นเคยกับเครื่องมือที่ใช้วิเคราะห์การโหลดเว็บแอปพลิเคชันทั้งหมด
แผงเครือข่ายช่วยให้คุณตอบคําถามที่ว่าอะไรที่กําลังโหลดผ่าน URL ในคอลัมน์ชื่อและข้อมูลในคอลัมน์ประเภท รวมถึงเวลาที่โหลดผ่านการแสดง Waterfall
นอกจากนี้ คุณจะเห็นว่าคำขอจากหน้าเว็บสามารถ (มัก) จัดกลุ่มเป็น 1 ใน 2 หมวดหมู่ต่อไปนี้
- คำขอเริ่มต้นซึ่งดำเนินการทันทีหลังจากไปยังหน้าใหม่สำหรับ HTML, JavaScript, CSS (และเนื้อหาที่เป็นไปได้อื่นๆ)
- คำขอรันไทม์ซึ่งเกิดจากการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งมักจะเริ่มต้นจากคำขอที่ส่งไปยัง API จากนั้นเปลี่ยนเป็นคำขอติดตามผลหลายรายการตามข้อมูล API ที่ดึงมา