웹 페이지의 헤더 영역에 시작 및 종료 스크립트 태그를 추가합니다(시작 태그 뒤, 종료 태그 앞). 예를 들면 다음과 같습니다.
시작 및 종료 스크립트 태그 사이에 다음 코드를 추가하고 "myimage.jpg"를 속도 테스트에 사용할 이미지의 파일 이름으로 바꿉니다. imageAddr에 빌드되고 할당된 주소의 "?n=" + Math.random() 부분은 로컬로 캐시된 버전을 사용하는 대신 웹 브라우저가 매번 이미지를 가져오도록 합니다. 파일 크기가 약 200KB인 이미지를 사용하십시오.
스크립트의 다음 줄에 다음 코드를 추가하여 테스트의 시작 시간, 종료 시간 및 다운로드 크기를 저장할 변수를 만듭니다. "downloadSize"를 이미지 파일의 크기(바이트)로 설정합니다.
다음 코드를 추가하여 테스트용으로 다운로드할 이미지를 설정합니다. "다운로드"는 이미지 개체로 설정됩니다. 다운로드 끝을 캡처하는 작업은 이미지 다운로드가 완료되면 활성화되도록 할당됩니다.
속도 테스트 결과를 표시하는 계산 스크립트에 다음 함수를 추가합니다. 먼저 지속 시간을 계산하여 밀리초를 초로 변환합니다. 그런 다음 다운로드 크기를 비트로 변환하고 다운로드 속도를 계산하고 속도를 kbps 및 Mbps로 변환합니다. 마지막으로 결과가 포함된 메시지 상자가 나타납니다.
function showResults() { var 지속 시간 = Math.round((endTime - startTime) / 1000); var bitsLoaded = downloadSize * 8 GO var speedBps = Math.round(bitsLoaded / 지속 시간) GO var speedKbps = (speedBps / 1024).toFixed (2) GO var speedMbps = (speedKbps / 1024).toFixed (2) GO 경고("연결 속도: \n" + speedBps + " bps\n" + speedKbps + " kbps\n" + speedMbps + " Mbps\n") 이동 }
브라우저에서 페이지를 열고 스크립트가 올바르게 작동하는지 테스트하십시오. 테스트 결과와 함께 메시지 상자가 팝업되는 데 몇 초가 걸릴 수 있습니다.
팁
JavaScript는 웹 페이지를 보는 컴퓨터와 테스트에 사용된 이미지를 호스팅하는 사이트 간의 속도를 측정합니다. 자체 웹 사이트에 대한 연결을 테스트하는 경우 자체 웹 사이트에서 이미지를 호스팅하십시오. flickr나 Amazon과 같이 대역폭과 속도가 충분한 사이트에서 호스팅되는 이미지에 주소를 제공하여 일반적인 연결 속도를 테스트합니다.
