변하는 문서에서 텍스트 구간을 다시 찾는 앵커링
DOM 좌표만으로는 깨지는 하이라이트 복원을 인용문·문맥·위치 selector의 가중 점수와 신뢰 임계값으로 해결하는 방법
Browser 카테고리의 지식 문서입니다.
DOM 좌표만으로는 깨지는 하이라이트 복원을 인용문·문맥·위치 selector의 가중 점수와 신뢰 임계값으로 해결하는 방법
서로 메모리를 공유하지 못하는 확장 프로그램 실행 공간을 메시지 API, runtime 검증, handler 라우팅, 응답 봉투와 변경 알림으로 안전하게 연결하는 방법
한글 입력에서 조합이 끝나기 전 blur·Enter가 값을 확정해 미완성 문자가 저장되는 문제를 이벤트 순서가 아니라 조합 상태로 해결하는 원리
네이티브 앱 같은 로딩 스플래시를 첫 페인트부터 띄우되 크롤러엔 숨기려면, SSR 마크업이나 UA 분기가 아니라 body 최상단 인라인 블로킹 스크립트로 노드를 주입한다. UA 게이트가 정적 캐시를 깨는 이유
LCP가 느린데 이미지가 작고 TBT가 0에 가까우면 병목은 다운로드가 아니라 LCP 요소가 클라이언트 컴포넌트라 hydration이 페인트를 막는 것이다. 진단과 서버화 처방
createObjectURL을 useMemo에서 만들고 useEffect에서 revoke하면 생기는 간헐 이미지 깨짐과, 서버 프록시 이미지는 직접 URL로 렌더해 레이스를 원천 제거하는 패턴
오프라인 셸(offline shell) 폴백을 모든 요청에 걸면 이미지·API 실패에 HTML을 반환해 <img>가 깨지고 캐시가 오염된다. 셸 폴백은 request.mode가 navigate인 문서 요청에만 건다
CSS duration 리셋만으로는 JS 스프링·Observer 기반 페이지 전환이 꺼지지 않으므로 matchMedia로 명시 게이트하는 패턴
비동기 캐시 삭제와 stale-while-revalidate가 겹칠 때 generation으로 늦게 끝난 요청의 재저장을 막는 패턴
Canvas 2D 그래프 노드의 색·반짝임을 ID 해시로 안정화하고, globalAlpha·shadow 상태를 복구하는 패턴
Service Worker Cache Storage에서 캐시를 즉시 반환하고 백그라운드로 최신화하는 SWR 패턴과 용량·보안 주의점
animation-timeline view()와 animation-range entry로 스크롤 진입 fade/slide를 JS 없이 만드는 패턴
optional display로 late webfont swap을 막아 태그·본문 layout shift(CLS)를 줄이는 타이포 전략
커스텀 드래그·리사이즈를 모바일에서 안정화하는 pointercancel, touch-action, coarse-pointer hover 폴백
React commit은 자식 DOM부터 붙이므로 자식 useLayoutEffect 시점에 조상 ref가 null일 수 있다 — 조상 DOM 부수효과는 useEffect로 미룬다
position:fixed 앵커에 1회만 측정한 좌표로 붙인 팝오버·툴바가 스크롤 후 텍스트에서 떨어지는 원인과 scroll/resize 재측정 패턴
텍스트 선택 기반 플로팅 툴바를 mousedown/mouseup 게이트 대신 selectionchange로 구동하는 이유와 하이브리드 에디터 소유권 패턴
리치텍스트 엔진이 focus 중 Mod-Z/Y를 preventDefault할 때 chainCommands로 document undo에 명시 위임하는 패턴
CJK IME composition session과 contenteditable/React 에디터에서 commit defer·mount-once로 조합 깨짐을 막는 원리
브라우저 네이티브 드래그 세션 API로, OS 드래그 루프와 DataTransfer를 통해 서브트리 경계를 넘는 이동을 구현한다
user-select:none은 드래그 선택을 막을 뿐 Selection/클립보드에서 텍스트를 완전히 제외하지 않으며, 제외하려면 CSS generated content가 더 안전하다
로딩 스켈레톤이 최종 UI와 다른 공간을 점유할 때 CLS가 발생하는 원인과 높이·폭 예약 처방
개발 서버 trace의 outlier를 피하고 N회 median으로 before/after를 비교하는 실험 설계
Lighthouse Performance 점수, 카테고리 audit, Chrome trace ms가 서로 다른 계측임을 구분하는 방법
브라우저가 HTML·CSS·JS를 받아 첫 화면 픽셀을 그리기까지 거치는 단계와, 그 경로를 짧게 만드는 방법