คุณสามารถใช้กฎการคาดเดาเพื่อดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าสำหรับการนำทางหน้าถัดไปตามที่ได้อธิบายไว้ในโพสต์ก่อนหน้า วิธีนี้ช่วยให้หน้าเว็บโหลดได้เร็วขึ้นหรือแม้กระทั่งทันที ซึ่งเป็นการปรับปรุง Core Web Vitals อย่างมากสำหรับการนำทางหน้าเว็บเพิ่มเติมเหล่านี้
การแก้ไขข้อบกพร่องของกฎการคาดเดาอาจเป็นเรื่องยาก โดยเฉพาะอย่างยิ่งกับหน้าที่แสดงผลล่วงหน้า เนื่องจากหน้าเหล่านี้จะแสดงผลในตัวแสดงผลแยกต่างหาก คล้ายกับแท็บพื้นหลังที่ซ่อนอยู่ซึ่งจะแทนที่แท็บปัจจุบันเมื่อเปิดใช้งาน ดังนั้น ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บตามปกติจึงไม่สามารถแก้ไขข้อบกพร่องได้เสมอไป
ทีม Chrome ทำงานอย่างหนักเพื่อปรับปรุงการสนับสนุนเครื่องมือสำหรับนักพัฒนาเว็บสำหรับการแก้ไขข้อบกพร่องของกฎการคาดเดา ในโพสต์นี้ คุณจะเห็นวิธีการต่างๆ ทั้งหมดในการใช้เครื่องมือเหล่านี้เพื่อทำความเข้าใจกฎการคาดเดาของหน้าเว็บ สาเหตุที่กฎอาจไม่ทำงาน และเวลาที่นักพัฒนาซอฟต์แวร์สามารถใช้ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บที่คุ้นเคยมากกว่า และเมื่อใดที่ไม่ได้ผล
คำอธิบายของคำศัพท์ "ก่อน"
คำว่า "ก่อน" นั้นมีคำมากมายที่อาจสร้างความสับสน ดังนั้นเราจะเริ่มต้นด้วยคำอธิบายเกี่ยวกับสิ่งเหล่านี้
- ดึงข้อมูลล่วงหน้า: ดึงข้อมูลทรัพยากรหรือเอกสารล่วงหน้าเพื่อปรับปรุงประสิทธิภาพในอนาคต โพสต์นี้กล่าวถึงการดึงข้อมูลเอกสารล่วงหน้าโดยใช้ Speculation Rules API แทนที่จะเป็นตัวเลือก
<link rel="prefetch">
ที่คล้ายกันแต่เก่ากว่าซึ่งมักจะใช้สำหรับการดึงข้อมูลทรัพยากรย่อยล่วงหน้า - การแสดงผลล่วงหน้า: ไม่ใช่แค่การดึงข้อมูลล่วงหน้า และจะแสดงผลทั้งหน้าราวกับว่าผู้ใช้ได้ไปยังหน้านั้นจริง แต่จะเก็บหน้าเว็บไว้ในกระบวนการแสดงผลเบื้องหลังที่ซ่อนอยู่เพื่อให้พร้อมใช้งานหากผู้ใช้ไปที่หน้านั้นจริงๆ ขอย้ำอีกครั้งว่าเอกสารฉบับนี้เกี่ยวข้องกับเวอร์ชัน Speculation Rules API ที่ใหม่กว่าของเวอร์ชันนี้ แทนที่จะเป็นตัวเลือก
<link rel="prerender">
แบบเก่า (ซึ่งไม่แสดงผลล่วงหน้าโดยสมบูรณ์แล้ว) - การคาดเดาในการนำทาง: คำรวมสำหรับตัวเลือกการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าแบบใหม่ที่เรียกใช้โดยกฎการคาดเดา
- การโหลดล่วงหน้า: คำที่มากเกินไปซึ่งสามารถอ้างอิงถึงเทคโนโลยีและกระบวนการต่างๆ ได้ รวมถึง
<link rel="preload">
, โหลดเครื่องสแกนล่วงหน้า และการโหลดการนำทางล่วงหน้าสำหรับโปรแกรมทำงาน รายการเหล่านี้จะไม่กล่าวถึงที่นี่ แต่จะรวมคำไว้เพื่อแยกความแตกต่างจากคำศัพท์ "การคาดเดาด้านการนำทาง" อย่างชัดเจน
กฎการคาดเดาสำหรับ prefetch
ใช้กฎการคาดเดาเพื่อดึงข้อมูลเอกสารของการนำทางถัดไปล่วงหน้า ตัวอย่างเช่น เมื่อแทรก JSON ต่อไปนี้ลงในหน้า ระบบจะดึงข้อมูล next.html
และ next2.html
ล่วงหน้า
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
การใช้กฎการคาดเดาสำหรับการดึงข้อมูลล่วงหน้าสำหรับการนำทางมีข้อดีเหนือกว่าไวยากรณ์ <link rel="prefetch">
แบบเก่า เช่น API ที่แสดงออกได้ดีกว่าและจัดเก็บผลลัพธ์ไว้ในแคชหน่วยความจำแทนที่จะเป็นดิสก์แคช HTTP
แก้ไขข้อบกพร่องของกฎการคาดเดา prefetch
การดึงข้อมูลล่วงหน้าที่เกิดจากกฎการคาดเดาจะดูได้ในแผงเครือข่ายในวิธีเดียวกันกับการดึงข้อมูลอื่นๆ
![แผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงเอกสารที่ดึงข้อมูลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/network-panel-chrome-devtools-prefetch.png?authuser=0&hl=th)
คำขอ 2 รายการที่ไฮไลต์ด้วยสีแดงเป็นทรัพยากรที่ดึงข้อมูลล่วงหน้า ดังที่แสดงในคอลัมน์ประเภท ระบบจะดึงข้อมูลเหล่านี้ที่ลำดับความสำคัญ Lowest
เช่นเดียวกับสำหรับการนำทางในอนาคต และ Chrome จะจัดลำดับความสำคัญของทรัพยากรของหน้าปัจจุบันก่อน
การคลิกแถวใดแถวหนึ่งยังแสดงส่วนหัว HTTP ของ Sec-Purpose: prefetch
ซึ่งเป็นวิธีระบุคำขอเหล่านี้ในฝั่งเซิร์ฟเวอร์ด้วย
![ดึงข้อมูลส่วนหัวล่วงหน้าสำหรับ Chrome DevTools โดยมีการตั้งค่า Sec-Purpose ให้ดึงข้อมูลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/chrome-devtools-prefetch-sec-purpose-header.png?authuser=0&hl=th)
แก้ไขข้อบกพร่อง prefetch
ด้วยแท็บการโหลดแบบคาดเดา
เราได้เพิ่มส่วนการโหลดแบบคาดเดาใหม่ในแผงแอปพลิเคชันของ Chrome DevTools ในส่วนบริการที่ทำงานอยู่เบื้องหลัง เพื่อช่วยแก้ไขข้อบกพร่องของกฎการคาดเดา โดยมีรายละเอียดดังนี้
![แท็บการโหลดแบบคาดเดาใน Chrome DevTools ที่แสดงกฎการดึงข้อมูลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prefetch.png?authuser=0&hl=th)
ส่วนนี้จะมีแท็บ 3 แท็บดังนี้
- การโหลดแบบคาดเดา ซึ่งแสดงสถานะการแสดงผลล่วงหน้าของหน้าปัจจุบัน
- กฎซึ่งแสดงชุดกฎทั้งหมดที่พบในหน้าปัจจุบัน
- การคาดเดาซึ่งแสดงรายการ URL ที่ดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าทั้งหมดจากชุดกฎ
แท็บการคาดเดาแสดงในภาพหน้าจอก่อนหน้า และเราสังเกตเห็นว่าหน้านี้มีกฎการคาดเดาชุดเดียวสำหรับการดึงข้อมูลล่วงหน้า 3 หน้า การดึงข้อมูลล่วงหน้า 2 รายการสำเร็จและไม่สำเร็จ คุณสามารถคลิกไอคอนข้างชุดกฎเพื่อนําคุณไปยังแหล่งที่มาของชุดกฎในแผงองค์ประกอบได้ หรือจะคลิกลิงก์สถานะเพื่อนำคุณไปยังแท็บการคาดเดาที่กรองไว้สำหรับชุดกฎนั้นก็ได้
แท็บการคาดเดาจะแสดง URL เป้าหมายทั้งหมด รวมถึงการดำเนินการ (ดึงข้อมูลล่วงหน้าหรือแสดงผลล่วงหน้า) ชุดกฎที่เป็นมา (เนื่องจากอาจมีหลายรายการในหน้า) และสถานะของการคาดเดาแต่ละรายการ มีดังนี้
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดง URL ที่ดึงข้อมูลล่วงหน้าพร้อมสถานะ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-prefetch-annotated.png?authuser=0&hl=th)
เหนือ URL จะใช้เมนูแบบเลื่อนลงเพื่อแสดง URL จากชุดกฎทั้งหมด หรือเฉพาะ URL จากชุดกฎบางชุดก็ได้ ที่ด้านล่าง URL ทั้งหมดจะแสดงอยู่ในรายการ เมื่อคลิกที่ URL คุณจะเห็นข้อมูลที่ละเอียดมากขึ้น
ในภาพหน้าจอนี้ เราเห็นสาเหตุที่หน้าเว็บ next3.html
ดำเนินการไม่สำเร็จ (ซึ่งไม่มีอยู่ จึงแสดงผล 404 ซึ่งเป็นรหัสสถานะ HTTP ที่ไม่ใช่ 2xx)
แท็บสรุปการโหลดแบบคาดเดาจะแสดงรายงานสถานะการโหลดแบบคาดเดาสำหรับหน้านี้เพื่อแสดงว่ามีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้ากับหน้านี้หรือไม่
สำหรับหน้าที่ดึงข้อมูลล่วงหน้า คุณควรเห็นข้อความที่สำเร็จเมื่อหน้านั้นไปยัง:
![แท็บการโหลดแบบคาดเดาสำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงการดึงข้อมูลล่วงหน้าที่สำเร็จ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/successful-prefetch.png?authuser=0&hl=th)
การคาดเดาที่ไม่ตรงกัน
เมื่อมีการนำทางเกิดขึ้นจากหน้าที่มีกฎการคาดเดาที่ไม่ส่งผลให้มีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้า ส่วนเพิ่มเติมของแท็บจะแสดงรายละเอียดเพิ่มเติมเกี่ยวกับสาเหตุที่ URL ไม่ตรงกับ URL ที่คาดเดาไว้ ซึ่งมีประโยชน์สำหรับการตรวจพบคำที่สะกดผิดในกฎการคาดเดาของคุณ
![แท็บการโหลดแบบคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งแสดงวิธีที่ URL ปัจจุบันไม่ตรงกับ URL ใดๆ ในกฎการคาดเดาของหน้าเว็บก่อนหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prefetch.png?authuser=0&hl=th)
ตัวอย่างเช่น เราไปยัง next4.html
แต่มีเพียง next.html
, next2.html
หรือ next3.html
เท่านั้นที่เป็นการดึงข้อมูลล่วงหน้า เราจึงเห็นว่าข้อมูลนี้ไม่ตรงกับกฎ 3 ข้อใดๆ
แท็บการโหลดแบบคาดเดามีประโยชน์มากในการแก้ไขข้อบกพร่องของกฎการคาดเดาด้วยตนเอง และค้นหาข้อผิดพลาดทางไวยากรณ์ใน JSON
สำหรับการดึงข้อมูลล่วงหน้านั้น แผงเครือข่ายน่าจะเป็นตำแหน่งที่คุ้นเคยมากกว่า สำหรับตัวอย่างการดึงข้อมูลล่วงหน้าไม่สำเร็จ คุณจะเห็น 404 สำหรับการดึงข้อมูลล่วงหน้าที่นี่
![แผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงการดึงข้อมูลล่วงหน้าที่ไม่สำเร็จ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/chrome-devtools-network-failed-prefetch.png?authuser=0&hl=th)
อย่างไรก็ตาม แท็บการโหลดแบบคาดเดาจะมีประโยชน์กว่ามากสำหรับกฎการคาดเดาการแสดงผลล่วงหน้า ซึ่งจะกล่าวถึงต่อไป
กฎการคาดเดาสำหรับ prerender
กฎการคาดเดาการแสดงผลล่วงหน้าจะใช้ไวยากรณ์เดียวกันกับกฎการคาดเดาที่ดึงข้อมูลล่วงหน้า เช่น
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
ชุดกฎนี้เรียกใช้การโหลดและการแสดงผลทั้งหมดของหน้าเว็บที่ระบุ (ขึ้นอยู่กับข้อจำกัดบางประการ) ซึ่งจะช่วยให้ได้รับประสบการณ์การโหลดในทันที แม้จะมีค่าใช้จ่ายสำหรับทรัพยากรเพิ่มเติมก็ตาม
แต่การดึงข้อมูลล่วงหน้าจะไม่สามารถดูได้ในแผงเครือข่าย เนื่องจากมีการดึงข้อมูลและแสดงผลในกระบวนการแสดงผลแยกต่างหากใน Chrome ซึ่งทำให้แท็บการโหลดแบบคาดเดามีความสำคัญมากขึ้นในการแก้ไขข้อบกพร่องของกฎการคาดเดาการแสดงผลล่วงหน้า
แก้ไขข้อบกพร่อง prerender
ด้วยแท็บการโหลดแบบคาดเดา
หน้าจอการโหลดแบบคาดเดาเดียวกันสามารถใช้สำหรับกฎการคาดเดาการแสดงผลล่วงหน้าได้ ดังที่แสดงกับหน้าสาธิตที่คล้ายกันซึ่งพยายามแสดงผลล่วงหน้า แทนการดึงข้อมูลทั้ง 3 หน้าล่วงหน้า
![แท็บการโหลดแบบคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับหน้าที่มีกฎการคาดเดาการแสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prerender.png?authuser=0&hl=th)
จากตรงนี้เราเห็นอีกครั้งว่า URL 1 ใน 3 รายการแสดงผลล่วงหน้าไม่สำเร็จ และนักพัฒนาซอฟต์แวร์ดูรายละเอียดของแต่ละ URL ในแท็บการคาดเดาได้โดยคลิกลิงก์พร้อม 2 รายการ, ไม่สำเร็จ 1 รายการ
ใน Chrome 121 เราได้เปิดตัวการรองรับกฎในเอกสาร วิธีนี้จะทำให้เบราว์เซอร์สามารถเลือกลิงก์เหล่านี้จากลิงก์ต้นทางเดียวกันบนหน้าเว็บแทนที่จะแสดงชุด URL ที่เฉพาะเจาะจง:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
ตัวอย่างนี้จะเลือกลิงก์ต้นทางเดียวกันทั้งหมด ยกเว้นลิงก์ที่ขึ้นต้นด้วย /not-safe-to-prerender
เป็นตัวเลือกการแสดงผลล่วงหน้า
นอกจากนี้ยังตั้งค่าการแสดงผลล่วงหน้า eagerness
เป็น moderate
ซึ่งหมายความว่าการนำทางจะแสดงผลล่วงหน้าเมื่อวางเมาส์เหนือลิงก์หรือคลิกลิงก์
มีกฎที่คล้ายกันเช่นนี้ในเว็บไซต์สาธิตกฎการคาดเดา และการใช้ส่วนการโหลดแบบคาดเดาใหม่ในเว็บไซต์นี้จะแสดงประโยชน์ของแท็บใหม่เนื่องจาก URL ที่มีสิทธิ์ทั้งหมดที่เบราว์เซอร์ซึ่งพบในหน้าเว็บแสดงรายการอยู่
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มี URL ที่ไม่ได้เรียกใช้จำนวนหนึ่ง](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-not-triggered.png?authuser=0&hl=th)
สถานะจะเป็นไม่ได้ทริกเกอร์เนื่องจากยังไม่ได้เริ่มต้นกระบวนการแสดงผลล่วงหน้า อย่างไรก็ตาม เมื่อเราจับตัวชี้เหนือลิงก์ต่างๆ เราจะเห็นว่าสถานะมีการเปลี่ยนแปลงเมื่อ URL แต่ละรายการแสดงผลล่วงหน้า ดังนี้
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มีการทริกเกอร์หน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-triggered.png?authuser=0&hl=th)
Chrome ได้กำหนดขีดจำกัดการแสดงผลล่วงหน้า ซึ่งรวมถึงการแสดงผลล่วงหน้าสูงสุด 2 รายการสำหรับความตั้งใจ moderate
ดังนั้นหลังจากวางเมาส์เหนือลิงก์ที่ 3 เราจึงเห็นสาเหตุที่ URL นั้นไม่สำเร็จ ดังนี้
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงการโหลดล่วงหน้าที่ล้มเหลว](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/replaced-prerender-shows-as-failure.png?authuser=0&hl=th)
แก้ไขข้อบกพร่อง prerender
ด้วยแผงเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ
หน้าที่แสดงผลล่วงหน้าจะไม่แสดงในกระบวนการแสดงผลปัจจุบันในแผงเครื่องมือสำหรับนักพัฒนาเว็บ เช่น แผงเครือข่าย เนื่องจากระบบจะแสดงผลในหน้าที่แสดงผลล่วงหน้า ซึ่งต่างจากการดึงข้อมูลล่วงหน้า
อย่างไรก็ตาม ตอนนี้คุณเปลี่ยนโหมดแสดงภาพที่แผงเครื่องมือสำหรับนักพัฒนาเว็บใช้ด้วยเมนูแบบเลื่อนลงที่ด้านขวาบนในเมนูแบบเลื่อนลง หรือโดยการเลือก URL ในส่วนบนของแผงและเลือกตรวจสอบได้ดังนี้
![ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณเปลี่ยนโหมดแสดงภาพที่ใช้แสดงข้อมูลได้](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/switch-renderers.png?authuser=0&hl=th)
เมนูแบบเลื่อนลงนี้ (และค่าที่เลือก) จะแชร์ในแผงอื่นๆ ทั้งหมดด้วย เช่น แผงเครือข่าย ซึ่งคุณจะเห็นว่าหน้าที่ขอคือหน้าที่แสดงผลล่วงหน้า ดังนี้
![แผง Chrome DevTools Network ที่แสดงคำขอเครือข่ายสำหรับหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/network-with-different-renderer.png?authuser=0&hl=th)
เมื่อดูส่วนหัว HTTP สำหรับทรัพยากรเหล่านี้ เราพบว่าทรัพยากรเหล่านี้ได้รับการตั้งค่าด้วยส่วนหัว Sec-Purpose: prefetch;prerender
ดังนี้
![แผง Chrome DevTools Network แสดงส่วนหัว Sec-Purpose สำหรับหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/sec-purpose-headers-prerender.png?authuser=0&hl=th)
หรือแผงองค์ประกอบ ซึ่งคุณจะดูเนื้อหาของหน้าเว็บได้ เช่นในภาพหน้าจอต่อไปนี้ที่เราเห็นว่าองค์ประกอบ <h1>
คือหน้าที่แสดงผลล่วงหน้า
![แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-elements-panel.png?authuser=0&hl=th)
หรือแผงควบคุมคอนโซล ซึ่งคุณสามารถดูบันทึกคอนโซลที่หน้าเว็บที่แสดงผลล่วงหน้าส่งออกมาได้
![แผงคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงเอาต์พุตของคอนโซลจากหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-console-panel.png?authuser=0&hl=th)
แก้ไขข้อบกพร่องของกฎการคาดเดาในหน้าที่แสดงผลล่วงหน้า
ส่วนก่อนหน้านี้กล่าวถึงวิธีแก้ไขข้อบกพร่องของหน้าที่แสดงผลล่วงหน้าในหน้าซึ่งเริ่มการแสดงผลล่วงหน้า อย่างไรก็ตาม ตัวหน้าเว็บที่แสดงผลล่วงหน้าอาจให้ข้อมูลการแก้ไขข้อบกพร่องได้จากการเรียกใช้ Analytics หรือเข้าสู่ระบบคอนโซล (ซึ่งดูได้ตามที่อธิบายไว้ในส่วนก่อนหน้า)
นอกจากนี้ เมื่อผู้ใช้เปิดใช้งานหน้าที่แสดงผลล่วงหน้าแล้ว แท็บการโหลดแบบคาดเดาจะแสดงสถานะนี้พร้อมระบุว่ามีการแสดงผลล่วงหน้าสำเร็จหรือไม่ หากไม่สามารถแสดงผลล่วงหน้าได้ โดยมีคำอธิบายว่าเหตุใดจึงเป็นกรณีนี้
![แท็บการโหลดแบบคาดเดาสำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงทั้งหน้าที่แสดงผลล่วงหน้าที่สำเร็จและล้มเหลว](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/success-failed-prerender.png?authuser=0&hl=th)
นอกจากนี้ ในกรณีของการดึงข้อมูลล่วงหน้า การออกจากหน้าเว็บที่มีกฎการคาดเดาที่ไม่ตรงกับหน้าปัจจุบันจะพยายามแสดงสาเหตุที่ URL ไม่ตรงกับที่ระบุไว้ในกฎการคาดเดาของหน้าเว็บก่อนหน้าในแท็บการโหลดแบบคาดเดา โดยทำดังนี้
![แท็บการโหลดแบบคาดเดาสำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดง URL ของ URL ปัจจุบันไม่ตรงกับ URL ที่ระบุไว้ในหน้าก่อนหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prerender.png?authuser=0&hl=th)
บทสรุป
ในโพสต์นี้ เราได้แสดงวิธีต่างๆ ที่นักพัฒนาแอปสามารถแก้ไขข้อบกพร่องของกฎการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า ทีมของเราทำงานอย่างต่อเนื่องเกี่ยวกับการใช้เครื่องมือสำหรับกฎการคาดเดา และเรายินดีรับฟังคำแนะนำจากนักพัฒนาซอฟต์แวร์เกี่ยวกับวิธีอื่นๆ ที่มีประโยชน์ในการแก้ไขข้อบกพร่องของ API ใหม่อันน่าตื่นเต้นนี้ เราขอแนะนำให้นักพัฒนาซอฟต์แวร์แจ้งปัญหาในเครื่องมือติดตามปัญหาของ Chrome สำหรับคำขอฟีเจอร์หรือข้อบกพร่องที่พบ
ข้อความแสดงการยอมรับ
รูปไม่ชอบโดย Nubelson Fernandes ใน Unsplash