홈 재생이 첫 방문에 멈추던 이유

parsemo.app 홈의 제목 아래 창은 주문서 읽기가 예시 거래명세서를 읽은 실제 실행을 다시 재생합니다. 응답이 도착한 간격 그대로 표가 채워집니다.

이 창에는 규칙이 하나 있습니다. 페이지를 연 뒤 1.1초 안에 재생 준비가 끝나지 않으면, 재생하지 않고 완성된 표를 그대로 둡니다. 이미 보이는 표를 읽는 사람 앞에서 지우고 다시 채우지 않기 위해서입니다.

무엇이 문제였나

2026-11-06 오전에 재생 창을 주문서 읽기 기록으로 바꿔 배포한 뒤, 처음 방문하면 재생 없이 완성된 표만 보이는 경우가 있었습니다. 측정해 보니 재생에 필요한 파일 여섯 개를 한꺼번에 받지 않고 네 번에 나눠 차례로 받고 있었습니다.

1. 재생 코드(replay.js)를 받고 나서야 그 코드가 가져오는 화면 코드를 알게 됩니다.
2. 화면 코드를 받고 나서야 주문서 읽기에서 가져온 모듈 세 개를 알게 됩니다.
3. 그 모듈을 다 받고 나서야 실행 기록을 요청합니다.

한 단계마다 네트워크를 한 번 왕복하므로, 느린 연결에서는 준비가 1.1초를 넘겼습니다.

고친 방법

빌드가 페이지를 만들 때, 스크립트가 가져오는 모듈을 끝까지 따라가 모두 modulepreload로 미리 받게 하고, 실행 기록도 preload로 함께 받게 했습니다. 브라우저는 페이지를 읽자마자 여섯 파일을 동시에 요청합니다. 2026-11-06 10:22에 배포했습니다(배포 ID bba9a862).

측정 (2026-11-06)

고치기 전 버전과 지금 버전을 각각 빌드해 같은 조건으로 다섯 번씩 열었습니다. 조건은 Chrome, 화면 폭 1440, 캐시 없음, 응답 지연 150ms, 내려받기 1.5Mbps입니다. 시간은 페이지를 열기 시작한 때부터 잰 값입니다.

이 측정은 로컬 환경에서 연결 속도를 낮춰 잰 것이라 실제 방문자의 연결과는 다릅니다. 같은 조건에서 고치기 전과 후를 비교한 값입니다.

같은 날 오후에 고친 뒤 버전을 같은 조건으로 15번 더 열었을 때는 1.01~1.07초에 재생이 시작됐습니다. 15번 모두 재생됐지만 1.1초 한계에 가깝습니다. 이보다 느린 연결에서는 재생 대신 완성된 표가 보일 수 있습니다.

남긴 것

• 1.1초 규칙은 그대로 둡니다. 준비가 늦으면 재생 대신 완성된 표가 보이므로, 느린 연결에서도 빈 화면은 나오지 않습니다.
• 재생 창을 바꿀 때는 이벤트 개수만 세지 않고, 첫 방문 시간과 블록 위치까지 잽니다.

바뀐 내용은 변경 기록에 날짜와 배포 ID로 남깁니다.