ขอแนะนำการดึงข้อมูล NoState

Katie Hempenius

เผยแพร่: 20 กรกฎาคม 2018

บทนำ

การดึงข้อมูลล่วงหน้าแบบไม่มีสถานะเป็นกลไกใหม่ใน Chrome ซึ่งเป็นทางเลือกแทนกระบวนการแสดงผลล่วงหน้าที่เลิกใช้งานแล้ว ซึ่งใช้เพื่อขับเคลื่อนฟีเจอร์ต่างๆ เช่น <link rel="prerender"> เช่นเดียวกับการแสดงผลล่วงหน้า การดึงข้อมูลล่วงหน้าจะดึงข้อมูลทรัพยากรล่วงหน้า แต่ต่างจากการแสดงผลล่วงหน้าตรงที่จะไม่เรียกใช้ JavaScript หรือแสดงผลส่วนใดส่วนหนึ่งของหน้าล่วงหน้า เป้าหมายของ NoState Prefetch คือการใช้หน่วยความจำน้อยกว่าการแสดงผลล่วงหน้า ในขณะที่ยังคงลดเวลาในการโหลดหน้าเว็บ

การดึงข้อมูลล่วงหน้าแบบไม่มีสถานะไม่ใช่ API แต่เป็นกลไกที่ Chrome ใช้เพื่อติดตั้งใช้งาน API และฟีเจอร์ต่างๆ ทั้ง Resource Hints API และ การดึงข้อมูลล่วงหน้าของหน้าเว็บโดยแถบที่อยู่ของ Chrome ใช้การดึงข้อมูลล่วงหน้าแบบไม่เก็บสถานะ หากคุณใช้ Chrome 63 ขึ้นไป เบราว์เซอร์จะใช้การดึงข้อมูลล่วงหน้าแบบไม่มีสถานะสำหรับฟีเจอร์ต่างๆ เช่น <link rel="prerender"> อยู่แล้ว

บทความนี้อธิบายวิธีการทำงานของ NoStatePrefetch แรงจูงใจในการเปิดตัว และ วิธีการใช้ฮิสโตแกรมของ Chrome เพื่อดูสถิติเกี่ยวกับการใช้งาน

แรงจูงใจ

แรงจูงใจหลัก 2 ประการในการเปิดตัวการดึงข้อมูลล่วงหน้าแบบไม่มีสถานะมีดังนี้

ลดการใช้หน่วยความจำ

การดึงข้อมูลล่วงหน้าแบบไม่มีสถานะใช้หน่วยความจำเพียงประมาณ 45 MiB การดูแลสแกนเนอร์การโหลดล่วงหน้าเป็นค่าใช้จ่ายด้านหน่วยความจำหลักสำหรับ NoState Prefetch และค่าใช้จ่ายนี้จะค่อนข้างคงที่ในกรณีการใช้งานต่างๆ การเพิ่มขนาดหรือปริมาณการดึงข้อมูลจะไม่มีผลอย่างมีนัยสำคัญต่อ ปริมาณหน่วยความจำที่ NoState Prefetch ใช้

ในทางตรงกันข้าม การแสดงผลล่วงหน้ามักใช้หน่วยความจำ 100 MiB และการใช้หน่วยความจำจะจำกัดไว้ที่ 150 MiB การใช้หน่วยความจำสูงเช่นนี้จึงไม่เหมาะสำหรับอุปกรณ์ระดับล่าง (เช่น RAM น้อยกว่าหรือเท่ากับ 512 MB) ด้วยเหตุนี้ Chrome จึงไม่ทำการแสดงผลล่วงหน้าในอุปกรณ์ระดับล่าง แต่จะเชื่อมต่อล่วงหน้าแทน

อำนวยความสะดวกในการรองรับฟีเจอร์ใหม่ของแพลตฟอร์มเว็บ

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

การใช้งาน

ขั้นตอนต่อไปนี้จะอธิบายวิธีการทำงานของ NoState Prefetch

1. มีการเรียกใช้ NoStatePrefetch

   คำใบ้ทรัพยากรเพื่อการแสดงผลล่วงหน้า (เช่น <link rel="prerender">) และฟีเจอร์บางอย่างของ Chrome จะทริกเกอร์การดึงข้อมูลล่วงหน้าแบบไม่มีสถานะได้ก็ต่อเมื่อเป็นไปตามเงื่อนไข 2 ข้อต่อไปนี้ ก) ผู้ใช้ไม่ได้ใช้อุปกรณ์ระดับล่าง และ ข) ผู้ใช้ไม่ได้ใช้เครือข่ายมือถือ

2. สร้างตัวแสดงผลใหม่เฉพาะสำหรับการดึงข้อมูลล่วงหน้าแบบไม่มีสถานะ

   ใน Chrome โปรแกรมแสดงผล คือกระบวนการที่มีหน้าที่รับผิดชอบในการนำเอกสาร HTML มาแยกวิเคราะห์ สร้างโครงสร้างการแสดงผล และวาดผลลัพธ์ลงบนหน้าจอ แต่ละแท็บใน Chrome รวมถึงแต่ละกระบวนการ NoState Prefetch จะมีตัวแสดงผลของตัวเองเพื่อแยกการทำงาน ซึ่งจะช่วยลดผลกระทบจากสิ่งผิดปกติ (เช่น แท็บขัดข้อง) รวมถึงป้องกันไม่ให้โค้ดที่เป็นอันตรายเข้าถึงแท็บอื่นๆ หรือส่วนอื่นๆ ของระบบ

3. ระบบจะดึงข้อมูลทรัพยากรที่โหลดด้วยการดึงข้อมูลล่วงหน้าแบบไม่มีสถานะ จากนั้น HTMLPreloadScanner จะสแกนทรัพยากรนี้เพื่อค้นหาทรัพยากรย่อยที่ต้องดึงข้อมูล หากทรัพยากรหลักหรือทรัพยากรย่อยใดก็ตามมี Service Worker ที่ลงทะเบียนไว้ คำขอเหล่านี้จะผ่าน Service Worker ที่เหมาะสม

   การดึงข้อมูลล่วงหน้าแบบไม่เก็บสถานะรองรับเฉพาะเมธอด HTTP GET และจะไม่ดึงข้อมูลทรัพยากรย่อยที่ต้องใช้เมธอด HTTP อื่น นอกจากนี้ ระบบจะไม่ดึงข้อมูลทรัพยากรที่ ต้องมีการดำเนินการจากผู้ใช้ (เช่น ป๊อปอัปการให้สิทธิ์ ใบรับรองไคลเอ็นต์ SSL หรือการลบล้างด้วยตนเอง)

4. ระบบจะดึงข้อมูลทรัพยากรย่อยที่ดึงข้อมูลด้วยลำดับความสำคัญของเครือข่ายเป็น "IDLE"

   ลำดับความสำคัญของเครือข่าย "IDLE" คือลำดับความสำคัญของเครือข่ายที่ต่ำที่สุดเท่าที่จะเป็นไปได้ใน Chrome

5. ทรัพยากรทั้งหมดที่ดึงข้อมูลโดยการดึงข้อมูลล่วงหน้าแบบไม่มีสถานะจะได้รับการแคชตามส่วนหัวแคช

   การดึงข้อมูลล่วงหน้าแบบไม่มีสถานะจะแคชทรัพยากรทั้งหมด ยกเว้นทรัพยากรที่มีส่วนหัว no-store Cache-Control ระบบจะตรวจสอบทรัพยากรอีกครั้งก่อนใช้งานหากมีVaryส่วนหัวของการตอบกลับ no-cacheส่วนหัว Cache-Control หรือหากทรัพยากรมีอายุมากกว่า 5 นาที

6. ระบบจะปิดโปรแกรมแสดงผลหลังจากโหลดทรัพยากรย่อยทั้งหมดแล้ว

   หากทรัพยากรย่อยหมดเวลา ระบบจะปิดการประมวลผลการแสดงผลหลังจากผ่านไป 30 วินาที

7. เบราว์เซอร์จะไม่ทำการแก้ไขสถานะใดๆ นอกเหนือจากการอัปเดตร้านค้าคุกกี้และ แคช DNS ในเครื่อง เราต้องระบุเรื่องนี้เนื่องจากนี่คือ "NoState" ใน "NoState Prefetch"

   ในขั้นตอนนี้ของกระบวนการโหลดหน้าเว็บ "ปกติ" เบราว์เซอร์อาจทำสิ่งต่างๆ ที่จะแก้ไขสถานะของเบราว์เซอร์ เช่น การเรียกใช้ JavaScript, การเปลี่ยนแปลง sessionStorage หรือ localStorage, การเล่นเพลงหรือวิดีโอ, การใช้ History API หรือการแจ้งผู้ใช้ การแก้ไขสถานะเพียงอย่างเดียวที่เกิดขึ้นในการดึงข้อมูลล่วงหน้าแบบไม่มีสถานะคือการอัปเดตแคช DNS เมื่อได้รับการตอบกลับ และการอัปเดตร้านค้าคุกกี้หากการตอบกลับมีส่วนหัว Set-Cookie

8. เมื่อจำเป็นต้องใช้ทรัพยากร ระบบจะโหลดทรัพยากรนั้นลงในหน้าต่างเบราว์เซอร์

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

   หากหน้าเว็บมี Service Worker การโหลดหน้าเว็บนี้จะผ่าน Service Worker อีกครั้ง

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

ผลกระทบต่อการวิเคราะห์เว็บ

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

สคริปต์วิเคราะห์ฝั่งไคลเอ็นต์จะลงทะเบียนการดูหน้าเว็บเมื่อหน้าเว็บแสดงต่อผู้ใช้ สคริปต์เหล่านี้อาศัยการเรียกใช้ JavaScript และ NoState Prefetch ไม่ได้เรียกใช้ JavaScript ใดๆ

เครื่องมือวิเคราะห์ฝั่งเซิร์ฟเวอร์จะลงทะเบียนเมตริกเมื่อมีการจัดการคำขอ สำหรับทรัพยากรที่โหลดผ่านการดึงข้อมูลล่วงหน้าแบบไม่มีสถานะ อาจมีช่วงเวลาที่แตกต่างกันอย่างมากระหว่างเวลาที่ระบบจัดการคำขอและเวลาที่ไคลเอ็นต์ใช้การตอบกลับจริง (หากมีการใช้) ตั้งแต่ Chrome 69 เป็นต้นมา NoState Prefetch จะเพิ่มส่วนหัว Purpose: Prefetch ลงในคำขอทั้งหมดเพื่อให้แยกความแตกต่างจากการท่องเว็บปกติได้

ดูเลย

NoStatePrefetch เปิดตัวในเดือนธันวาคม 2017 ใน Chrome 63 ปัจจุบันใช้เพื่อดำเนินการต่อไปนี้

• ใช้คำใบ้ทรัพยากร prerender
• ดึงข้อมูลผลการค้นหาแรกใน Google Search
• ดึงข้อมูลหน้าเว็บที่แถบที่อยู่ของ Chrome คาดการณ์ว่าคุณน่าจะเข้าชมเป็นหน้าถัดไป

คุณใช้ Chrome Internals เพื่อดูวิธีที่คุณใช้ NoStatePrefetch ได้

หากต้องการดูรายการเว็บไซต์ที่โหลดด้วยการดึงข้อมูลล่วงหน้าแบบไม่มีสถานะ ให้ไปที่ chrome://net-internals/#prerender

หากต้องการดูสถิติการใช้งานการดึงข้อมูลล่วงหน้าแบบไม่เก็บสถานะ ให้ไปที่ chrome://histograms แล้วค้นหา “NoStatePrefetch” การดึงข้อมูลล่วงหน้าแบบไม่เก็บสถานะมีฮิสโทแกรม 3 แบบ ซึ่งแต่ละแบบใช้สำหรับกรณีการใช้งาน การดึงข้อมูลล่วงหน้าแบบไม่เก็บสถานะที่แตกต่างกัน

• "NoStatePrefetch" (สถิติสำหรับการใช้งานตามคำใบ้ทรัพยากรที่แสดงตัวอย่างล่วงหน้า)
• "gws_NoStatePrefetch" (สถิติการใช้งานโดยหน้าผลการค้นหาของ Google)
• "omnibox_NoStatePrefetch" (สถิติการใช้งานโดยแถบที่อยู่ของ Chrome)