Vue 에서 fragment.js 사용 방법 에 대한 상세 한 설명

대부분의 내용 은 jQuery 에서 기원 되 었 습 니 다.물론 component/domify 도 참고 하 였 습 니 다.원본 코드 를 뒤 져 보 는 것 에 관심 이 있 으 면 jQuery 에서 wrapMap 을 찾 을 수 있 습 니 다.domify 에 대해 서 는 github 에서 직접 검색 하면 됩 니 다.관련 항목 의 용량 이 적 고 index.js 를 직접 보면 됩 니 다.
createDocumentFragment
한 노드 에 여러 요 소 를 한꺼번에 삽입 하려 면 어떻게 해 야 합 니까?예 를 들 어 한 번 에 10000 개의 노드 를 삽입 하 는 것 입 니까?
가장 간단 하고 거 친 방법 은:

var parent = document.getElementById('parent');
for(var i = 0; i < 10000; i++) {
 var child = document.createElement('div');
 var text = document.createTextNode('' + i);
 child.appendChild(text);
 parent.appendChild(child);
}

그러나 DOM 에 대한 반복 적 인 조작 은 페이지 를 다시 그 리 며 환류 시 켜 효율 이 매우 낮 고 페이지 가 걸 려 죽 을 수 있 기 때문에 이 코드 는 기본적으로 아무 도 사용 하지 않 는 다.
DOM 작업 을 단계별 로 진행 하면 카드 가 끊 기 는 페이지 를 피 할 수 있 습 니 다.js 닌 자 비적 에 서 는 setTimeout 으로 개선 할 수 있다 고 언급 한 적 이 있 습 니 다.

var i = 0, max = 10000;
setTimeout(function addNodes() {
 for(var step = i + 500; i < step; i++) {
  var child = document.createElement('div');
  child.appendChild(document.createTextNode('' + i));
  div.appendChild(child);
 }
 if(i < max) {
  setTimeout(addNodes, 0);
 }
}, 0);

물론 메모리 에서 노드 를 직접 조작 하고 모든 노드 를 한데 모 은 후에 DOM 트 리 와 상호작용 을 하고 모든 노드 를 하나의 div 에 연결 한 다음 에 div 를 DOM 트 리 에 걸 어야 한다.

var parent = document.getElementById('parent');
var div = document.createElement('div');
for(var i = 0; i < 10000; i++) {
 var child = document.createElement('div');
 var text = document.createTextNode('' + i);
 child.appendChild(text);
 div.appendChild(child);
}
parent.appendChild(div);

예 를 들 어 DOM 트 리 와 한 번 만 상호작용 을 하면 성능 이 크게 개 선 될 것 입 니 다.그러나 div 를 추가 로 삽 입 했 습 니 다.div 와 같은 노드 와 상호작용 을 하지 않 았 다 면 예 를 들 어 table 에 th,td 를 삽입 하 는 것 입 니까?
이때 createDocumentFragment 가 나 서 야 합 니 다."문서 세 션"이 라 고 번역 하고 MDN 의 설명 을 누 르 십시오.
DocumentFragments 는 DOM 노드 입 니 다.그것들 은 DOM 나무의 일부분 이 아니다.일반적인 사용 장면 은 문서 세 션 을 만 든 다음 에 만 든 DOM 요 소 를 문서 세 션 에 삽입 하고 마지막 으로 문서 세 션 을 DOM 트 리 에 삽입 하 는 것 입 니 다.DOM 트 리 에서 문서 세 션 은 모든 하위 요소 로 대 체 됩 니 다.
문서 세 션 이 존재 하고 메모리 에 있 기 때문에 DOM 트 리 에 있 지 않 기 때문에 하위 요 소 를 문서 세 션 에 삽입 할 때 페이지 의 회 류 를 일 으 키 지 않 습 니 다(요소 위치 와 기하학 적 계산).따라서 문서 세 션 document fragments 를 사용 하면 성능 을 최적화 하 는 역할 을 합 니 다.
쉽게 말 하면 위의 예 는 div 에서 버 전 을 바 꾸 지 않 아 도 됩 니 다.삽입 할 때 하위 요소 로 그 자 체 를 바 꾸 는 것 이 완벽 합 니 다.
'좋 은 것 도 통용 되 지 않 는 다'(특히 한 회사 의 브 라 우 저 를 대상 으로)고 하지만 이 좋 은 물건 은 IE6 까지 지원 한다.
구체 적 인 코드 는 대략 이렇게 생 겼 다.

var parent = document.getElementById('parent');
var frag = document.createDocumentFragment();
for(var i = 0; i < 10000; i++) {
 var child = document.createElement('div');
 var text = document.createTextNode('' + i);
 child.appendChild(text);
 frag.appendChild(child);
}
parent.appendChild(frag);

구체 적 인 성능 테스트 는 관심 있 는 것 은 모든 코드 를 한 번 씩 뛰 어 볼 수 있다.
innerHTML
긴 문자열 을 대응 하 는 DOM 노드 로 변환 합 니 다.일반적으로 먼저 생각 나 는 것 은 innerHTML 입 니 다.대개 프로 세 스 는 div 노드 를 만 든 다음 div.innerHTML=str 입 니 다.필요 에 따라 div 의 children 을 꺼 내 서 놓 을 곳 에 두 고 div 자 체 를 버 리 는 것 입 니 다.
th 노드 를 따로 만 들 고 싶다 면?
위의 절 차 를 시험 해 보 세 요.

var div = document.createElement('div');
div.innerHTML = '<th>xxx</th>';
console.log(div);

실제 출력 은(chrome 아래):

<div>xxx</div>

원 하 는 것 을 얻 지 못 했다.

<div><th>xxx</th></div>

이러한 결 과 는 이해 할 수 있다.왜냐하면 하나의 th 를 div 안에 넣 으 면 아무리 봐 도 틀 리 기 때문에 외곽 의 라벨 을 직접 제거 하고 내용 을 div 안에 던 지 는 것 도 상당히 스마트 하 다.
그러나 견 딜 수 없다.때로는 th 노드 를 가 져 와 야 한다.
사실 하기 도 쉬 워,다 쓰 면 되 잖 아.

var node = document.createElement('div');
node.innerHTML = '<table><tbody><tr><th>xxx</th></tr></tbody></table>';
//                th  
var depth = 3;
while(depth--) {
 node = node.lastChild;
 }
console.log(node.firstChild);

결과 가 바로 원 하 는 것 임 을 알 수 있다.
fragment.js

//              
var map = {
 legend : [1, '<fieldset>', '</fieldset>'],
 tr : [2, '<table><tbody>', '</tbody></table>'],
 col : [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],

 _default : [0, '', '']
};
map.td = map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
map.option = map.optgroup = [1, '<select multiple="multiple">', '</select>'];
map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '<table>', '</table>']
map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];

var TAG_RE = /<([\w:]+)/;

module.exports = function(templateString) {
 var frag = document.createDocumentFragment(),
  m = TAG_RE.exec(templateString);
 //         
 if(!m) {
  frag.appendChild(document.createTextNode(templateString);
  return frag;
 }

 var tag = m[1],
  wrap = map[tag] || map._default,
  depth = wrap[0],
  prefix = wrap[1],
  suffix = wrap[2],
  node = document.createElement('div');
 //        
 node.innerHTML = prefix + templateString.trim() + suffix;
 //       ，          
 while(depth--) node = node.lastChild;
 //          
 if(node.firstChild === node.lastChild) { 
  frag.appendChild(node.firstChild);
  return frag;
 }
 //     ，      frag
 var child;
 while(child = node.firstChild) {
  frag.appendChild(child);
 }
 return frag;
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.