[navbar]완성 - script구문은 /body태그 위에...



문제의 장면들이다.


현재는 body가 끝나는 지점에 script태그를 넣어서 제대로 작동이 되고 있는 것을 확인하였다.


그렇지만 왜 body가 시작하는 지점에 script태그를 넣었을 때는 왜 안되는지 아직도 이해를 못하겠다.


물론 아래와 똑같은 구문을 저 지점에 넣었을때도 실행은 안되었었다.



실제로 현재 body태그 아래에 있었던 Jquery구문이다.


이 구문은 정상적으로 작동을 하고 있다.


저 .btn_cate의 click부분만 .btn_top.click아래 부분에 추가해보기도 했지만 위의 함수들은 잘 작동하는 것에 반해 내가 원하는 구문은 정상적으로 실행되지 않았다.


그 이유를 찾기 위해 DOM구조라든지 브라우저가 html파싱하는 과정을 다 읽어보았는데도 여전히 풀리지 않는 의문이다.


body위쪽에 script를 넣는것과 아래쪽에 넣는것의 차이를 찾으면 나오는 것은 전부 브라우저가 페이지를 파싱하는 퍼포먼스차이 밖에 없다는 말 밖에 안나온다.


설마 window.onload라든지 document.ready구문이 없어서 인가 싶어서 넣어도 봤는데 위쪽에 넣었을 때는 여전히 안되고 아래쪽에 넣었을 때는 여전히 되었다.


여러가지에 관해 찾아본 결과 해당 JQuery가 DOM을 다루는 구문인가라는 것이 중요한 부분이었다.


내가 짠 코드는 button을 클릭했을 때 div태그에 새로운 class를 붙이는 DOM을 다루는 구문인 것에 반해


원래 있던 코드는 그저 스타일적인 변화만 주는 DOM을 안 다루는 구문인 것이다.


그래서 내가 위쪽 body에 script를 넣으면 DOM이 전부다 렌더링이 되기전에 Jquery구문이 읽히기 때문에 제대로 로드가 안된 것이다.


결론 - DOM을 다루는 구문은 렌더링이 전부 끝난 뒤에 로드할 수 있도록 body 맨 끝쪽에 넣는 것이 좋다.

       + script구문은 아래쪽에 넣는것이 퍼포먼스적으로도 더 좋다.





ps. script태그를 위쪽에 넣을때와 아래쪽에 넣을 때의 차이에 관해 알고 싶다면


https://stackoverflow.com/questions/4396849/does-the-script-tag-position-in-html-affects-performance-of-the-webpage


에 가면 좋은 댓글들을 많이 볼수 있을 것이다.

더보기

댓글

MathGrammer

하고싶은거 공부하고 하고싶은거 하는 사람의 블로그