perf(movimento): sem tempo morto, vídeos regravados e 3D sem React Three Fiber
Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
f8545cd442
commit
6ac87824f3
68 files changed
+5735
-3300
No files matched your search
@@ -1,20 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
import {
|
||||
elementForHash,
|
||||
type FragmentHit,
|
||||
focusFragment,
|
||||
onFragmentClick,
|
||||
setScrollRestoration,
|
||||
} from "./fragment-nav";
|
||||
|
||||
function fragmentTarget(hash: string) {
|
||||
if (!hash) return null;
|
||||
try {
|
||||
return document.getElementById(decodeURIComponent(hash.slice(1)));
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function focusFragment(target: HTMLElement) {
|
||||
if (!target.hasAttribute("tabindex")) target.tabIndex = -1;
|
||||
target.focus({ preventScroll: true });
|
||||
}
|
||||
/** Teclas de rolagem: quem as usa já escolheu para onde ir, e a chegada por fragmento deixa de corrigir. */
|
||||
const SCROLL_KEYS = new Set([
|
||||
"ArrowUp",
|
||||
"ArrowDown",
|
||||
"PageUp",
|
||||
"PageDown",
|
||||
"Home",
|
||||
"End",
|
||||
" ",
|
||||
"Tab",
|
||||
]);
|
||||
|
||||
/**
|
||||
* A document owns one outstanding homepage arrival. Later mounts are same-document
|
||||
@@ -27,135 +32,113 @@ export function resetHomeArrivalState() {
|
||||
arrivalSettled = false;
|
||||
}
|
||||
|
||||
/** Rola a página até o destino do fragmento, descontando o cabeçalho fixo (scroll-padding) e a margem do próprio alvo. */
|
||||
function scrollToFragment(target: HTMLElement) {
|
||||
const padding =
|
||||
Number.parseFloat(
|
||||
getComputedStyle(document.documentElement).scrollPaddingTop,
|
||||
) || 0;
|
||||
const margin =
|
||||
Number.parseFloat(getComputedStyle(target).scrollMarginTop) || 0;
|
||||
window.scrollTo({
|
||||
top: Math.max(
|
||||
0,
|
||||
window.scrollY + target.getBoundingClientRect().top - padding - margin,
|
||||
),
|
||||
left: 0,
|
||||
behavior: "instant",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* A chegada (uma por documento): quer o topo, quando a URL não traz fragmento, ou o destino do fragmento, depois
|
||||
* que o layout da home está pronto. Corrige só uma chegada pendente; links comuns e histórico seguem nativos.
|
||||
*/
|
||||
function createArrival(isReady: () => boolean) {
|
||||
const navigation = performance.getEntriesByType?.("navigation")[0] as
|
||||
| PerformanceNavigationTiming
|
||||
| undefined;
|
||||
// A history restoration owns its saved position, not the URL's old fragment.
|
||||
const restoration = navigation?.type === "back_forward";
|
||||
const arrival = !restoration && !arrivalSettled;
|
||||
let pending = restoration ? "" : window.location.hash;
|
||||
let pendingTop = arrival && !window.location.hash;
|
||||
if (arrival) setScrollRestoration("manual");
|
||||
|
||||
const goToTop = () => {
|
||||
pendingTop = false;
|
||||
if (!window.location.hash)
|
||||
window.scrollTo({ top: 0, left: 0, behavior: "instant" });
|
||||
};
|
||||
|
||||
return {
|
||||
/** Aplica o que ficou pendente, se o layout já está pronto. */
|
||||
resolve() {
|
||||
if (!isReady()) return;
|
||||
if (pendingTop) goToTop();
|
||||
if (!pending) return;
|
||||
const hash = pending;
|
||||
pending = "";
|
||||
if (hash !== window.location.hash) return;
|
||||
const target = elementForHash(hash);
|
||||
if (!target) return;
|
||||
focusFragment(target);
|
||||
scrollToFragment(target);
|
||||
},
|
||||
/** O visitante assumiu a rolagem: nada mais é corrigido, e a restauração do navegador volta. */
|
||||
cancel() {
|
||||
pending = "";
|
||||
pendingTop = false;
|
||||
setScrollRestoration("auto");
|
||||
},
|
||||
onKeyDown(event: KeyboardEvent) {
|
||||
if (SCROLL_KEYS.has(event.key)) this.cancel();
|
||||
},
|
||||
/** Clique num link de âncora (o ouvinte é de fragment-nav): sem cancelar a navegação, o foco vai ao destino. */
|
||||
onFragmentClick({ target, hash }: FragmentHit) {
|
||||
pendingTop = false;
|
||||
pending = isReady() ? "" : hash;
|
||||
// Capture before a mobile menu removes its activated link.
|
||||
focusFragment(target);
|
||||
},
|
||||
onHashChange() {
|
||||
pendingTop = false;
|
||||
if (pending && pending !== window.location.hash) this.cancel();
|
||||
if (!isReady()) return;
|
||||
const target = elementForHash(window.location.hash);
|
||||
if (target) focusFragment(target);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** Correct only an outstanding arrival; ordinary links and history keep native scrolling. */
|
||||
export function useHomeFragmentNavigation() {
|
||||
const ready = useRef(false);
|
||||
const resolveArrival = useRef<(() => void) | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const navigation = performance.getEntriesByType?.("navigation")[0] as
|
||||
| PerformanceNavigationTiming
|
||||
| undefined;
|
||||
// A history restoration owns its saved position, not the URL's old fragment.
|
||||
const restoration = navigation?.type === "back_forward";
|
||||
const arrival = !restoration && !arrivalSettled;
|
||||
let pending = restoration ? "" : window.location.hash;
|
||||
let pendingTop = arrival && !window.location.hash;
|
||||
if (arrival) window.history.scrollRestoration = "manual";
|
||||
const arrival = createArrival(() => ready.current);
|
||||
const cancel = () => arrival.cancel();
|
||||
const onKeyDown = (event: KeyboardEvent) => arrival.onKeyDown(event);
|
||||
const onHashChange = () => arrival.onHashChange();
|
||||
|
||||
const resolve = () => {
|
||||
if (!ready.current) return;
|
||||
if (pendingTop) {
|
||||
pendingTop = false;
|
||||
if (!window.location.hash)
|
||||
window.scrollTo({ top: 0, left: 0, behavior: "instant" });
|
||||
}
|
||||
if (!pending) return;
|
||||
const hash = pending;
|
||||
pending = "";
|
||||
if (hash !== window.location.hash) return;
|
||||
const target = fragmentTarget(hash);
|
||||
if (!target) return;
|
||||
focusFragment(target);
|
||||
const padding =
|
||||
Number.parseFloat(
|
||||
getComputedStyle(document.documentElement).scrollPaddingTop,
|
||||
) || 0;
|
||||
const margin =
|
||||
Number.parseFloat(getComputedStyle(target).scrollMarginTop) || 0;
|
||||
window.scrollTo({
|
||||
top: Math.max(
|
||||
0,
|
||||
window.scrollY +
|
||||
target.getBoundingClientRect().top -
|
||||
padding -
|
||||
margin,
|
||||
),
|
||||
left: 0,
|
||||
behavior: "instant",
|
||||
});
|
||||
};
|
||||
|
||||
const cancelArrival = () => {
|
||||
pending = "";
|
||||
pendingTop = false;
|
||||
window.history.scrollRestoration = "auto";
|
||||
};
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
[
|
||||
"ArrowUp",
|
||||
"ArrowDown",
|
||||
"PageUp",
|
||||
"PageDown",
|
||||
"Home",
|
||||
"End",
|
||||
" ",
|
||||
"Tab",
|
||||
].includes(event.key)
|
||||
) {
|
||||
cancelArrival();
|
||||
}
|
||||
};
|
||||
const onClick = (event: MouseEvent) => {
|
||||
if (
|
||||
event.defaultPrevented ||
|
||||
event.button !== 0 ||
|
||||
event.metaKey ||
|
||||
event.ctrlKey ||
|
||||
event.shiftKey ||
|
||||
event.altKey
|
||||
)
|
||||
return;
|
||||
const link =
|
||||
event.target instanceof Element
|
||||
? event.target.closest("a[href]")
|
||||
: null;
|
||||
if (
|
||||
!(link instanceof HTMLAnchorElement) ||
|
||||
link.hasAttribute("download") ||
|
||||
(link.target && link.target !== "_self")
|
||||
)
|
||||
return;
|
||||
const url = new URL(link.href);
|
||||
if (
|
||||
url.origin !== window.location.origin ||
|
||||
url.pathname !== window.location.pathname ||
|
||||
url.search !== window.location.search
|
||||
)
|
||||
return;
|
||||
const target = fragmentTarget(url.hash);
|
||||
if (!target) return;
|
||||
pendingTop = false;
|
||||
pending = ready.current ? "" : url.hash;
|
||||
// Capture before a mobile menu removes its activated link. Do not cancel navigation.
|
||||
focusFragment(target);
|
||||
};
|
||||
const onHashChange = () => {
|
||||
pendingTop = false;
|
||||
if (pending && pending !== window.location.hash) cancelArrival();
|
||||
if (!ready.current) return;
|
||||
const target = fragmentTarget(window.location.hash);
|
||||
if (target) focusFragment(target);
|
||||
};
|
||||
|
||||
resolveArrival.current = resolve;
|
||||
resolve();
|
||||
document.addEventListener("click", onClick, true);
|
||||
resolveArrival.current = () => arrival.resolve();
|
||||
arrival.resolve();
|
||||
const stopClicks = onFragmentClick((hit) => arrival.onFragmentClick(hit));
|
||||
window.addEventListener("hashchange", onHashChange);
|
||||
window.addEventListener("wheel", cancelArrival, { passive: true });
|
||||
window.addEventListener("touchmove", cancelArrival, { passive: true });
|
||||
window.addEventListener("wheel", cancel, { passive: true });
|
||||
window.addEventListener("touchmove", cancel, { passive: true });
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
window.addEventListener("pointerdown", cancelArrival, { passive: true });
|
||||
window.addEventListener("pointerdown", cancel, { passive: true });
|
||||
return () => {
|
||||
resolveArrival.current = null;
|
||||
window.history.scrollRestoration = "auto";
|
||||
document.removeEventListener("click", onClick, true);
|
||||
setScrollRestoration("auto");
|
||||
stopClicks();
|
||||
window.removeEventListener("hashchange", onHashChange);
|
||||
window.removeEventListener("wheel", cancelArrival);
|
||||
window.removeEventListener("touchmove", cancelArrival);
|
||||
window.removeEventListener("wheel", cancel);
|
||||
window.removeEventListener("touchmove", cancel);
|
||||
window.removeEventListener("keydown", onKeyDown);
|
||||
window.removeEventListener("pointerdown", cancelArrival);
|
||||
window.removeEventListener("pointerdown", cancel);
|
||||
};
|
||||
}, []);
|
||||
|
||||
@@ -163,6 +146,6 @@ export function useHomeFragmentNavigation() {
|
||||
ready.current = true;
|
||||
resolveArrival.current?.();
|
||||
arrivalSettled = true;
|
||||
window.history.scrollRestoration = "auto";
|
||||
setScrollRestoration("auto");
|
||||
}, []);
|
||||
}
|
||||
Reference in new issue
Block a user