| 페이지 전송속도 | Go to Source |
모든 사용자가 빠른 전용선을 가지고 있다면 속도라는 테마가 아니 절박함이 좀 덜할것입니다. 하지만, 아무리 전용선이나 모뎀이 빨라지더라도 이 문제는 인터넷과 인터넷의 그림자가 아닐까 생각해 봅니다. 그때가 되면 또 다른 욕구가 생기지 않을까요? 뗄레야 뗄 수가 없는 문제일것입니다.
그러므로 제한된 환경에서 가능한 모든 방법을 동원해야 합니다.
첫째로는 덩치가 큰 이미지나 실행속도가 늦은 Java Applet을 가능한 한 사용을 피해야 합니다. 그리고, 많은 내용을 가지고 있는 페이지에서 전체 문서를 table로 도안할 때 여러 table로 따로따로 만드는 것이 출력되는 체감속도가 빠릅니다. 브라우저에 따라서 table이 가지고 있는 모든 내용을 다 받고 내용을 보여주므로 한 페이지가 넘어가는 페이지에 table을 사용할 때는 여러 table로 나누는 것이 보이는 속도가 빠릅니다.
둘째는 CSS로 이미지로 할 수 있는 효과를 모방하는 것입니다. CSS에는 글자들을 다루는 많은 attribute가 있습니다. 비록 버젼4의 브라우저에서 사용할 수 있고 품질은 이미지에 미치지 못하지만, 이미지가 할 수 있는 효과를 비슷하게 낼 수 있습니다. border나 background-image를 사용하면 아주 적은 이미지로도 큰 이미지같은 효과를 낼 수 있습니다.
셋째는 이미지를 페이지에 보여줄 때, 브라우저는 cache를 먼저 읽는다는 것을 이용합니다. 즉, 가져올 이미지가 먼저 한번 출력된 적이 있는 이미지라면 그것을 브라우저의 cache에서 그 이미지를 가지고 옵니다. 직접 서버에서 가져오는 것보다 훨씬 빠릅니다.
가능한 같은 이미지를 사용하면 다른 페이지에서도 cache에 저장되어 있는 이미지를 사용하므로 속도가 빨라집니다.
어떤 페이지에 같은 이미지가 5개가 있을 때 5개 모두를 출력합니다. 하지만, 이 이미지가 전 페이지에서 출력된 적이 있다면 이 이미지는 cache에 저장이 됩니다. 그래서 다음 페이지에서 이 이미지를 5개 모두 출력해도 5개의 이미지는 모두 cache에서 가져옵니다. 그래서, 출력속도가 빠릅니다.
다른 이미지를 빨리 가져오기 위해서는 페이지나 레이어에게 이미지를 출력해 주어야 합니다. 어떤 페이지를 다 출력하고 나서 숨은 프레임이나 레이어에게 이미지를 출력하게 합니다. 여기에 다음 페이지에서 사용할 이미지를 넣어둡니다. 그리고 처음 페이지에서 링크로 다른 페이지를 부르면 다른 페이지에서는 숨은 프레임이나 레이어에 출력된 적이있는 이미지를 사용하므로 속도가 빨라질 수 있습니다.
주로, 페이지의 body 택의 load 이벤트로 이것을 할 수 있습니다.
<script>
function cacheLoad() {
parent.hiddenFrame.document.img1.src = "다음페이지에서 사용할 이미지1.jpg"
parent.hiddenFrame.document.img2.src = "다음페이지에서 사용할 이미지2.jpg"
parent.hiddenFrame.document.img3.src = "다음페이지에서 사용할 이미지3.jpg"
parent.hiddenFrame.document.img4.src = "다음페이지에서 사용할 이미지4.jpg"
}
</script>
</head>
<body onLoad="cacheLoad()">
로 현재의 페이지는 다 출력된 후 다른 프레임 페이지에 이미지를 미리 가지고 옵니다. 이 이미지들은 cache에
저장이 됩니다. 숨은 프레임에 있어야할 html은
<body> <img src="1x1.jpg" name="img1"> <img src="1x1.jpg" name="img2"> <img src="1x1.jpg" name="img3"> <img src="1x1.jpg" name="img4"> <body>입니다. 가로세로 1 pixel의 아주 작은 이미지들입니다. 이 이미지들을 다음 페이지에서 사용할 이미지들로 바꾸어 줍니다. width, height는 가져올 이미지의 크기에 맞게 지정하는 것이 좋습니다. 사용자가 현재의 페이지에 머물어 있는 시간동안 이미지들을 가지고 옵니다. 다음 페이지에서는 이들 이미지를 사용할 수 있으므로 속도가 빨라집니다.
여기서 한 가지 주의할 것은 nn의 경우 각 프레임이 출력되는 순서가 일정하지 않다는 문제가 있어서 cacheLoad 함수를 한 가지 조정해야 합니다. 이 문제를 해결한 cacheLoad 함수의 코드입니다.
function cacheLoad() {
if( !parent.hiddenFrameLoaded ) setTimeout("cacheLoad()", 1)
else {
parent.hiddenFrame.document.img1.src = "다음페이지에서 사용할 이미지1.jpg"
parent.hiddenFrame.document.img2.src = "다음페이지에서 사용할 이미지2.jpg"
parent.hiddenFrame.document.img3.src = "다음페이지에서 사용할 이미지3.jpg"
parent.hiddenFrame.document.img4.src = "다음페이지에서 사용할 이미지4.jpg"
}
}
그리고 숨은 프레임에서 <body onLoad="parent.hiddenFrameLoaded=true"> 를 frameset를 지정한
head택의 외부변수 hiddenFrameLoaded=false에 true를 지정해 줍니다.
frameset를 정의한 페이지의 head 택의 JavaScript코드는 가장 먼저 실행을 하므로 숨은 프레임이 다 출력된 것을 확인할 때까지 cacheLoad() 함수를 호출하고 출력이 되어 hiddenFrameLoaded=true가 지정되면 else 문의 이미지를 바꾸어 줍니다.
기본적인 속도를 높이는 기법은 페이지가 출력된 후 사용자가 페이지에 머물러 있는 시간을 이용합니다.