본문 바로가기

javascript/jQuery

[jQuery] .ready() 메소드 최적화


.ready() 메소드는 window.onLoad 이벤를 대체하는 것 뿐만 아니라 페이지가 다 로드되지 않았더라도, DOM이 다 로드되었다면 jQuery/javascript 이벤트등을 실행 시킬 수 있다.


[jQuery] jQuery Basic, 간단한 jQuery 기본 코딩 의 소스 코드 참조.


위의 형태처럼 스크립트를 코딩하면 DOM로드시 페이지로드에 상관없이 이벤트를 발생시킬 수 있다.


사실 여기서 위의 .ready() 메소드는 페이지의 문서 상 가장 위쪽<head> 요소 안에 놓여있는 경우에만 필요하다. 

위의 소스에서 페이지의 로드를 빠르게 하기 위하여 모든 자바스크립트와 인라인 코드를<body>요소의 닫는 태그 앞에 둘 수있다.  이때는 .ready() 메소드는 사실 필요가 없다.

(때문에 .ready()메소드 최적화란 제목은 사실상 올바르지 않다)


변경된 소스.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery demo</title>
		
		<!--css style-->
		<style> 
			a.test {
				font-weight: bold;
			}
		</style>
	</head>
	<body>		
		
		<a href="http://jquery.com/">jQuery</a>		
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<!--jquery 로드-->		
		<script>			
				$("a").click(function(event) {
					
					$("a").addClass('test');
					
					alert("더이상 jQuery 홈페이지로 연결하지 않습니다.");
					
					$("a").removeClass('test');
					
					event.preventDefault();
					
					$('a').hide("slow");
				});
		</script>
	</body>
</html>

위의 jQuery 소스에서 ready()메소드로 감싼 부분이 사라졌으나.

동작은 동일하게 동작 한다.



위의 소스가 페이지 로드가 더 빠르다는 것엔 두가지 이유가 있다.


첫째, 최근으 최적화 기술은 자바스크립트가 페이지의 끝부분에서 브라우저에 의해 로드되는 경우 페이지의 로드가 더 빨라진다고 한다. 실제로 소스 앞부분에 자바스크립트 소스가 있다면, 자바스크립트 소스의 컴파일이 되는 동안 페이지이 로딩을 중단하기 때문에 페이지 로딩이 느려진다.


둘째, 많은 양의 소스코드보다 적은양의 소스코드가 로딩이 빠르다. 실제 위의 소스에서 ready()메소드가 사라짐으로 코드의 양이 적어졌다.



참고문헌 : 실전 jQuery쿡북 (O'Reilly, Bj퍼블릭)