HTML elements의 SRC에 빈 값을 넣지 말자!

호출된 URL을 가지고 PV를 집계하는 솔루션이 있습니다.

그런데 어느 날 부터 모바일의 특정 페이지 PV가 평상시의 세배 이상으로 증가했습니다. 아무리 원인을 찾아봐도 3배로 증가할 외부적인 요인이 없었습니다. 팀장님께서 혹시 img태그나 script태그의 SRC에 빈문자열이 들어가있는지 확인해보라고 하셨습니다. 크롬에서 콘솔을 열고 jQuery를 이용하여 찾아봤지만 그런것은 없었습니다.

피들러를 이용해서 한번 호출시에 여러번 URL을 호출하는지 확인해보았지만 그런 것도 없었습니다. 참 답답했습니다.

그런데 이미지의 크기를 변경시키는 스크립트 함수 중에서 이미지 URL을 사이즈 별로 계산하여서 SRC에 삽입하는데, 생각보다 빈 문자열이 되는 상황이 많았습니다. 그 부분이 가장 의심스럽긴 하지만 피들러로도 안잡히고, 크롬 네트워크 탭에서도 안잡히니까 이 부분이 원인이다 단정지을 수 없었습니다. 그래서 우선 그부분을 수정하여 배포했는데, 정상 수치로 돌아오더군요.....

watch라는 툴로 잡으면 이상 URL 호출이 잡혔을지 모르겠지만, 모바일 페이지라서 내 피시의 IE8로는 확인할 수 없었습니다. 

아무튼 정리하면, 태그의 SRC에는 당연히 빈 문자열을 삽입하면 안되고, 스크립트로 SRC에 이미지 주소를 삽입한다면 입력받는 값이 빈값이면 삽입이 안되도록 처리하면 될것 같습니다. 이상입니다.

/** * 위의 사례 예시 */ var changeImageSize = function (imgSize) { var img = document.getElementsByClassName('myimg'); var imgSrc = img.getAttribute('data-img-src').replace('200', imgSize); // img.src = imgSrc 하게 되면 imgSrc가 빈 문자열일 경우에도 img.src에 삽입된다. if ( imgSrc ) { img.src = imgSrc; } }

< 참고 자료 > : 

Empty image src can destroy your site

ps. 아직 해석이 안되서 뭔말인지는 잘 모르겠어요 ;;;