document.createDocumentFragment()는 DOM 을 절약 하기 위해 서 라 고 말 했다.JavaScript 가 DOM 에 대한 작업 을 할 때마다 페이지 의 현금 화 를 바 꾸 고 전체 페이지 를 새로 고침 하여 많은 시간 을 소모 합 니 다.이 문 제 를 해결 하기 위해 문서 조각 을 만 들 고 모든 새 노드 를 추가 한 다음 문서 조각의 내용 을 document 에 한꺼번에 추가 할 수 있 습 니 다.이것 은 제 가 쓴 간단 한 테스트 페이지 입 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>document.createDocumentFragment() </title>
</head>
<body>
<script type="text/javascript">
var d1 = new Date();
for(var i=0;i<1000;i++)
{
var op=document.createElement("P");
var oText=document.createTextNode("test1");
op.appendChild(oText);
document.body.appendChild(op);
}
var d2 = new Date();
document.write(" ：" + (d2.getTime() - d1.getTime()) + "<br/>");
//---+-----
var d3 = new Date();
var oFrag=document.createDocumentFragment();
for(var i=0;i<1000;i++)
{
var op=document.createElement("P");
var oText=document.createTextNode("test2");
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);
//
var d4 = new Date();
document.write(" ：" + (d4.getTime() - d3.getTime()) + "<br/>");
</script>
</body>
</html>
노드 를 document.body(또는 그 후의 노드)에 추가 하면 페이지 는 바로 이 변 화 를 반영 합 니 다.첫 번 째 소절 프로그램 에 대해 서 는 실행 에 문제 가 없 지만 문 제 는 document.body.append Child()를 열 번 호출 했 습 니 다.매번 페이지 새로 고침 이 발생 하면 많은 페이지 조각 이 생 길 수 있 습 니 다.두 번 째 소절 코드,document.body.append Child()는 한 번 만 호출 되 었 습 니 다.이 는 한 번 만 페이지 를 새로 고침 하 는 데 걸 리 는 시간 이 이전 보다 적 을 것 임 을 의미 합 니 다.나 는 세 가지 브 라 우 저 로 위의 테스트 코드 를 테스트 했 는데 대체적으로 다음 과 같은 결 과 를 얻 었 다.IE7: 방법 1 용 시:140 방법 2 용 시:125 Firefox: 방법 1 용 시:66 방법 2 차 사용 시:43Chrome: 방법 사용 시:35 방법 2 용 시:25 에서 얻 은 결 과 는 이론 적 인 것 과 일치 했다.
