HTML 을 작성할 때 반복 되는 부분을 자바스크립트로 리팩토링 처리하면 좋지 않을까요?
조회수 3271회
HTML로 웹페이지를 작성했습니다.
페이지 구조가 단순하여 반복 되는 구조가 많아 고정적으로 반복 되는 부분은 javascript 나 jquery 로 반복 되도록 작성해 두었습니다. 예를 들면
var text_box = "<div> 박스의 내용</div>"
for(i=0; i<10; i++){
$("#test_id").append(text_box)
}
대충 느낌만 살려보자면 이런식으로 박스 내용이 10번 똑같이 반복 되는 구간이 있어서 이런식으로 구성해두었습니다. 그런데 웹 로딩이 될 때 사용자의 네트워크 상태에 따라 javascript나 jquery가 동작하지 않을 수도 있으니까 text_box값을 10번 있는 그대로 모두 작성해두고 관리하는 것이 맞다고 하더라구요. 편의를 위해 for문을 사용해본건데 실제로 웹디자이너분들도 저런식으로 최대한 보수적으로 작업을 하시는 편인가요?
1 답변
-
성능적으로 큰 저하를 느끼지 못하거나 페이지 동작에 문제가 없으며 자바스크립트로 작성하면 관리가 더 쉬워진다는 가정하에 해당 코드는 유의미 합니다.
하지만 만약 페이지의 성능이 좋지 못하다고 느껴지면 하지 않는 것이 좋습니다.
상황마다 다르긴 하겠지만 자바스크립트로 DOM Element를 만드는 방식은 리팩토링의 지향점과는 반대되는 면이 있습니다.
우선 해당 코드가 과연 필요한지부터 생각해 봐야 합니다.
기존의 코드에서도 자바스크립트로 반복되는 각 HTML 템플릿에 접근하고 있었으며 그것을 조작해야 할 필요가 있었다면 뭐... 딱히 말리지는 않겠습니다. 관리의 편의를 위해서, 깔끔한 코드를 위해서라면 나쁘지 않은 선택이지요.
하지만 애초에 노출시키려는 HTML이 정적이라고 한다면, 자바스크립트의 HTML 접근 및 조작 자체를 줄이는 것이 페이지 렌더링 성능 면에서 유리합니다.
자바스크립트가 엘리먼트를 만들고 실제 DOM 트리에 반영하게 되면, 브라우저는 페이지를 다시 렌더링해야 합니다. 이것이 큰 렌더링 부하 중 하나이며 가급적 줄이는게 중요합니다. (이 과정을 reflow, layout 등등으로 부릅니다.)
자바스크립트 실행에도 영향을 줍니다. 만약 만들어 내야 하는 엘리먼트의 복잡도가 매우 크다면 만들고 DOM 트리에 반영하는 동안 자바스크립트의 실행은 blocking 될 것이며(싱글 쓰레드 + 강제 레이아웃 동기화), 이는 이 후에 실행해야할 자바스크립트의 타이밍을 늦추게 되는 결과를 가져옵니다.
만약 특정 HTML템플릿이 반복된다면 서버에서 HTML을 만들어 내려주는 것이 더 좋습니다. 그게 아니라면 그냥 반복되는 HTML을 사용하세요.
과정이야 어쨌든, 클라이언트(웹브라우저)에서는 이미 완성되어 만들어진 HTML을 받아 쓰는 것이 페이지 렌더링 측면에서 유리하며, 자바스크립트를 통한 HTML 엘리먼트 접근, 생성, 수정은 되도록 하지 않는 것이 좋습니다.
그래서 해당 건이 "보수적이다, 아니다" 를 말하기에는 뭔가 적합하지 않습니다. 다만 페이지 성능을 기준으로 봤을 때 자바스크립트로 만들어내는 건 "딱히 좋지 않다" 라고 말 할 수 있겠네요.
그리고 네트워크의 상태에 따라서 javascript/jquery가 동작하지 않기 때문에 모두 작성해야 한다는 것은 어느정도 맞는 얘기지만 그게 핵심은 아닙니다. 자바스크립트 파일을 따로 두고서 네트워킹의 상태를 걱정할 정도라면 HTML내부에 script 태그 안에 자바스크립트를 작성하면 됩니다. 그것이 자바스크립트로 DOM을 생성/관리하면 안된다는 근거가 되기 힘듭니다. 성능적인 측면에서 바라 봐야죠.
댓글 입력