>  기사  >  웹 프론트엔드  >  document.createDocumentFragment() 및 js 효율성_javascript 기술에 대한 간략한 분석

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

WBOY
WBOY원래의
2016-05-16 17:29:501176검색

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

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





document.createDocumentFragment() 테스트 페이지






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

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

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

Chrome:
방법 1에 소요된 시간: 35
방법 2에 소요된 시간: 25
얻어진 결과는 여전히 이론과 일치합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.