documentFragment를 활용하여 리팩토링 하였지만 오히려 속도가 더 느려졌네요. 원인이 궁금합니다.

Question

...

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가 문제인 건지... 이유를 모르겠습니다. 알려주시면 감사하겠습니다.

documentFragment를 활용하여 리팩토링 하였지만 오히려 속도가 더 느려졌네요. 원인이 궁금합니다.

알림