Den nya Prerender Until Script Speculation Rule

Origin Trial-status: Denna funktion är för närvarande en Origin Trial. För att implementera den måste du registrera dig för en Origin Trial-token eller aktivera den lokalt via chrome://flags. Trots sin experimentella karaktär visar tidig feedback från teknikgemenskapen exceptionell stabilitet och  prestandaförbättringar.

Prerender Until Script: Det nya läget för Speculative Loading

Latens är flaskhalsen. Jag har sagt detta i åratal, och det förblir det enskilt största problemet inom webbprestanda. Oavsett hur mycket vi optimerar vår Critical Rendering Path eller skalar bort kilobytes från våra bundles, är vi i slutändan bundna av fysikens lagar och nätverkets round-trip time (RTT).

Under lång tid har vi försökt kringgå dessa lagar med hjälp av Speculative Loading: att gissa vart användaren ska gå härnäst och ladda det i förväg. Hittills har vi haft två huvudverktyg, och inget av dem var perfekt:

• prefetch: Säkert och lättviktigt, men det hämtar bara HTML-koden. Webbläsaren måste fortfarande parsa, bygga DOM:en och upptäcka subresurser (CSS, bilder) efter att användaren klickar. Det löser nätverksväntan, men inte renderingsarbetet.
• prerender: Det nukleära alternativet. Det laddar allt, exekverar JavaScript och renderar sidan i en dold bakgrundsflik. Det är omedelbart, men det är dyrt. Det förbrukar bandbredd, minne och, värst av allt, utlöser det "sidoeffekter" – avfyrar analyspixlar och exekverar kod för sidor som användaren kanske aldrig faktiskt besöker.

Vi behövde uppenbarligen en mellanväg. Vi behövde den visuella beredskapen hos en prerender utan den beräkningsmässiga kostnaden och risken med att exekvera applikationslogik.

prerender_until_script.

Det geniala med prerender_until_script ligger i hur det separerar parsning från exekvering.När du använder denna specifika Speculation Rule instruerar du webbläsaren att:

• Hämta dokumentet (som en prefetch).
• Parsa HTML-strömmen och bygga DOM:en.
• Köra Preload Scanner. Detta är den kritiska delen. Webbläsaren upptäcker och laddar ner subresurser som CSS med hög prioritet och LCP-bilden.

Dock, i det ögonblick parsern stöter på en JavaScript-exekveringspunkt kan 2 saker hända:

• Synkrona skript: Parsern stannar omedelbart.
• Async/Defer-skript: De laddas ner och köas, men exekveras inte.

Webbläsaren bygger sidans visuella "skal": Layouten, typografin, bilderna – men lämnar applikationslogiken frusen. Sidan ligger i minnet, kemiskt stabil, och väntar på att användaren ska klicka.

När klicket sker byts sidan in omedelbart och det "pausade" tillståndet upphävs. JavaScript exekveras, event handlers kopplas på och din analys avfyras exakt när den ska.

Implementationen

Vi implementerar detta med hjälp av Speculation Rules API. Eftersom prerender_until_script är en experimentell funktion (lanseras i Chrome 144) måste vi säkerställa bakåtkompatibilitet.

Webbläsare som inte känner igen nyckeln prerender_until_script kommer att ignorera den. Därför definierar en ansvarsfull implementation en prefetch-fallback för samma uppsättning URL:er. Chrome deduplicerar automatiskt dessa regler och tillämpar den mest kapabla tillgängliga åtgärden.

Här är JSON-strukturen för en produktionsklar implementation::

<script type="speculationrules">
{
  "prerender_until_script": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Tips: om du snabbt vill generera din egen anpassade uppsättning Speculation Rules kan du använda [url="/tools/speculation-rules-generator"]generatorn för Speculation Rules[/url]

Överväganden

Eagerness: Jag rekommenderar nästan uteslutande moderate. Detta utlöser spekulationen vid hover (specifikt när pekaren stannar i 200ms). immediate är för aggressivt för de flesta implementationer och riskerar att slösa användarbandbredd på mobila anslutningar.

Exkluderingar: Du måste vara disciplinerad här. Spekulera aldrig på tillståndsändrande URL:er som /logout eller /add-to-cart. Även om prerender_until_script skyddar mot skriptexekvering, dikterar god arkitektur att vi inte ens bör hämta dessa endpoints i onödan.

Svaghet (Parser Blocking): Parsern stannar omedelbart när den stöter på en synkron <script>-tagg. Detta upphäver förbättringar som <script>loadWhileIdle(chat.js)</script> om de förekommer tidigt i DOM:en. Du kan behöva refaktorera befintlig kod för att placera dessa skript längst ner på sidan.

Inline Handlers: Observera att prerender_until_script bara pausar <script>-element. Inline event handlers på andra element (t.ex. <img onload="track()">) kommer fortfarande att exekveras om parsern når dem innan ett blockerande skript. Se till att dina analyspixlar och spårningslogik inte utlöses av dessa inline handlers under spekulationsfasen.