개발자
documentFragment를 활용하여 리팩토링 하였지만 오히려 속도가 더 느려졌네요. 원인이 궁금합니다.
<select></select> <select></select> <select></select> ... var targetArr = document.querySelectorAll("select"); var optionArr = [ {CODE_NAME: "one", CODE_ID: 1}, {CODE_NAME: "two", CODE_ID: 2}, ... ]; 이런 환경에서 optionArr을 가지고 모든 select에 option을 넣어주려고 합니다. 기존 소스 : targetArr.forEach(function(target) { optionArr.forEach(function(item) { var option = document.createElement("option") option.setAttribute("value", item.CODE_ID); option.innerText = item.CODE_NAME; target.append(option); }); }); 변경 소스 : var fragment = document.createDocumentFragment(); var option = document.createElement("option"); optionArr.forEach(function(item) { var cloneOption = option.cloneNode(); cloneOption.setAttribute("value", item.CODE_ID); cloneOption.innerText = item.CODE_NAME; fragment.append(cloneOption); }); targetArr.forEach(function(target) { target.append(fragment.cloneNode(true)); }); 이렇게 O(nm)으로 동작하던 기존 소스를 O(n)으로 변경하였고 더하여 직접 DOM을 조작하기 보다 documentFragment를 활용하였으니 더 빨라질 것으로 예상하였으나 더욱 느리게 나오더라구요. cloneNode가 문제인 건지... 이유를 모르겠습니다. 알려주시면 감사하겠습니다.
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 09월 20일
질문에서 언급한 문제는 `fragment.cloneNode(true)`를 사용할 때 발생하는 것으로 보입니다. `cloneNode(true)` 메소드 호출은 deep clone을 수행하므로, 모든 자식 요소들을 복사합니다. 이 연산은 비용이 많이 드는 작업이며, 특히 fragment에 첨부된 모든 옵션 노드들과 관련된 속성, 값 등을 반복적으로 복사하게 됩니다. 따라서 기대했던 성능 향상 대신에 fragment를 클론하는 부분에서 추가적인 시간이 소요되어 전반적인 성능 저하를 초래함으로 보입니다. 따라서 개선 방안으로 아래의 코드가 더 나아보입니다: ```javascript optionArr.forEach(function(item) { var option = document.createElement("option"); option.setAttribute("value", item.CODE_ID); option.innerText = item.CODE_NAME; targetArr.forEach(function(target) { target.append(option.cloneNode(true)); }); }); ``` 즉, 각각의 'option'을 생성한 후에 이 'option'을 모든 타겟에 복제하여 추가합니다. 이렇게 하면 원래 O(nm) 복잡도가 다시 적용되지만 여전히 DocumentFragment를 사용하지 않고 직접 DOM 조작을 최소화 할 수 있습니다. 물론 이 과정 및 결과는 주어진 환경과 데이터 크기에 따라 다를 수 있습니다. 분석을 통해 가장 효과적인 방법을 찾는 것이 중요합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!