- Spegnimento
- 6 settembre 2026 alle ore 14:20 UTC
- Autore
- Kamo
- Impegno
- ab890f8
Segnalato: "dopo circa un minuto o due la pagina sembra animare via poi animare e la sua completamente bloccata. Browser vuole chiudere la scheda." Riproduzione in il codice piuttosto che il browser; tre pericoli a pagina intera separati, uno dei quali è la causa e due dei quali stavano aspettando il loro turno. 1. usoLe scaglie stavano forcing layout su sottotitoli di visibilità dei contenuti — IL CAUSE Ha chiamato getBoundingClientRect() su ogni elemento corrispondente nel documento, su ogni cornice di scorrimento. Ventitre elementi dietro un treppiede rAF legge come nulla, motivo per cui è sopravvissuto recensione, e su quasi qualsiasi altro sito esso non sarebbe niente. globals.css mette `content-visibility: auto` su ogni `sezione principale:not(#home)` — deliberatamente, perché sono state poste otto sezioni sotto il profilo, mentre L'immagine LCP attesa è stata misurata a 1.810 ms di ritardo del render. ottenereBounding Servizio clienti è un layout-forcing letto, quindi chiederlo su un elemento all'interno di un sottotreo saltato fa posare il browser che subtree immediatamente per rispondere, e poi saltarlo ancora una volta si scopre di essere ancora fuori schermo. Sessanta volte al secondo, per tutti 8 sezioni, non annulla semplicemente l'ottimizzazione — lo converte in un costo ricorrente che non esisteva mai prima. La metà visibile segue da `contain-intrinsic-size: auto 900px`: quelle le sezioni si alternano tra la loro altezza ricordata e il segnaposto, così il l'altezza del documento oscilla, e ogni `animazione-timeline: vista()` scorrimento rivelare sulla pagina riattiva gli offset modificati. Questa è la pagina che anima Via e indietro. Il costo del layout di compounding è il blocco. Ora non si pone mai una questione di un elemento che non è già reso. An IntersezioneObserver — che non costringe nulla — mantiene il set di candidati vicino il viewport, e solo quel set è mai misurato. Elementi in un sottotreo saltato non ci sono mai dentro. La lista dei candidati è ricostruita ogni 3s invece di ogni cornice. 2. cambiamento di volontà: la trasformazione è uscita dagli strati di sovrapposizione Non ha comprato nulla che non era già pagato per: una tela che ridipinge ogni frame ottiene il proprio strato compositing indipendentemente. Quello che ha comprato era un texture full-viewport per lo strato WASH — un gradiente CSS statico che mai animati — tenuti per la vita della scena, diversi megabyte a 1440p, su un pagina già che trasportano pannelli di fondo di novanta-odd. 3. mix-blend-mode è uscito tutte e cinque le scene che l'hanno usato Una modalità di miscela su uno strato full-viewport fisso rende il compositore letto l'intero pagina indietro ogni cornice per fondersi contro di esso. Darlo a `qualità === "full"` era l'istinto giusto alla profondità sbagliata; sulla pagina dove un effetto a pagina intera aveva appena appeso una scheda, spedire un altro che non posso misurare da qui non è un Il commercio vale la pena fare una supposizione. Niente di molto è perso — `schermo` con bianco sopra una tela scura è vicino a ciò che alfa semplice tira — e le scene che hanno bisogno la luce additiva lo fa già dentro la tela con `lighter`, contro altre particelle piuttosto che contro il documento. E un WATCHDOG, perché il prossimo non sarà trovato in rassegna useSceneCanvas ora misura l'intervallo reale della cornice — non il `dt` consegnato a scene, che è bloccata e così non può segnalare problemi — e se la pagina non può tenere 15fps attraverso dieci secondi ininterrotti la scena si ferma per il bene, schiari e dice perché nella console. Dieci secondi sono abbastanza lunghi che un GC o un'altra scheda rubare la CPU non può incidere, abbastanza corto che un il lettore ottiene la loro pagina di nuovo prima di raggiungere per il pulsante di chiusura. La bandiera latches, così il ritorno alla scheda non riavvia una scena nelle condizioni che l'ha affamato, e una scena in piedi smette di ricostruire i suoi sprite su ridimensionamento. Diciotto scene di tela in esecuzione contro la geometria DOM live su hardware nessuno qui ha visto fallirà di nuovo in qualche modo nessuno di noi ha previsto. Questo decide ciò che costa: una pagina non decisa, non inutilizzabile. Fisso anche: `dt` è stato documentato "mai 0" mentre solo il soffitto è stato bloccato. Due rAF callbacks può condividere un timestamp, e una scena diviso da dt per recuperare un tasso ottiene un Infinito in una posizione. Pavimenti a 1/480. Nessun visitatore ordinario è stato colpito — oggi si risolve a nessuna vacanza, quindi questo era solo raggiungibile tramite il piè di pagina. tsc clean, 14 guardie verdi, 187 percorsi ancora Prerenderato.