자바스크립트. 놀랍도록 빠른 행용 멀티스레드 데이터 그리드를 만드는 방법 부분: DOM 작업의 미묘한 차이

데모 | GitHub

그림 1. 1,000,000행의 데이터 그리드

빠른 데이터 그리드 기능:

• 놀라울 정도로 빠릅니다
• 멀티스레드
• 단 523줄의 코드
• 종속성 없음
• 바닐라 자바스크립트

1,000,000행을 스크롤하고 검색해 보세요 - 빠른 데이터 그리드.

이 기사에서는 DOM 작업의 미묘한 차이를 나열하겠습니다. 멀티스레딩에 대해서는 다음 글에서 다루겠습니다.

DOM이 작을수록 좋습니다. DIV의 내용을 변경하는 것이 DIV를 삭제하고 새 DIV를 만드는 것보다 빠릅니다.

브라우저에서 대규모 DOM 트리를 렌더링하는 속도가 느립니다. 브라우저는 20픽셀 높이의 1,000,000줄을 전혀 렌더링하지 않습니다. Chrome에서 DIV의 최대 높이는 15,000,000픽셀입니다. HTML 요소가 적을수록 좋습니다.

Fast Data Grid는 화면에 표시되는 만큼 많은 행을 DOM에 추가합니다.

const rowsCount = Math.ceil(viewPortHeight / rowHeight);

목록 1. 화면에 몇 줄이 맞는지 세어보기

새 데이터를 출력해야 할 경우 행 DIV가 재사용됩니다. 새 데이터는 동일한 DIV에 기록됩니다. DIV의 콘텐츠를 변경하는 것이 DIV를 삭제하고 새 DIV를 만드는 것보다 빠릅니다.

스크롤 시 DIV 행의 위치는 JavaScript를 사용하여 계산됩니다.

최대 DIV 높이는 15,000,000픽셀입니다.

스크롤이 작동하도록 하기 위해 Fast Data Grid는 큰 DIV를 만듭니다. 스크롤 이벤트가 이 DIV에 첨부됩니다. 스크롤 이벤트 핸들러는 행 DIV의 위치를 ​​계산합니다.

그림 2. 스크롤용 대형 DIV

행의 총 높이가 15,000,000픽셀을 초과하는 경우 행 DIV는 큰 DIV보다 빠르게 스크롤되어야 합니다. 큰 DIV가 끝까지 스크롤되면 -> 행 DIV도 끝까지 스크롤해야 합니다.

DIV 행을 스크롤할 때 계수를 적용해야 합니다.

const scrollYKoef =
    // if {allRowsHeight} > 15 million -> we have to applay koef on scroll
    // if {allRowsHeight}  {scrollYKoef} = 1
    (allRowsHeight - viewPortHeight) / (scrolHeight - viewPortHeight);


listen(scrollOverlayDiv, 'scroll', /** @param {Event & {target:HTMLDivElement}} evt */ evt => {
    const scrollTop = evt.target.scrollTop * scrollYKoef;
    rowsDiv.style.transform = `translateY(${scrollTop}px)`;
});

목록 2. 스크롤 시 계수 사용

CSS 변환 번역이 CSS 상단보다 빠릅니다.

스크롤할 때 위치는 변환 변환을 통해 설정됩니다. CSS 변환 번역은 CSS top보다 빠릅니다.

<!-- transform faster-->
<div>

<p><br>
<em>Listing 3. CSS transform translate is faster than CSS top</em></p>
<h2>
  
  
  Read DOM first, then modify DOM. It's bad to read DOM after modification
</h2>

<p>The browser displays frames on the monitor like this:<br>
First, JavaScript is processed, then styles are calculated, then layout, then rendering.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173464994174788.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScript. How to Make a Blazingly Fast Multithreaded Data Grid for  Rows. Part : The Nuances of Working with DOM"><em>Figure 3. Standard order of operations when outputting a frame to the monitor</em></p>

<p>If the standard order is not violated, the browser will render the frame as quickly as possible.</p>

<p>At the beginning of the cycle, the DOM parameters are already calculated and correspond to the parameters of the previous frame. For example, box.offsetHeight is already calculated at the beginning of the cycle. But if you change the DOM and then read the DOM -> the browser will have to break the standard order. It will be necessary to calculate the layout again.<br>
</p>

<pre class="brush:php;toolbar:false">box.classList.add('super-big');

// Gets the height of the box in pixels and logs it out:
console.log(box.offsetHeight);

목록 4. DOM을 읽기 전에 DOM 수정. 나쁜. 레이아웃 스래싱으로 이어집니다.

레이아웃을 과도하게 재계산하는 것을 "레이아웃 스래싱"이라고 합니다.

읽기 전에 DOM을 수정하면 브라우저 속도가 어떻게 느려지는지 시각적으로 보여줍니다.
https://wilsonpage.github.io/fastdom/examples/animation.html

주제에 관한 훌륭한 기사:
크고 복잡한 레이아웃 및 레이아웃 스래싱 방지 | 기사 | web.dev.

자기 홍보

가장 편리한 순서도 편집기 DGRM.net을 만듭니다.
비즈니스를 위한 가장 편리한 서비스이기도 합니다: 엑셀 비즈니스 프로세스 다이어그램.

GitHub에서 별표를 남겨주세요.