JavaScript _ onload vs ready

PNU Quiz의 result페이지에는 로딩바 기능이 있었다.

 

result.html이 띄워질 때

메인 콘텐츠를 숨겨뒀다가 n초 뒤에 나타나게 하고, 로딩바는 n초 뒤에 사라지게 함으로써

유저가 로딩바를 n초 동안 봤다가 메인 콘텐츠를 볼 수 있게끔 만들었다.

 

result.js

해당 코드는 다음과 같다!

얼핏 보기에는 정상적으로 작동하나 싶었는데... 문제 발생.

 

http://127.0.0.1:8000/result/97

'익명 님의 성적표~~'에 해당하는 부분(메인 콘텐츠)은 분명 .hide()를 통해 숨겨뒀다.

하지만 웬걸, result.html이 뜨고 약 0.3초 정도 동안 이 녀석들이 나타나는 게 아닌가!

지금 생각해보면 당연한 일이지만

 

어째서 이런 일이 발생했는지, 어떻게 해결할 수 있는지 알아보자.

---

1. onload() ?

result.js는 window.onload() = "함수명" 으로 시작한다.

처음에는 이것이 단순히 window가 열리면 → 해당 함수를 실행해라 는 뜻인 줄 알았다!

하지만 정말 그렇다면 window가 열렸을 때 .hide()가 작동하지 않은 이유를 설명할 수가 없다.

 

onload의 진정한 의미는... 웹 페이지의 로딩이 끝나는 시점에 실행된다는 뜻이다.

여기서 "웹 페이지의 로딩"이란 페이지 내부의 이미지, 외부 파일 등을 모두 가져왔을 때 를 의미!

 

아니, 로딩 = 페이지 내부 모든 요소 등장 이 아니란 말인가?

 

WebKit main flow

아니다! 보다 자세히 알기 위해서는 브라우저의 작동 과정에 대해 알아볼 필요가 있다.

 

브라우저의 작동 순서는 크게 세 부분으로 나눠진다.

 

1. HTML 파일을 서버로부터 네트워크 통신으로 전달 받음.

2. 외부 CSS 파일과 함께 포함된 스타일 요소 전달 받음. 이때 Stlye Rules를 생성.

3. DOM과 Stlye Rules를 결합한 Render Tree를 생성.

 

먼저 1단계에서 HTML을 Parser를 통해 DOM Tree를 생성한다.

여기서 DOM이란? Document Objectj Model의 약자로 해당 HTML에 대한 간략한 정보만을 담고 있다.

2단계에서는 CSS 정보가 담긴 Stlye Tree를 생성하고,

3단계에서 DOM Tree와 Stlye Tree를 재조합한 Render Tree가 생성되고 배치, 크기, 위치 정보 등이 담겨 display 된다.

 

자 그럼 문제는...

window.onload()의 경우, Render Tree가 몽땅 생성된 후에 작동되는 함수라는 것!

따라서 페이지 display와 함수 작동 사이 약간의 틈이 존재하게 된다.

아하! 그래서 메인 콘텐츠가 한 번 나타난 뒤에(페이지 display), 사라진(함수 작동) 거로구만.

2. ready() !

그럼 어떻게 해야 할까? 우리는 result.html이 보여지자마자 해당 함수를 작동시키고 싶은데.

이를 위해 jQuery에서는 ready라는 함수를 제공한다.

 

이 녀석의 작동 시점은? → DOM Tree가 생성된 직후!!!

따라서 이미지나 외부 리소스의 로딩을 기다리지 않고, HTML의 기본적인 뼈대가 갖춰지자마자 실행된다.

 

result.js

수정된 코드!

 

ready를 사용할 경우 유저 입장에서도 빠르게 페이지의 기능을 사용할 수 있다는 장점이 있다.

또한 동일 페이지 내에서 단 하나만 존재해야 하는 onload와는 달리,

여러 개가 존재해도 괜찮으며 이 경우 작성된 순서대로(위에서 아래로) 함수가 실행된다.