document.createDocumentFragment() 및 js 효율성_javascript 기술에 대한 간략한 분석

document.createDocumentFragment()는 단순히 DOM 사용을 절약하기 위한 것입니다. DOM의 모든 JavaScript 작업은 페이지 렌더링을 변경하고 전체 페이지를 다시 새로 고치므로 많은 시간이 소모됩니다. 이 문제를 해결하려면 문서 조각을 만들고 모든 새 노드를 여기에 연결한 다음 문서 조각의 내용을 문서에 한 번에 추가하면 됩니다.
제가 작성한 간단한 테스트 페이지입니다.

코드 복사 코드는 다음과 같습니다. :

노드가 추가되면 document.body(또는 그 뒤의 노드)를 사용하면 페이지에 이 변경 사항이 즉시 반영됩니다. 첫 번째 작은 프로그램의 경우 실행에는 문제가 없지만 document.body.appendChild()를 10번 호출하여 매번 페이지 새로 고침이 발생하여 많은 페이지 조각이 생성된다는 것이 문제입니다. 두 번째 코드에서는 document.body.appendChild()가 한 번만 호출됩니다. 즉, 페이지를 한 번만 새로 고치면 되며 필요한 시간은 분명히 이전 것보다 짧습니다.

위 테스트 코드를 테스트하기 위해 세 가지 브라우저를 사용했는데 대략적인 결과는 다음과 같습니다.
IE7:
방법 1번: 140 방법 2 시간: 125

Firefox:
1번 방법: 66 2번 방법: 43

Chrome:
방법 1에 소요된 시간: 35 방법 2에 소요된 시간: 25
얻어진 결과는 여전히 이론과 일치합니다.