프론트 개발을 하며 $(document).ready나 $(window).load를 사용하였는데 (또는 사용하지 않았거나..)
상황에 따라 함수를 못찾는 오류를 만나서 이번 기회에 정리하려고 한다.
먼저 브라우저가 웹 페이지를 로딩하는 순서를 알아야 한다. 아래와 같이 간단한 웹 페이지가 있다고 가정하고 어떤 순서로 웹 페이지가 로딩하는지 알아보자.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="test.css"></link>
<style> h1 { color: red; } </style>
<script>
$(document).ready(function() {
alert("문서 준비 완료");
});
</script>
</head>
<body>
<div>웹 페이지 로딩 순서 테스트</div>
<script src="abc.js" type="text/javascript"></script>
</body>
</html>
function test() {
alert("테스트입니다.");
}
//http://www.troh.com/index.html
HTML 렌더링 과정.
불러오기
서버로부터 전달받은 index.html 을 스트림으로 읽는 과정. 읽으면서 어떤 파일인지, 다운로드해야 하는지 결정.
예를 들어 jquery.js 를 읽는 경우, 다운로드 해야하는 상황이라면 다운로드 완료 후 다음으로 넘어간다.
파싱
웹 엔진이 가지고 있는 html/xml 파서가 DOM Tree를 생성한다.
렌더링 트리 만들기
DOM Tree는 자바스크립트에서 접근하는 DOM 객체를 쓸 때 사용하는 트리이고 그리기위한 별도의 트리를 생성해야하는데 이것이 렌더링 트리이다.
CSS 결정
태그에 적용될 스타일을 결정한다.
레이아웃
렌더링 트리에서 위치나 크기를 가지고 있지 않기때문에 이러한 정보를 부여하는 과정.
그리기
렌더링 트리를 탐색하면서 그림.
- 위와 같은 렌더링 과정을 살펴보면 css는 상단, js파일은 하단에 위치시키는 것이 좋다. DOM Tree를 생성하더라도 렌더링 트리가 생성되지 않았다면 화면에 그려지지 않는다. css를 상단에 작성하여 렌더링 트리를 생성하고 DOM Tree가 만들어지는 과정마다 그려지도록 해야 한다. 또한 불러오기 과정 상단에서 js파일을 읽게된다면 해당 js파일을 모두 다운로드하기 전까지 다음 과정은 진행되지 않는다. js파일이 크다면 사용자 입장에서는 웹페이지가 느려보이게 되는 것이다.
jQuery Document.ready()와 Window.load()의 실행순서
$(document).ready() 의 경우 외부 리소스, 이미지와 상관없이 DOM Tree가 생성되면 호출된다. 반면에,
$(window).load()의 경우는 화면에 필요한 모든 요소들이 화면에 모두 그려진 다음에 실행된다.
[ 참고 ]