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