태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


* 자바스크립트로 DOM element의 넓이를 구할 때 단순히 아래와 같이 하면 제대로 적용이 안되는 경우가 있다.

<html>
<style>
  .myStyle {width: 400px;}
</style>
<body>
  <div class="myStyle"></div>
</body>
<script>
  console.log(document.querySelector(".myStyle").style.width); // ===""?
</script>
</html>


: 위와 같은 경우 브라우져상에서 실제로 보이는 width는 .myStyle로 인해 400px로 나와있지만, 9번째 줄에서 element에 접근하여 style의 width를 출력해보면 빈칸으로 나오게 된다. 왜냐하면 이 div의 width는 css의 클래스로 설정된 width이기 때문에, element 자체의 style안에는 width 값이 없기 때문이다. 이럴 때 DOM을 브라우져에 랜더링된 실제 넓이를 구하는 방법은 다음과 같다.

  console.log(window.getComputedStyle(document.querySelector(".myStyle")).width); // === "400px"

: DOM 에 나와있는 실제 계산된 스타일을 구하는 방법은 바로 window.getComputedStyle(element) 함수를 이용하면 된다. 인자로는 element를 넘겨주며, 결과로 브라우져에서 계산된 스타일을 계산해서 넘겨주게 된다. IE 같은 경우는 위의 함수가 없고, element.currentStyle로 접근을 하면 된다.


* 팁: 위처럼 간단한 작업이라면 DOM을 뒤지는 것보다, jQuery의 $를 쓰는것보다 querySelector를 사용하는것이 더 빠르므로 자주 이용하자! (물론 DOM에 접근하는 것 자체가 성능상 매우 안 좋은일이기는 하지만..)


끝.

저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • 고양이 2017.03.17 01:33 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 검색하다 들려서 좋은정보를 얻어갑니다. 그런데 마지막글에 DOM에 접근하는 것 자체가 성능상 안좋다는 말은 어떤이유에서 인가요? JavaScript를 사용하는 웹이라면 라이브러리든 네이티브든 DOM에 전부 접근할텐데.. 게다 DOM은 공식표준 API로 알고 있거든요 어떤이유로 성능에 안좋은것이며 그 대안이 무었인지 궁금합니다.

    • Unikys 2017.03.18 05:24 신고  댓글주소  수정/삭제

      안녕하세요, 일단 이 글이 5년전 기준이었다는 것을 먼저 말씀드리고 시작합니다 크크. 일단 DOM은 표준API이지만 DOM(일반적으로 HTML) <-> 자바스크립트 사이는 서로 다른 규격/엔진 사이를 왕복하는 것이라 그것을 변환하는 과정이 필요해서 (당연하지만) 일반 자바스크립트 변수/연산처리를 하는 것보다 훨씬 자원 소모적입니다. 물론 이것은 브라우저가 어떻게 구현하느냐에 따라서 달라지고 요즘은 크게 성능이 모자라는 것을 못 느낄수도 있다고 봅니다만, DOM 요청 자체는 프로그래머가 어떻게 성능을 확실히 제어 할 수 없는 성능의 블랙박스라고 인지하고 있으면 좋을 것 같습니다. C <-> JAVA 사이의 JNI와 비슷한 느낌으로 생각하면 편할겁니다. JNI를 쓸 때에 중요한 것은 왕복하는 것은 최소화하고 JAVA에서 처리할 수 있는 것은 최대한 JAVA에서, C에서 처리할 수 있는 것은 C에서 처리하는 것이 일반적입니다. 따라서 여러 번 접근할 DOM이라면 한번 접근한 다음 자바스크립트에서 변수로 캐쉬로 가지고 접근하는 것이 훨씬 성능이 좋습니다.
      그리고 중요한 것은 DOM을 접근하는 것보다는 DOM을 어떻게 쓰느냐가 성능에 아주 중요한 영향을 미칩니다. 이것에 대해서 따로 글을 쓰려고 했는데, 이미 "속깊은 자바스크립트" 책에 관련 내용을 쓰기는 했습니다. 인터넷으로 찾아보시려면 "DOM reflow"와 "DOM repaint"를 찾아보시면 여러 가지 좋은 참고 자료들이 있을 겁니다.

      아무튼 요약하자면 (1) DOM 접근하는 것 자체의 성능은 최신 브라우저에서는 크게 느낄만큼 성능이 나쁘지는 않으나 상대적으로 일반 자바스크립트에 변수를 캐쉬로 활용하는 것보다 훨씬 성능이 안 좋다. (2) DOM에 접근하는 성능을 고민하는 것보다 접근한 DOM을 어떻게 사용하느냐가 성능에 더 큰 영향을 미친다.가 중요한 내용일 것 같네요.
      나중에 이것과 관련해서 DOM과 일반 자바스크립트를 통해 캐쉬를 이용한 케이스 성능 비교를 하고 아래의 요약 내용을 조금 자세하게 글도 하나 써보겠습니다.

질문이나 의견을 댓글로 달아 주세요