최소 메모리 집중 DOM 요소

Question

Javascript를 사용하여 4000 개의 이상한 DOM 요소를 렌더링하려고합니다. 모든 DOM 요소가 브라우저 내에서 동일한 메모리를 사용합니까? 예 : SPAN, DIV, A 등 사이의 메모리는 모두 똑같은 메모리입니까?

Answer 1

평범한 텍스트 노드가 가장 적게 사용한다고 생각합니다. 실제로 사용해야하는 것은 데이터의 의미와 표시 방법에 따라 다릅니다.

Answer 2

브라우저/구현에 따라 달라지는 것으로 생각됩니다.

아마도 다른 유형의 4000 요소로 구성된 페이지로 일부 테스트를 실행하고 관련 메모리 소비를 살펴 봐야할까요?

Answer 3

DOM 요소 자체에는 그다지 차이가 ​​없다고 생각합니다.

중요한 것은 스타일이 지정되는 방식입니다.

입력 요소는 기본 위젯이 연결되어 있기 때문에 메모리가 필요합니다. 링크에 클릭 이벤트 처리기가 연결되어있어 링크가 약간의 메모리를 필요로합니다. 테이블 셀은 스타일을 자동으로 크기 조정할 수 있으므로 메모리가 필요합니다.

필요한 것을 사용하고 작동하는지 확인하십시오.

그렇지 않으면 페이지 매김을 통해 사용할 올바른 DOM 요소를 찾는 것 이상의 도움이됩니다.

Answer 4

"가장 효율적인"DOM 요소를 사용하는 것이 아니라 인식하고자하는 것에 기반하여 마크 업을 만듭니다. A <SPAN>은 <DIV>과 매우 다른 용도로 사용됩니다. 그리고 바로 아래로 갈 때, 메모리 소비의 차이는 작을 것이고, 4,000 가지 요소가 많지는 않습니다 (어떤 전자 상거래 사이트로 가서 페이지를 파싱하면 훨씬 더 많이 끝날 것입니다).

실제적으로 DOM 생성자가 아닌 innerHTML을 사용하여 요소를 만드는 것이 더 빠를 것입니다. 이것이 사용자에게 중요한 것입니다. 자세한 내용은 this article을 참조하십시오.

Answer 5

확실히 "TABLE"요소를 사용하지 마십시오 - 그것은 많은 느린이며 된 DIV 또는 걸쳐