JavaScript 위젯을 사용할 때 어떻게 페이지 리플 로우를 줄일 수 있습니까?

Question

많은 자바 스크립트 라이브러리에는 사용자 인터페이스 위젯이 있습니다.

일반적으로 페이지가로드 된 후 으로 생성됩니다. 사용자가 페이지를 다시보고 페이지의 일부가 바뀌거나 모양이 바뀝니다.

페이지가로드 될 때 발생하는 리플 로우 양을 줄이려면, 특히 여러 위젯을 사용하는 경우 어떻게합니까?

다음은 몇 가지 예입니다. 리플 로우가 그렇게 나쁘지되지 않도록이 정말 기본적인하지만, 특히 클리어 캐시와 느린 인터넷 연결, 거기 :

• YUI 3 : 메인 단락은 메뉴 탐색 요소를로드 한 후 아래로 이동합니다.
• BBC Glow : 로고가 세로 목록으로로드 된 다음 회전식 컨트롤로 변경됩니다.
• YUI 2 : 표가 일반 것처럼 나타나고 갑자기 모양이 바뀝니다.
• jQuery DataTables Plugin : 테이블 전체가 재 스타일 및 페이지가 매겨지기 전에 평이합니다.

Answer 1

대부분의 타사 스크립트를 사용할 때의 문제점은 클래스를 추가하거나 HTML을 다시 포맷하는 JavaScript 코드에서 모든 더러운/바쁜 작업을 수행한다는 것입니다.

페이지를 다시 그리는 유일한 방법은 다른 사람들이 숨기고 표시 할 것을 제안하거나 CSS 클래스를 활성화하고 HTML을 적절하게 마크 업하여 HTMLfor 컨트롤을 이미 가지고 있어야합니다.

위젯을 코딩 할 때 해당 기능을 구현합니다. 개발자가 말하듯이 콘텐츠 플래시가 마음에 들지 않거나 spendic을 뱉어 내기 위해 백엔드를 코딩 할 수 있다면 최소한의 마크 업을 할 수 있다고 말합니다 위젯에 필요한 HTML 마크 업.

나열된 스크립트에 코드가 이미 마크 업되어있는 것으로 생각하지 않습니다. 따라서 콘텐츠 플래시를 사용하거나 숨어있는 상태로 머물러있을 수 있습니다. [숨기면 렌더링 할 때 위치 데이터에 의존하는 스크립트가 망가질 수도 있습니다!]

Answer 2

할 수 있습니다 :

가) 완전히 초기화 될 때까지 위젯을 구성하는 요소 (예를 들어, 자사의 "가시성"에서 "숨겨진"값을 적용)의 숨기기 가시성.

b) 지원 클라이언트에서 "DOMContentLoaded"이벤트와 같이 창 "load"이벤트가 발생하기 전에 위젯을 초기화하십시오. 이렇게하면 깜박임을 최소화 할 수 있습니다.

Answer 3

모든 것을 보이지 않게 둘러 쌉니다. <div>. 그런 다음 페이지 전체로드에서 표시되도록 설정하십시오 (onLoad 이벤트 사용).