문제의 장면들이다.
현재는 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태그를 위쪽에 넣을때와 아래쪽에 넣을 때의 차이에 관해 알고 싶다면
에 가면 좋은 댓글들을 많이 볼수 있을 것이다.
'코딩 > Web' 카테고리의 다른 글
[navbar]하다하다 안되서 잠시 중단. (0) | 2017.08.02 |
---|---|
[navbar]목표 또 변경 ㅋㅋㅋ (0) | 2017.07.28 |
[navbar]일단 대카테고리를 띄우는 것까지. (0) | 2017.07.26 |
[사이드바]navbar로 변경 (2) | 2017.07.23 |
[사이드바]제작기 1 (0) | 2017.07.23 |
댓글