ASP 프로그래머라면 웹 응용 프로그램 성능 향상의 중요성을 의심하지 않을 것입니다. 프로그램을 더 빠르게 실행하기 위해 데이터베이스나 COM 구성 요소를 최적화하느라 바빴을 수도 있습니다. 이 모든 작업을 수행했다면 브라우저에서 최종 생성된 HTML 코드의 표시 속도를 높여 성능을 향상시키는 것에 대해 생각해 본 적이 있습니까? 최종 사용자에게는 페이지가 더 빨리 표시될 수 있다면 더 많은 칭찬을 받을 수 있습니다.
브라우저에 HTML이 표시되는 속도를 향상시키는 것은 잘 알려지지 않은 몇 가지 기술을 통해 달성할 수 있습니다.
1. 테이블 중첩을 사용하시겠습니까?
페이지에 복잡한 구조를 설정하려면 일반적으로 페이지에 HTML 테이블을 배치하면 됩니다. 다음과 같은 페이지를 생성하려는 경우: 이 페이지에는 상단 탐색 모음, 왼쪽 탐색 모음 및 오른쪽 콘텐츠 영역이 있습니다. 두 개의 행과 두 개의 열이 있는 큰 테이블을 사용하여 이를 만들 수 있습니다. 첫 번째 행에서 두 열을 병합하고 상단 탐색 모음을 삽입합니다. 두 번째 행의 왼쪽 열에 탐색 버튼을 표시할 테이블을 삽입합니다. 오른쪽 열에는 실제 내용을 표시하는 표를 배치합니다. (그림 1 참조) 이러한 중첩 테이블에 의해 생성된 코드는 다음과 같습니다.
<TABLE BORDER="0">
<TR>
<TD COLSPAN="2"><!-- 상단 탐색 표시줄 콘텐츠 --></TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- 왼쪽 탐색 모음 콘텐츠 --></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- 페이지 본문 내용 --></TD>
</TR>
</TABLE>
그러나 실제로는 브라우저가 <TABLE> 태그를 찾았을 때 해당하는 닫는 태그인 </TABLE>을 찾지 않으면 해당 페이지를 화면에 즉시 표시하지 않습니다. 따라서 전체 페이지가 테이블에 있는 경우 마지막 </TABLE>이 수신될 때까지 아무 것도 표시되지 않습니다. 이러한 방식으로 전체 파일이 다운로드될 때까지 페이지는 사용자에게 표시되지 않습니다. 페이지 데이터의 양이 비교적 큰 경우(예: 검색 엔진 검색 결과) 이 기능을 사용하면 일시적으로 일시 중지됩니다. 이러한 상황을 방지하기 위해 제작 중에 페이지를 여러 개의 작은 테이블로 나눌 수 있습니다. 각 <TABLE>에서 해당 </TABLE>까지의 HTML 코드가 다운로드되면 브라우저에 표시됩니다. 방문자의 관점에서 볼 때 페이지는 부분적으로 점진적으로 나타나고 화면에 점점 더 많이 나타납니다. 전체 파일을 다운로드해서 다시 표시하는 것보다 이런 페이지의 표시 속도가 더 빠른 것 같은 느낌이 듭니다.
이전 예제를 연구하기 위해 이 원칙에 따라 페이지의 전체 큰 테이블을 세 개의 별도 테이블로 나누어야 합니다. 첫 번째 테이블을 사용하여 상단 탐색 모음을 표시하고, 모든 내용을 담을 수 있을 정도로 너비를 조정한 후 <TABLE></TABLE> 블록에서 완성합니다. 페이지 하단에는 왼쪽에서 두 번째 테이블이 늘어서 있습니다. 실제 콘텐츠를 보관하려면 세 번째 테이블을 사용하세요. (그림 2 참조) 각 부분은 완전한 테이블이므로 코드의 각 부분은 다운로드 후 즉시 표시됩니다. 이렇게 하면 상단 및 왼쪽 탐색 모음이 페이지의 나머지 부분보다 더 눈에 띄게 됩니다. 사용자는 이때 페이지가 다운로드를 시작하고 곧 화면에 표시될 것이라고 상상할 것입니다. 이는 사용자가 오랜 시간 동안 빈 화면을 보게 하는 것보다 훨씬 낫습니다.
수정된 코드는 다음과 같습니다.
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP"><!-- 상단 탐색 모음 콘텐츠 --></TD>
</TR>
</TABLE>
<테이블 테두리="0" ALIGN="왼쪽">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- 왼쪽 탐색 모음 콘텐츠 --></TD>
</TR>
</TABLE>
<테이블 테두리="0">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- 페이지 본문 내용 --></TD>
</TR>
</TABLE>
2. 다른 태그도 닫아야 합니다.
위의 예에서는 <TABLE> 태그를 먼저 닫으면 브라우저에서 페이지가 더 빠르게 표시되도록 할 수 있습니다. 비유하자면, 동일한 특성을 가진 유사한 태그가 있습니다.
예를 들어 목록 상자와 콤보 상자에는 <OPTION> 태그를 생성하고 목록 항목에는 <LI> 태그를 생성합니다. 일반적으로 ASP 프로그래머는 데이터베이스에 액세스하여 <OPTION>을 통해 생성된 목록 상자나 콤보 상자에 데이터를 보냅니다. 이때 코드에 닫는 <OPTION> 태그를 작성하면 페이지 표시가 더 빨라질 수도 있습니다. 브라우저에서.
다음과 같은 코드를 사용하지 마십시오:
Do while not objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") &_""">"& _objRS("제품 이름")
objRS.MoveNext
Loop
Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
다음과 같은 코드를 사용하려면:
do while not objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("제품 이름") & "</OPTION>"
objRS.MoveNext
Loop
Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
다음과 같은 코드는 사용하지 마세요:
<UL>
<LI>사과
<LI>오렌지
<LI>바나나
</UL>
다음과 같은 코드를 사용하세요:
<UL>
<LI>사과</LI>
<LI>오렌지</LI>
<LI>바나나</LI>
</UL>
이제 브라우저에서 페이지가 더 빨리 표시되는지 살펴보십시오.
ASP 응용 프로그램의 성능을 향상시키는 데 있어서 이러한 변경의 중요성을 과소평가하지 마십시오. 아마도 "팁과 팁" 유형의 책이나 온라인 자료에서 프로그램 실행 속도를 높이기 위해 HTML 코드를 최적화하는 방법에 대한 언급은 거의 없습니다. 그러나 실제로 이러한 기술을 적용하면 프로그램 성능이 크게 향상될 수 있습니다.