發布日期：2026 年 1 月 23 日
Chrome 將從 Chrome 144 開始，針對 Speculation Rules API 新增的 prerender until script 啟動新的來源試用。網站可透過這項來源試用功能，讓實際使用者試用這項新功能。目標是進行現場測試，並向 Chrome 團隊提供意見，協助他們決定是否要將這項功能加入網頁平台。
這項功能要解決什麼問題？
透過推測規則 API，網頁載入作業可在使用者實際瀏覽網頁前啟動。預先完成部分或所有工作，有助於提升日後的網頁載入速度。到目前為止，這項功能允許兩種推測：預先擷取和預先算繪。
預先擷取只會擷取 HTML 文件，這項功能會提前取得重要的第一個資源，在瀏覽網址時提升效能。不會載入任何子資源 (例如 CSS、JavaScript 或圖片)，也不會執行 JavaScript，因此瀏覽器在載入網頁時可能仍需執行大量工作。
預先算繪功能不只如此，系統會擷取子資源，並開始算繪頁面和執行 JavaScript，幾乎就像是在隱藏的背景分頁中開啟頁面一樣。如果瀏覽器已完成網頁的算繪作業，使用者點選連結後即可立即導覽。
使用預先算繪選項可能大幅提升效能，但會增加實作成本和額外資源費用。如果未仔細考量，在使用者實際瀏覽網頁前完整預先算繪網頁，也可能導致意料之外的副作用。舉例來說，如果分析供應商未將推測納入考量，分析可能會在使用者瀏覽前觸發，導致統計資料出現偏差。
使用預先算繪的網站也必須小心，不要向使用者提供過時的網頁。舉例來說，如果您推測電子商務網站上的網頁，然後將商品加入購物車，接著載入先前推測的網頁，如果網站未特別確保購物車數量更新，您可能會看到舊的購物車數量。
如果部分狀態管理作業是在伺服器端進行，預先擷取也會發生這些複雜情況，但預先算繪通常會遇到更大的問題。在較複雜的網站上使用預先算繪功能可能較為複雜。
不過，開發人員表示，他們已透過預先擷取網頁獲得成效提升，並希望進一步運用推測規則，獲得更多好處。這時，您可以使用「預先算繪直到指令碼」功能。
什麼是「預先算繪直到指令碼」？
「預先算繪直到指令碼」是介於預先擷取和預先算繪之間的新中間地帶。它會預先擷取 HTML 文件 (如同預先擷取)，然後開始算繪網頁，包括擷取所有子資源 (如同預先算繪)。但最重要的是，瀏覽器會避免執行 <script> 元素 (包括內嵌指令碼和 src 指令碼)。如果遇到會造成阻礙的 <script> 代碼，系統會暫停剖析器，並等待使用者前往該網頁，然後再繼續。同時，預先載入掃描器可以繼續運作，擷取網頁所需的子資源，以便在網頁繼續載入時使用。
只要延後任何會造成封鎖的 <script> 元素，就能避免許多實作上的複雜問題。同時，啟動算繪程序並擷取子資源，相較於預先擷取，可大幅提升效能，甚至可能接近完整預先算繪的效能。
在最佳情況下 (網頁完全沒有指令碼)，這個選項會預先算繪整個網頁。或者，如果網頁的頁尾只有指令碼元素或只有具有 async 或 defer 屬性的指令碼，系統會預先完整算繪網頁，但不會算繪該 JavaScript。即使在最糟的情況下 (<head> 中有阻礙指令碼)，網頁轉譯的啟動，尤其是子資源的預先擷取，應能大幅改善網頁載入速度。
如何使用「預先算繪直到指令碼」？
首先，啟用這項功能，然後預先算繪，直到使用指令碼為止，方式與其他 Speculation Rules API 選項相同，但要使用新的 prerender_until_script 鍵 (請注意底線，確保這是有效的 JSON 鍵名)。
這項功能可搭配靜態網址的清單規則使用：
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
如果網頁上的連結提供要推測的網址，也可以搭配文件規則使用：
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
預先算繪完成後，即可搭配一般 Speculation Rules API 選項使用指令碼，包括各種急切程度值。
由於系統不會執行 JavaScript，因此無法讀取 document.prerendering，也無法讀取 prerenderingchange 事件。不過，activationStart 時間不會是零。
以下範例說明如何部署上一個範例，並為不支援 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) 或 javascript: 網址不會導致暫停，可能會執行。
舉例來說，這可以在網頁導覽前，將 Hero image is now loaded 記錄到控制台：
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
但如果事件監聽器是透過 <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-script Chrome 旗標或 --enable-features=PrerenderUntilScript 指令列旗標，在本機啟用這項功能。
從 Chrome 144 版開始，您也可以透過來源試用功能，預先算繪直到指令碼為止的內容。原始碼試用可讓網站擁有者在網站上啟用功能，供實際使用者使用，不必手動啟用。這樣就能評估這項功能對實際使用者的影響，確保功能運作正常。
試用並分享意見
我們非常期待 Speculation Rules API 能夠新增這項功能，也鼓勵網站擁有者進行測試。
歡迎前往 GitHub 存放區，針對提案提供意見回饋。如要對 Chrome 的實作方式提供意見，請回報 Chromium 錯誤。