이 기사에서는 DIV 레이아웃 스크롤 시점을 방지하기위한 JS 방법을 설명하며 참조를 위해 귀하와 공유됩니다. 특정 방법은 다음과 같습니다.
최근에 페이지 성능에 노출되었으며 브라우저 렌더링과 같은 미묘하고 독창적 인 콘텐츠가 많이 있습니다. 많은 정보가 있으므로 번역과 각서를 위해 선택했습니다.
JavaScript는 DOM을 여러 번 쓰고 읽고 "레이아웃 범프"가 발생하여 문서가 렌더 트리를 구성하는 프로세스를 유발합니다.
코드 사본은 다음과 같습니다. dom tree1).
// 읽다
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을 배치로 읽고 쓸 수 있습니다. 이는 문서를 한 번에 다시 주문해야 함을 의미합니다.
다음과 같이 코드를 복사하십시오 :/ read
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이 있습니다. 우리는 실행 순서를 제어하기 위해 아름답고 de-core 코드를 쉽게 혼합 할 수 없습니다. 성능을 최적화하기 위해 읽기 및 쓰기를 어떻게 배치합니까?
requestAnimationFrame을 알아보십시오
window.requestanimationFrame은 다음 프레임에서 실행될 함수를 settimout (fn, 0)과 유사하게 예약합니다. 이는 다음 프레임에서 함께 실행하도록 모든 DOM 쓰기 작업을 예약하는 데 사용할 수 있기 때문에 매우 유용하며 DOM 읽기 작업은 현재 순서에서 동기식으로 실행됩니다.
다음과 같이 코드를 복사하십시오 :/ read
var h1 = element1.ClientHeight;
// 쓰다
requestAnimationFrame (function () {
element1.style.height = (h1 * 2) + 'px';
});
// 읽다
var h2 = element2.ClientHeight;
// 쓰다
requestAnimationFrame (function () {
element2.style.height = (h2 * 2) + 'px';
});
...
이 기사의 설명이 JavaScript를 기반으로 한 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.