배경
이전에는 로그 데이터를 실시간으로 업로드하기 위해 다음과 같은 방법을 사용했습니다.
- 데이터를 전송하기 위해 동기식 XMLHttpRequest를 시작합니다. 또는 GET 요청 또는 헤드 요청
- img 요소를 생성하고 src를 설정합니다. 대부분의 사용자 에이전트는 이미지를 로드하기 위해 문서 언로드를 지연합니다.
- 몇 초 동안 작동하지 않는 루프를 만듭니다.
Img는 이전 프로젝트에서 데이터를 보고하는 데 자주 사용되었습니다.
- 도메인 간 제한이 없으며 도메인 간 GET 요청은 특별한 처리 없이 직접 보낼 수 있습니다.
- 호환성이 좋습니다. 일부 정적 페이지에는 스크립트가 비활성화되어 있어 스크립트 태그를 사용할 수 없습니다.
- img 태그의 장점은 문서에 추가할 필요가 없다는 점이며, 요청을 성공적으로 시작하려면 src 속성만 설정하면 됩니다.
Navigator.sendBeacon()을 권장합니다.
https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
이미지의 src와 비교할 때 이 방법은 더 많은 장점이 있습니다.
- 리소스에 대한 기본 비즈니스 코드와 경쟁하지 않지만 브라우저가 유휴 상태일 때 전송됩니다.
- 또한 페이지 새로 고침 및 점프를 차단하지 않고 페이지가 언로드될 때 요청이 성공적으로 전송되도록 할 수 있습니다.
- 현재 추적 모니터링 도구는 일반적으로 sendBeacon을 먼저 사용하지만 브라우저 호환성으로 인해 여전히 이미지의 src를 사용해야 합니다.
localStorage 임시 저장소
또한 localStorage를 통해 데이터를 임시 저장했다가 브라우저가 유휴 상태일 때 업로드할 수도 있으며, 업로드에 성공하면 로컬 데이터가 삭제됩니다.