เผยแพร่: 23 มกราคม 2026
Chrome จะเปิดตัวช่วงทดลองใช้จากต้นทางใหม่จาก Chrome 144 สำหรับการเพิ่ม prerender until script ลงใน Speculation Rules API ช่วงทดลองใช้จากต้นทางนี้ช่วยให้เว็บไซต์ลองใช้ฟีเจอร์ใหม่กับผู้ใช้จริงได้ โดยมีเป้าหมายเพื่อทดสอบฟีเจอร์ในภาคสนามและให้ความคิดเห็นแก่ทีม Chrome เพื่อช่วยกำหนดรูปแบบของฟีเจอร์และตัดสินใจว่าเราควรเพิ่มฟีเจอร์นี้ลงในแพลตฟอร์มเว็บหรือไม่
ฟีเจอร์นี้มีไว้เพื่อแก้ปัญหาใด
Speculation Rules API ช่วยให้เริ่มการโหลดหน้าเว็บได้ล่วงหน้าก่อนที่ผู้ใช้จะไปยังหน้าเว็บจริง ซึ่งจะช่วยปรับปรุงการโหลดหน้าเว็บในอนาคตได้โดยการทำงานบางอย่างหรือทั้งหมดล่วงหน้า จนถึงตอนนี้ฟีเจอร์นี้อนุญาตให้มีการคาดคะเน 2 ประเภท ได้แก่ การดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า
การดึงข้อมูลล่วงหน้าจะดึงเฉพาะเอกสาร HTML ซึ่งจะช่วยให้ได้รับทรัพยากรแรกที่สำคัญล่วงหน้า ซึ่งจะช่วยเพิ่มประสิทธิภาพเมื่อไปยัง URL โดยจะไม่โหลดทรัพยากรย่อย (เช่น CSS, JavaScript หรือรูปภาพ) และไม่เรียกใช้ JavaScript ดังนั้นเบราว์เซอร์อาจยังคงต้องทำงานอีกมากเมื่อโหลดหน้าเว็บ
แต่การแสดงผลล่วงหน้าทำได้มากกว่านั้น โดยจะดึงข้อมูลทรัพยากรย่อย และเริ่มแสดงหน้าเว็บและเรียกใช้ JavaScript แทบจะเหมือนกับว่ามีการเปิดหน้าเว็บในแท็บเบื้องหลังที่ซ่อนอยู่ เมื่อผู้ใช้คลิกลิงก์ ผู้ใช้จะได้รับการนำทางทันทีหากเบราว์เซอร์ทำงานทั้งหมดที่จำเป็นในการแสดงหน้าเว็บเสร็จแล้ว
การใช้ตัวเลือกการแสดงผลล่วงหน้าอาจช่วยให้ประสิทธิภาพดีขึ้นมาก แต่ก็มีต้นทุนในการติดตั้งใช้งานเพิ่มเติม รวมถึงต้นทุนทรัพยากรเพิ่มเติมด้วย หากไม่พิจารณาอย่างรอบคอบ การดำเนินการนี้อาจทำให้เกิดผลข้างเคียงที่ไม่คาดคิดเมื่อแสดงหน้าเว็บล่วงหน้าอย่างเต็มรูปแบบก่อนที่ผู้ใช้จะไปยังหน้าเว็บนั้นจริงๆ เช่น Analytics อาจทํางานก่อนที่ผู้ใช้จะไปยังส่วนต่างๆ ซึ่งจะทําให้สถิติคลาดเคลื่อน หากผู้ให้บริการ Analytics ไม่ได้คํานึงถึงการคาดการณ์
เว็บไซต์ที่ใช้การแสดงผลล่วงหน้าต้องระมัดระวังไม่แสดงหน้าเว็บที่ล้าสมัยต่อผู้ใช้ เช่น หากคุณคาดเดาหน้าเว็บในเว็บไซต์อีคอมเมิร์ซ จากนั้นเพิ่มสินค้าลงในตะกร้า แล้วโหลดหน้าเว็บที่คาดเดาไว้ก่อนหน้านี้ คุณอาจเห็นจำนวนตะกร้าเก่าหากเว็บไซต์ไม่ได้ดูแลเป็นพิเศษเพื่อให้แน่ใจว่ามีการอัปเดต
ความซับซ้อนเหล่านี้ยังคงมีอยู่สำหรับการดึงข้อมูลล่วงหน้าหากการจัดการสถานะบางอย่างเกิดขึ้นฝั่งเซิร์ฟเวอร์ แต่มักจะเป็นปัญหาที่ใหญ่กว่าสำหรับการแสดงผลล่วงหน้า การใช้การแสดงผลล่วงหน้าในเว็บไซต์ที่ซับซ้อนมากขึ้นอาจมีความซับซ้อนมากขึ้น
อย่างไรก็ตาม เราทราบจากนักพัฒนาแอปว่าพวกเขาได้รับประสิทธิภาพที่เพิ่มขึ้นจากการดึงข้อมูลหน้าเว็บล่วงหน้าอยู่แล้ว และต้องการใช้กฎการคาดเดาต่อไปเพื่อรับประโยชน์มากยิ่งขึ้น นี่คือจุดที่การแสดงผลล่วงหน้าจนกว่าสคริปต์จะพร้อมเข้ามามีบทบาท
Prerender Until Script คืออะไร
Prerender until script เป็นแนวทางใหม่ที่อยู่กึ่งกลางระหว่างการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า โดยจะดึงข้อมูลเอกสาร HTML ล่วงหน้า (เช่นเดียวกับการดึงข้อมูลล่วงหน้า) จากนั้นจะเริ่มแสดงผลหน้าเว็บ รวมถึงดึงข้อมูลทรัพยากรย่อยทั้งหมด (เช่นเดียวกับการแสดงผลล่วงหน้า) อย่างไรก็ตาม สิ่งสำคัญคือเบราว์เซอร์จะไม่เรียกใช้องค์ประกอบ <script> (ทั้งสำหรับสคริปต์ในบรรทัดและสคริปต์ src) เมื่อพบแท็ก <script> ที่บล็อก ระบบจะหยุดตัวแยกวิเคราะห์ชั่วคราวและรอจนกว่าผู้ใช้จะไปยังหน้าดังกล่าวแล้วจึงดำเนินการต่อ ในระหว่างนี้ เครื่องสแกนการโหลดล่วงหน้าจะดำเนินการต่อและดึงข้อมูลทรัพยากรย่อยที่หน้าเว็บต้องการเพื่อให้พร้อมใช้งานเมื่อหน้าเว็บโหลดต่อได้
การไม่ใช้<script>องค์ประกอบที่บล็อกจะช่วยลดความซับซ้อนในการติดตั้งใช้งานได้มาก ในขณะเดียวกัน การเริ่มกระบวนการแสดงผลและการดึงข้อมูลทรัพยากรย่อยจะช่วยให้ได้ประสิทธิภาพที่สูงกว่าการดึงข้อมูลล่วงหน้า ซึ่งอาจสูงเกือบเท่ากับการแสดงผลล่วงหน้าแบบเต็ม
ในกรณีที่ดีที่สุด (เมื่อไม่มีสคริปต์ในหน้าเลย) ตัวเลือกนี้จะแสดงผลหน้าทั้งหน้าล่วงหน้า หรือเมื่อหน้าเว็บมีเฉพาะองค์ประกอบสคริปต์ในส่วนท้ายหรือมีเฉพาะสคริปต์ที่มีแอตทริบิวต์ async หรือ defer ระบบจะแสดงหน้าเว็บล่วงหน้าอย่างเต็มรูปแบบโดยไม่มี JavaScript นั้น แม้ในกรณีที่แย่ที่สุด (มีสคริปต์ที่บล็อกใน <head>) การเริ่มต้นการแสดงผลหน้าเว็บ และโดยเฉพาะอย่างยิ่งการดึงข้อมูลล่วงหน้าของทรัพยากรย่อย ควรทำให้การโหลดหน้าเว็บดีขึ้นมาก
วิธีใช้การแสดงผลล่วงหน้าจนกว่าจะถึงสคริปต์
ก่อนอื่นให้เปิดใช้ฟีเจอร์ จากนั้นแสดงผลล่วงหน้าจนกว่าจะมีการใช้สคริปต์ในลักษณะเดียวกับตัวเลือก API กฎการคาดคะเนอื่นๆ ที่มีคีย์ prerender_until_script ใหม่ (โปรดสังเกตขีดล่างเพื่อให้เป็นชื่อคีย์ JSON ที่ถูกต้อง)
ใช้กับกฎรายการของ URL แบบคงที่ได้ดังนี้
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
นอกจากนี้ยังใช้กับกฎของเอกสารได้ด้วยในกรณีที่ URL ที่จะคาดคะเนมีให้เป็นลิงก์ในหน้าเว็บ
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
จากนั้นจะใช้การแสดงผลล่วงหน้าจนกว่าสคริปต์จะพร้อมกับตัวเลือก Speculation Rules API ตามปกติได้ ซึ่งรวมถึงค่าความกระตือรือร้นต่างๆ
เนื่องจาก JavaScript จะไม่ทำงาน จึงอ่าน document.prerendering ไม่ได้ และอ่านเหตุการณ์ prerenderingchange ไม่ได้เช่นกัน แต่เวลา activationStart จะไม่เป็น 0
ตัวอย่างต่อไปนี้แสดงวิธีทำให้ตัวอย่างก่อนหน้าใช้งานได้โดยใช้การสำรองข้อมูลเพื่อดึงข้อมูลล่วงหน้าสำหรับเบราว์เซอร์ที่ไม่รองรับ prerender_until_script
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome จะจัดการการทำซ้ำนี้โดยไม่มีปัญหาและเรียกใช้กฎที่เหมาะสมที่สุดสำหรับการตั้งค่าความกระตือรือร้นแต่ละรายการ
หรือคุณจะใช้ระดับความกระตือรือนที่แตกต่างกันเพื่อดึงข้อมูลล่วงหน้าอย่างกระตือรือน แล้วอัปเกรดเป็นการแสดงผลล่วงหน้าจนกว่าสคริปต์จะมีสัญญาณมากขึ้นตามที่แนะนำไว้ก่อนหน้านี้ด้วยการดึงข้อมูลล่วงหน้า/การแสดงผลล่วงหน้าก็ได้
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
โปรดทราบว่าคุณจะอัปเกรดการแสดงผลล่วงหน้าจนกว่าจะถึงสคริปต์เป็นการแสดงผลล่วงหน้าแบบเต็มด้วยวิธีนี้ไม่ได้ แต่โปรดแจ้งให้เราทราบหากคุณสนใจรูปแบบดังกล่าวที่ Chrome รองรับโดยติดดาวข้อบกพร่องนี้
JavaScript ทั้งหมดหยุดชั่วคราวใช่ไหม
ไม่ได้ มีเพียงองค์ประกอบ <script> เท่านั้นที่ทำให้โปรแกรมแยกวิเคราะห์หยุดชั่วคราว ซึ่งหมายความว่าตัวแฮนเดิลสคริปต์ในบรรทัด (เช่น onload) หรือ URL ของ javascript: จะไม่ทำให้เกิดการหยุดชั่วคราวและอาจดำเนินการได้
เช่น บันทึก Hero image is now loaded ไปยังคอนโซลก่อนที่จะไปยังหน้าเว็บ
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
แต่หากเพิ่ม Listener เหตุการณ์ด้วย <script> ระบบจะไม่บันทึก Hero image is now loaded ลงในคอนโซลจนกว่าจะเปิดใช้งานหน้าเว็บ
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
แม้ว่าอาจดูขัดกับสัญชาตญาณ แต่ในหลายกรณี (เช่น ในตัวอย่างก่อนหน้า) การดำเนินการทันทีน่าจะดีกว่า และการเลื่อนเวลาอาจทำให้เกิดความซับซ้อนที่ไม่คาดคิดมากขึ้น
นอกจากนี้ เหตุการณ์ในบรรทัดส่วนใหญ่ต้องมีการดำเนินการของผู้ใช้ (เช่น onclick, onhover) จึงจะดำเนินการได้จนกว่าผู้ใช้จะโต้ตอบกับหน้าเว็บได้
สุดท้าย สคริปต์ที่บล็อกก่อนหน้าจะหยุดตัวแยกวิเคราะห์ชั่วคราวและป้องกันไม่ให้ค้นพบตัวแฮนเดิลเหตุการณ์ในบรรทัด ดังนั้นโค้ดนี้จะไม่โหลดข้อความไปยังคอนโซลจนกว่าจะมีการเปิดใช้งาน แม้ว่าจะเป็นตัวแฮนเดิลเหตุการณ์แบบอินไลน์ก็ตาม
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
โดยเฉพาะอย่างยิ่งสำหรับตัวแฮนเดิลสคริปต์แบบอินไลน์ที่ใช้โค้ดที่กำหนดไว้ก่อนหน้านี้ ซึ่งจะยังคงทำงานได้ตามที่คาดไว้
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
แล้วสคริปต์ที่มีแอตทริบิวต์ async และ defer ล่ะ
สคริปต์ที่มีแอตทริบิวต์ async และ defer จะถูกเลื่อนออกไปจนกว่าจะมีการเปิดใช้งาน แต่จะไม่บล็อกตัวแยกวิเคราะห์ไม่ให้ประมวลผลส่วนอื่นๆ ของหน้าเว็บต่อไป ระบบจะดาวน์โหลดสคริปต์ แต่จะไม่ดำเนินการจนกว่าจะมีการไปยังหน้าเว็บ
วิธีเปิดใช้การแสดงผลล่วงหน้าจนกว่าสคริปต์จะพร้อม
"แสดงผลล่วงหน้าจนกว่าสคริปต์จะพร้อม" เป็นตัวเลือกใหม่ที่เรากำลังดำเนินการอยู่และอาจมีการเปลี่ยนแปลง ดังนั้นจึงยังไม่พร้อมใช้งานหากไม่ได้เปิดใช้ก่อนเพื่อเลือกใช้
โดยสามารถเปิดใช้ได้ในเครื่องสำหรับนักพัฒนาซอฟต์แวร์ด้วย chrome://flags/#prerender-until-scriptChrome Flag หรือด้วย--enable-features=PrerenderUntilScript Flag บรรทัดคำสั่ง
ตอนนี้การแสดงผลล่วงหน้าจนกว่าสคริปต์จะพร้อมใช้งานก็พร้อมให้บริการเป็นช่วงทดลองใช้จากต้นทางจาก Chrome 144 แล้วเช่นกัน Origin Trials ช่วยให้เจ้าของเว็บไซต์เปิดใช้ฟีเจอร์ในเว็บไซต์ของตนเพื่อให้ผู้ใช้จริงได้ใช้ฟีเจอร์ดังกล่าวโดยไม่ต้องเปิดใช้ด้วยตนเอง ซึ่งจะช่วยให้วัดผลกระทบของฟีเจอร์ต่อผู้ใช้จริงได้เพื่อให้มั่นใจว่าฟีเจอร์จะทำงานได้ตามที่คาดไว้
ทดลองใช้และแชร์ความคิดเห็นของคุณ
เราตื่นเต้นมากกับการเพิ่ม API กฎการคาดการณ์ที่เสนอมานี้ และขอแนะนำให้เจ้าของเว็บไซต์ลองทดสอบใช้
แชร์ความคิดเห็นเกี่ยวกับข้อเสนอในที่เก็บ GitHub หากต้องการส่งความคิดเห็นเกี่ยวกับการใช้งานของ Chrome โปรดรายงานข้อบกพร่องของ Chromium