scrolling_javascript 기술 시 DIV 레이아웃이 깜박이는 것을 방지하는 Node.js 솔루션

이 글의 예시는 스크롤 시 DIV 레이아웃이 깜박이는 것을 방지하기 위한 js 메서드를 설명하며 참고용으로 모든 사람과 공유됩니다. 구체적인 방법은 다음과 같습니다.

최근 페이지 성능에 대해 접한 것에는 브라우저 렌더링과 같은 미묘하고 독창적인 콘텐츠가 많이 포함되어 있습니다. 정보가 많아서 발췌용이나 메모용으로 몇개 골라봤습니다.
JavaScript가 DOM을 여러 번 쓰고 읽으면 "레이아웃 스래싱"이 발생하여 문서 리플로우(리플로우 – 렌더 트리를 구성하는 프로세스

코드 복사 코드는 다음과 같습니다.

DOM 트리에서1).
//읽기
var h1 = element1.clientHeight;
// 쓰기(레이아웃이 잘못됨)
element1.style.height = (h1 * 2) 'px';
// 읽기(트리거 레이아웃)
var h2 = element2.clientHeight;
// 쓰기(레이아웃이 잘못됨)
element2.style.height = (h2 * 2) 'px';
// 읽기(트리거 레이아웃)
var h3 = element3.clientHeight;
// 쓰기(레이아웃이 잘못됨)
element3.style.height = (h3 * 2) 'px';

DOM을 작성하면 레이아웃이 유효하지 않아 특정 시점에 다시 정렬해야 합니다. 그러나 브라우저는 매우 게으르다. 리플로우하기 전에 현재 작업(또는 프레임)이 끝날 때까지 기다리기를 원한다.
그러나 현재 작업(또는 프레임)이 끝나기 전에 DOM에서 기하학적 값을 읽으면 브라우저가 미리 레이아웃을 재배치하도록 강제합니다. 이것이 소위 "강제 동기 레이아웃"입니다. 성능이 죽습니다.
최신 데스크톱 브라우저에서는 레이아웃 스래싱의 부작용이 명확하지 않을 수 있지만, 저사양 모바일 장치에서는 문제가 심각합니다.

빠른 해결

이상적인 세상에서는 단순히 코드 실행 순서를 재정렬하여 DOM을 일괄적으로 읽고 작성할 수 있습니다. 즉, 문서는 한 번만 리플로우하면 됩니다.

코드 복사 코드는 다음과 같습니다.

//읽기
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// 쓰기(레이아웃이 잘못됨)
element1.style.height = (h1 * 2) 'px';
element2.style.height = (h2 * 2) 'px';
element3.style.height = (h3 * 2) 'px';
// 프레임 끝에서 문서 리플로우

현실 세계는 어떻습니까?

현실적으로는 그렇게 간단하지 않습니다. 대규모 프로그램에서는 코드가 어디에나 분산되어 있으며, 이 위험한 DOM은 어디에나 존재합니다. 단지 실행 순서를 제어하기 위해 분리된 아름다운 코드를 쉽게 혼합할 수는 없으며, 당연히 그렇게 해서도 안 됩니다. 그렇다면 성능을 최적화하기 위해 일괄 읽기 및 쓰기를 어떻게 수행합니까?

요청 애니메이션 프레임 충족

window.requestAnimationFrame은 setTimout(fn, 0)과 유사하게 다음 프레임에서 실행될 함수를 예약합니다. 이는 모든 DOM 쓰기 작업이 다음 프레임에서 함께 실행되도록 예약하고 DOM 읽기 작업이 현재 순서로 동기적으로 실행되도록 예약하는 데 사용할 수 있기 때문에 매우 유용합니다.

코드 복사 코드는 다음과 같습니다.

//읽기
var h1 = element1.clientHeight;
// 쓰기
requestAnimationFrame(함수() {
element1.style.height = (h1 * 2) 'px';
});
//읽기
var h2 = element2.clientHeight;
// 쓰기
requestAnimationFrame(함수() {
element2.style.height = (h2 * 2) 'px';
});
……

이 글이 모든 분들의 JavaScript 기반 웹 프로그래밍에 도움이 되기를 바랍니다.