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

Katie Hempenius
Katie Hempenius
X

ช่วงอินโทร

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

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

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

แรงจูงใจ

แรงจูงใจหลักในการแนะนำ NoState Prefetch มีอยู่ 2 ประการ ได้แก่

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

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

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

ส่งเสริมการรองรับฟีเจอร์ใหม่ของแพลตฟอร์มเว็บ

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

การใช้งาน

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

  1. มีการทริกเกอร์ NoStatePrefetch

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

  2. มีการสร้างตัวแสดงผลใหม่สำหรับ NoState Prefetch

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

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

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

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

    ลำดับความสำคัญสุทธิ "IDLE" คือลำดับความสำคัญสุทธิที่ต่ำที่สุดใน Chrome

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูเลย

NoStatePrefetch จัดส่งในเดือนธันวาคม 2017 ใน Chrome 63 ปัจจุบันมักใช้เพื่อ:

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

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

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

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

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