찾다
웹 프론트엔드HTML 튜토리얼DocumentFragment的探索之旅_html/css_WEB-ITnose

document.createDocumentFragment的探索之旅

@(author: Jsaonwong) 以下是我的 个人博客 ,欢迎大家来作客并指正我文章中的错误!

前言

事实上在写这篇文章之前想了许久,究竟要写关于哪个课题的文章,因为自己更希望写一些工作相关的课题,但是总觉得自己在工作中累计的各种经验太碎片化了,并不足以用文章输出出来,待我有空时精心整理之后再与大家分享吧,这里就先说一个大家平常都不怎么用到或者没用过的东西 DocumentFragment ;

什么是DocumentFragment?

可能许多童鞋都听说过这个东西,甚至也知道怎么使用它,但是我相信大部分的童鞋应该没有真正的去了解过它,追本溯源可以说是程序员最需要的一种特性,如果只是一味知道这个东西怎么用,或者是别人说这个东西好用就盲目地使用它,那么这恐怕并不是作者的本意。

没有真正了解过DocumentFragment这个东西的可以去 w3c 了解一下,看过之后大家就会了解到这个东西其实不是什么别的东西,正是我们耳熟能详的DOM对象。

它是一个概念比较简单却又很实用的DOM对象,w3c如是说:DocumentFragment 接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点,这要怎么理解呢!其实我是这么理解的,DocumentFragment它是一个文档碎片,轻量级的文档,能够提取部分文档的树或创建一个新的文档片段。

然而w3c下一句解释让我一开始有点懵逼,这句话是这么说的:“DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。”这句话又要怎么理解呢?

其实在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段(documentfragment)是一种”轻量级“的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。

而最有用的一段概念解释当为下面这一段:“即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作,尤其是与 Range 接口一起使用时更是如此。”

DocumentFragment的作用在最后这一段文字的解释中表达的淋漓尽致,它本身是不参与任何DOM操作的,它只是一个暂时缓存准备插入到dom的节点的“容器”。

createDocumentFragment真的如想象中神奇吗?

江湖传闻,得DocumentFragment者得天下,听说使用这个api可以对DOM操作进行优化,并且性能会得到 大量 的提升,理论上来说如果情景是for循环10000次向body插入div的话,传统的使用appendChild会导致多次的回流和重绘,必然会影响页面的性能,然而事实如此吗?因此本人捧着一颗热忱的心前去试验了一把,结果却是让我大跌眼睛。

个人写的代码如下:(如果错误或不公平的地方吗敬请指正)

第一段是for循环append的代码

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">    <title>test for append's performance</title></head>  <body>      <div id="test1">    </div></body>  <script>// per p appendvar start2 = new Date()  for(var i = 0; i < 100000; i++) {      var p = document.createElement('p');    var oText=document.createTextNode("test2");  p.appendChild(oText);    document.body.appendChild(p);}var end2 = new Date()  console.log('pappend use: ' + (end2.getTime() - start2.getTime()).toString());  </script>  </html>  

第二段是for循环append进文档碎片后再append到body的代码

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">    <title>test createDocumentFragment's performance</title></head>  <body>      <div id="test2">    </div></body>  <script>// fregmentvar start1 = new Date();  var fragment = document.createDocumentFragment();  for(var i = 0; i < 100000; i++) {      var p = document.createElement('p');    var oText=document.createTextNode("test2");  p.appendChild(oText);    fragment.appendChild(p);}document.body.appendChild(fragment);  var end1 = new Date()  console.log('fragment use: ' + (end1.getTime() - start1.getTime()).toString());  </script>  </html>  

最后得到的数据,我各自试了10次取了10组数据,再去掉最大和最小取平均值,得到的结果是:

传统写法的平均耗时为:173.75ms

使用文档碎片的平均耗时为:169.25ms

综合两个的数据来看感觉性能上的差距并不大,难道说,DocumentFragment是浪得虚名吗?答案当然是:NONONO!

我们都知道,做性能测试,测试环境需要适应多样化五花八门的环境,在我这些代码中dom结构及其简单,而chrome浏览器的性能也是强大到不行,因此repaint和redraw的速度极快,因此在这种情况下做出的试验数据是难以让人信服的( 事实上在IE11的测试数据中传统写法的耗时甚至比使用文档碎片的耗时要更少 )。

难道说DocumentFragment仅仅只有防止因为回流和重绘的导致闪屏的作用吗?如果你这么说,我不服,DocumentFragment也不服,所以我们要再战。

那么究竟在什么情境下测试会比较科学一些呢,我沉思半晌突然灵光一闪,既然我在大繁星工作,为什么不在繁星的项目中进行测试呢,繁星整个项目的复杂度已经属于非常复杂的情景了,因此由此测试而得到性能数据是可以值得信服的。

具体的代码其实也就是上面代码块中的js代码,嵌入到了繁星主页面中,而且是window.onload之后方才执行,保证dom已经完全加载完毕;

由此在繁星主页面下测试得到数据如下:

传统写法的平均耗时为:1168.5ms

使用文档碎片的平均耗时为:686ms

噔噔噔!!果然,在我大繁星下的测试结果,传统写法与使用文档碎片的写法性能高下立判,而且两个值的比还会随着循环的次数越多,document越复杂而逐渐变大。这也证明越是复杂的页面,文档碎片的使用得到的性能提升也往往越大。

更多的数据大家可以自己动手测试一下,毕竟动了手才有发言权,现在最流行的一句话如是说,能动手尽量不BB!

那么接下来就是大家都比较关心的一个问题,这个东西的兼容性如何呢!!!让我们一起来看看

Can I use createDocumentFragment?

结果如下:( 源自 http://caniuse.com/#search=documentfragment) 综上所述:除了IE8及以下之外都支持这一API,请大家尽情使用createDocumentFragment吧,尤其是移动端更是无往不利。(PS:不过在正确的场景中使用才是正确的做法,任何api和方法都不应该被滥用,否则很有可能会弄巧成拙哦!)

这是本人第一次写博文,错误或许在所难免,如有不正确的地方欢迎指正,如果有严重错误的地方欢迎来喷!最后欢迎大家来我的博客逛一逛 http://jasonwong1991.github.io

最后的最后再说一句,下一篇将会讲关于createDocumentFragment与createElment之间的故事,敬请期待!
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소?& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; meter & gt의 목적은 무엇입니까? 요소?& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

& lt; Progress & Gt의 목적은 무엇입니까? 요소?& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)