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

Katie Hempenius

บทนำ

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

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

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

แรงจูงใจ

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

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

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

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

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

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

การใช้งาน

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

1. NoStatePrefetch ได้รับการเรียกให้แสดง

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

2. ระบบจะสร้างโปรแกรมแสดงผลใหม่สำหรับ NoState Prefetch

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

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

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

4. ระบบจะดึงข้อมูลย่อยที่ดึงข้อมูลด้วยลําดับความสําคัญสุทธิ "ว่าง"

   ลำดับความสำคัญสุทธิ "ไม่มีการใช้งาน" คือลำดับความสำคัญสุทธิต่ำสุดที่เป็นไปได้ใน Chrome

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

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

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

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

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

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

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

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

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

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

ผลกระทบต่อ Web Analytics

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

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

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

ดูเลย

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

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

คุณสามารถใช้ข้อมูลภายในของ Chrome เพื่อดูวิธีใช้ NoStatePrefetch

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

หากต้องการดูสถิติเกี่ยวกับการใช้งาน NoStatePrefetch ให้ไปที่ chrome://histograms แล้วค้นหา "NoStatePrefetch" โดย NoStatePrefetch มีฮิสโตแกรม 3 แบบที่แตกต่างกัน 1 แบบสำหรับแต่ละ Use Case ของ NoStatePrefetch ดังนี้

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