2019년 8월 11일 영어 - 말하기 - Javascript - DocumentFragment

주제: DocumentFragment

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

 

Example

---

HTML

<ul id="list"></ul>

JavaScript

var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

var fragment = document.createDocumentFragment()

fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.innerHTML = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

Result

• Apple
• Orange
• Banana
• Melon

---

 

 

하고싶은 말

오늘은 DocumentFragment에 대해서 설명할 겁니다.

I'll explain about DocumentFragment today.

 

대다수의 개발자는 성능 이슈를 신경 씁니다.

Most of the developers bother performance issues.

 

특히, 동적으로 많은 Element를 추가해야 하는 상황이 존재하는데 이때, DocumentFragment를 사용합니다.

Especially, when a situation that some element adds to another element, use DocumentFragment.

 

이 예시를 설명해드리겠습니다.

I'll explain this example.

 

ul은 리스트형 엘레멘트입니다. 전체 명칭은 unordered list입니다.

ul is an element that one of the list types. Its full name is 'unordered list'.

 

하위 리스트 아이템 엘레멘트를 순서가 없는 형식으로 보여줍니다.

It shows that the sub-list item elements by an unorder type.

 

결과를 보시면 숫자가 매겨져 있지 않은 채로 나열되어 있습니다.

You can see this result and it was listed as no numbering.

 

다른 종류로는 ol, dl이 있습니다. ul을 ol로 변경하면 이름 앞에 숫자가 매겨집니다.

Also, other types are 'ol' and 'dl'. If this 'ul' change to the 'ol', numbering at front of the item's name.

 

우리는 document.querySelector() 메소드를 이용하여 element를 찾을 수 있습니다.

We can find the element using document.querySelector() method.

 

문자열 파라미터를 넣습니다.

Put the string parameter in the function.

 

#은 Selector를 가리키는 하나의 심볼입니다. 여기서는 list라는 id를 의미합니다.

Sharp is one of the symbols that point to the Selector. It means id that names 'list' in here.

 

이 메소드를 실행하면 document에 있는 엘레멘트 중에서 list라는 id를 가진 엘레멘트 찾아냅니다.

If we execute this method, it will find the element that has the id named 'list' in the element of the document.

 

그래서 list 변수에는 html에 이미 정의된 list라는 id를 가진 ul 엘레멘트가 저장됩니다.

So, the ul element saves to the list variable that has id named 'list' defined in HTML already.

 

test를 위해 4개의 문자열을 가진 fruits 배열을 생성합니다.

It creates the 'fruits' array that has 4 strings about 'fruit' for testing.

 

document.createDocumentFragment() 메소드를 사용하여 fragment 엘레멘트를 생성합니다.

And it creates 'fragment' element using document.createDocumentFragment() method.

 

forEach는 for문과 비슷하게 동작하는 반복문입니다.

'forEach' is a loop statement that is similar to working with 'for' statement.

 

파라미터로는 익명 함수를 넣습니다. 익명 함수는 이름 없이 함수를 바로 선언하는 것을 말합니다.

It put an anonymous function as the parameter in the method.

 

그 함수의 파라미터 fruit는 fruits 배열에 포함된 요소입니다.

The parameter 'fruit' of the function is the element included the 'fruits' array.

 

document.createElement() 메소드를 사용하여 list item인 li 엘레멘트를 생성합니다.

It creates 'li' element that the list item type element using document.createElement().

 

li 엘레멘트 내용을 문자열 fruit의 내용으로 변경합니다. 그리고 그 li 엘레멘트를 fragment 하위에 추가합니다.

The content of the 'li' element is changed to the content of the string 'fruit' variable.

 

마지막으로, list 엘레멘트에 item들이 포함된 fragment 엘레멘트를 추가합니다.

Finally, the fragment element that included items adds to the list element.

 

사실 forEach문에서 fragment 대신 list로 변경해도 결과는 같습니다.

Actually, the result is the same although it changes to the list variable instead of the fragment variable.

 

핵심적인 차이점은 성능입니다.

A key difference is performance.

 

어떤 엘레멘트를 어떤 엘레멘트에 추가할 때마다 브라우저는 렌더링을 수행하게 되고 끊김현상이 발생하게 됩니다.

When some element adds to another element every time, a web browser works the rendering and it occurs a freezing.

 

개수가 많으면 많을수록 더 느려지는 것을 체감할 수 있습니다.

We can feel that slowly decrease performance by the count the more.

 

하지만 fragment는 가상 엘레멘트라서 추가할 때 렌더링을 수행하지 않고 마지막에 이 엘레멘트를 다른 엘레멘트에 추가할 때 한 번만 렌더링을 수행하게 됩니다.

However, when some elements add to the fragment element, it doesn't work the rendering because the fragment is a virtual element. And when fragment element adds to another element, it works the rendering once at last.