소스코드리뷰(IX) 불필요한 주석을 빼라

어느 인터넷 사이트가 내용이나 그래픽도 별로 없으면서 갱신 속도가 매우 느리다는 것을 보고서 HTML소스를 열어 보았다. 군데 군데가 10줄 이상의 줄바꿈 처리가 많고 HTML용 주석(커멘트, comment)인 "<!-- comment -->"가 잔뜩 들어있었는데 정작 HTML 내부 요소(element)는 없는 것이다. 그리하여 전체가 수천줄이나 되는데 대부분은 비표시 요소이다. 게다가 자바스크립트(Javascript)도 잔뜩 포함되어 있었다.

웹사이트이니까 스크립트 언어로 웹페이지를 구성했을 것이고 모르긴 해도 스크립트를 디버그하기 위하여 요소 앞에 HTML용 주석을 추가했을 것으로 짐작된다. 그러나 이러한 페이지는 설계적 결함이라기 보다는 제조적 결함이다. 브라우저가 해석하지 않는 HTML 주석문과 공백글자, 개행문자는 가급적 서버가 출력하지 않도록 주의를 기울여야 한다.

요새는 클라이언트 단말기의 성능이 많이 발전했으므로 이 정도의 제조적 결함은 눈감아 줄수 있다고 생각하지 말아야 한다. 안일한 생각이 더 큰 결함을 가져오기 때문이다.

제조적 결함이 가져오는 영향

• 불필요한 통신량의 증가
• 웹페이지의 갱신 속도 저하(사용자의 비용 부담 증가)
• 웹서버의 부하 증가로 인한 웹서버의 수명 단축

(튤립: 피부과 병원 앞의 튤립꽃. 튤립은 낮기온이 일정 온도(대략 20도) 이상 올라가면 봉우리가 열리고 일정 온도 이하에서는 봉우리가 닫힌다. 튤립은 기온에 최적화된 아름다움을 가지고 있다.)

HTML 디버그용 주석은 디버그시에만 출력하라

디버그를 위해 HTML주석을 페이지에 남겨두고자 하는 발상이  초보적인 발상이다. 디버그용 문자열이라면 디버그중일 때만 표시되도록 주석문의 표시 계기를 바꾸어야 한다.

예를 들어, 서버용 스크립트가 ASP이라면

If isDebugMode Then
    Response.Write("<!-- " & S & " -->")
End If

자바스크립트와 스타일시트는 HTML과 분리하라

브라우저는 한번 읽어들인 페이지를 캐시에 남겨 두고 페이지 갱신 속도를 높이는 기능이 있다. 자세한 알고리즘은 브라우저 마다 독자기술이 있겠지만 단말 내의 캐시파일과 서버상의  대상 파일의 작성시각(Time stamp)를 비교하여 다운로드를 결정하는 방식이 가장 단순하게 적용할 수 있는 방법일 것이다. 자바스크립트와 스타일시트를 HTML소스페이지와 따로 분리하게 되면 변경되지 않은 파일에 대해서는 다운로드 횟수가 감소하므로 클라이언트에서 볼 때는 쾌적한 웹페이지가 되고 서버의 물리적 수명은 안정적이 될것이다.

물론 자바스크립트와 스타일시트를 분리해서 개발하는 것이 재활용을 위한 유용성이 높기 때문에 HTML소스와 분리하는 것이 더 장점이 많은 것은 말할 나위도 없다.