제가 주의 깊게 아니 은근히 이해한 쪽이 DOM 파트 였습니다. 마냥 동영상만 가져오면 성의 없는 듯 해보였습니다. 게다가 영어였으니 말이죠. 자막 없이 외국 영화 보는 기분?
아무튼 저도 완전하게 이해를 못했지만, 이번에 반복문의 사용을 소개하려 합니다. DOM 레벨 1에는 문서가 변경될 때마다 자동으로 갱신(updated, reflow)된다, 라는 말이 있습이다. 우리는 보통 DOM 트리 중에서 원하는 부분을 가져올 때 getElementsBy… 을 사용합니다. 그리고 라이브 즉, 실시간으로 수정하며 다이나믹한 웹 오브젝트를 만들어냅니다. 다이나믹 웹에는 당연히 DOM 수정이 이루어 집니다.
또한 수정 시에 보편적으로 사용되는 반복문을 짚고 넘어가야합니다. ‘보다 빠르게 할 수 없을까?’, 라는 질문에는 반복문의 사용이 어떤 영향을 주느냐에서 답이 대충 나오게 됩니다. 예제를 보세요. 동영상의 예제를 캡춰해서 다시 사용하겠습니다.
우리는 보통 이렇게 사용하지만, 실제로는 무한대의 루프라고 합니다. 여기서 문제는 제가 제대로 알아듣지 못했다는 점인데 들은데로 말하자면, 위의 length 프로퍼티는 배열 같지만, 실제로는 아니라는 부분입니다. 그리고 또 하나의 예제입니다.
Updated 02:55 AM DOM 1번의 수정은 1번의 페이지 갱신으로 이어집니다. 지금의 예제는 무한한 갱신이 실시간으로 이루어지는 것을 뜻합니다.
그림에서 2개의 구문은 달라보이지만, 정확히 같은 동작을 하고 있으며 각 브라우저별로 성능을 예로 보여줍니다. 아마 반복문을 실행하는 갯수인 듯 합니다. 그리고 당연히 이에 대한 해결책이 나와야죠?
이렇게 지역변수를 사용하는 것이라 합니다. 그리고 각 브라우저의 성능이 같아지게 됩니다. 저도 이번 계기로 나쁜 코딩이란 것을 알게 됐기 때문에 실무자들의 경험이 있으면 좋겠다는 생각이 있습니다. 있으시면 답글 달아주시면 저는 감사드립니다.
[...] This post was mentioned on Twitter by 진입명. 진입명 said: 자바스크립트를 더욱 빠르게 하는 법은? : 확장편 1부 http://tinyurl.com/ya6en9s [...]