오늘 저는 웹 렌더링과 그 중요성에 초점을 맞출 것입니다. 많은 문장 들이 이 화제를 언급했지만 대부분의 정보는 단편적이다. 이 일에 대해 생각하기 위해서, 나는 많은 정보원을 연구해야 한다. 그래서 난이 문장 써야 한다고 생각 합니다. 나는 이 문장 가 초심자 에게 매우 유용할 것 이라고 믿으며, 새로 고치고 기존 지식 을 공고히 하려는 전문가 에게도 적용된다.

페이지 레이아웃을 정의할 때는 처음부터 렌더링을 최적화해야 합니다. 스타일과 스크립트는 페이지 렌더링에서 매우 중요한 역할을 합니다. 전문가들은 성능 문제를 피하기 위한 몇 가지 기술을 알고 있다.

이 글은 브라우저의 기술적 세부 사항을 깊이 연구하지 않고 몇 가지 일반적인 원칙을 제공한다. 브라우저 엔진마다 작동 방식이 다르므로 특정 브라우저의 학습이 더욱 복잡해집니다.

브라우저는 페이지를 어떻게 렌더링합니까?

먼저 브라우저에서 페이지를 렌더링하는 일반적인 프로세스를 살펴보겠습니다.

서버에서 받은 HTML 에 의해 형성됩니까? 문서 객체 모델

스타일을 로드하고 구문 분석하여 CSS 객체 모델을 형성합니다.

그런 다음 DOM 과 CSSOM 은 렌더 오브젝트 모음인 렌더 트리를 만듭니다 (Webkit 은 각각 "렌더러" 와 "렌더 오브젝트" 라고 하고 Gecko engine 은 "케이지" 라고 함). 보이지 않는 요소 (예: 헤드 태그 및 display:none 속성이 있는 일부 요소) 를 제외하고 렌더 트리는 DOM 의 구조를 매핑합니다. 렌더링 트리에서 각 텍스트 문자열은 별도의 렌더러로 간주됩니다. 렌더링된 각 오브젝트에는 계산 스타일이 있는 해당 DOM 오브젝트 (또는 텍스트 블록) 가 포함되어 있습니다. 즉, 렌더 트리는 DOM 의 시각적 표현을 설명합니다.

각 렌더 요소에 대해 좌표가 계산됩니다. 이를 "레이아웃" 이라고 합니다. 브라우저는 한 번만 처리하면 되는 "흐름 방법" 을 사용하여 모든 요소를 레이아웃합니다 (테이블은 여러 번 처리해야 함).

마지막으로 브라우저 창에 레이아웃이 표시됩니다. 이 과정을 "그림" 이라고 합니다.

다시 그리다

페이지에서 위치를 변경할 필요가 없는 일부 스타일 (예: 배경색, 테두리 색상, 가시성) 을 수정하면 브라우저는 새 스타일만 요소로 다시 그립니다 (이를 다시 그리기 또는 스타일 재정의라고 함).

새로 고침

재구성 (또는 "재구성") 은 페이지의 변경 사항이 문서의 내용, 구조 또는 요소 위치에 영향을 줄 때 발생합니다. 재정렬은 일반적으로 다음과 같은 변경 사항에 의해 트리거됩니다.

DOM 작업 (예: 요소 순서 추가, 삭제, 변경 또는 변경).

-응? 테이블의 문자 변경을 포함한 컨텐츠 변경 사항

-응? CSS 속성을 계산하거나 변경합니다.

-응? 스타일시트를 추가하거나 제거합니다.

-응? 클래스 속성을 변경합니다.

-응? 브라우저 창 작업 (크기 조정, 창 스크롤).

-응? 유사 클래스를 활성화합니다 (예: 롤오버 상태).

브라우저는 렌더링을 어떻게 최적화합니까?

브라우저는 변경된 요소만 포함하는 영역으로 재정렬 프로세스를 제한하기 위해 최선을 다합니다. 예를 들어 absolue 또는 fixed 위치에 있는 요소의 크기 변경은 자신과 해당 하위 요소에만 영향을 주며 static 위치에 있는 요소에 대해 같은 작업을 수행하면 그 뒤에 있는 모든 요소가 다시 정렬됩니다.

또 다른 최적화는 Jjavascript 코드를 실행할 때 브라우저가 일부 수정 사항을 캐시한 다음 코드를 실행할 때 한 번에 수정하는 것입니다.

예를 들어, 다음 코드는 다시 그리기 및 재정렬을 트리거합니다.

Var? $body? =? $ ('body'); -응?

$body.css('padding',? 1px'); -응? //? 재정렬? 다시 칠해?

$body.css('color',? 빨간색'); -응? //? 다시 칠해?

$body.css('margin',? 2px'); -응? //? 재정렬? 다시 칠해?

//? 실제로 재정렬과 다시 그리기는 한 번만 수행됩니다. -응?

위에서 설명한 대로 한 요소에 액세스하는 속성은 강제로 재정렬됩니다. 위의 코드에 코드 행을 추가하여 요소의 속성을 읽는 경우 이러한 상황이 발생합니다.

Var? $body? =? $ ('body'); -응?

$body.css('padding',? 1px'); -응?

$ body.css ('padding'); -응? //? 여기서 요소의 속성은 한 번 읽혀지고 강제 리플로우가 발생합니다.

$body.css('color',? 빨간색'); -응?

$body.css('margin',? 2px'); -응?

위의 코드로 인해 두 개의 리플로우가 있습니다. 따라서 성능을 향상시키려면 요소 속성을 읽는 코드가 함께 구성되어 있다고 말해야 합니다 (자세한 예는 JSBin 의 코드 참조).

한 가지 경우 강제 스케줄 조정을 트리거해야 합니다. 예를 들어 한 요소의 동일한 속성을 두 번 수정 (예: margin-left) 하고, 초기 설정인 100px 는 애니메이션되지 않은 다음 애니메이션을 통해 값을 50px 로 수정합니다. 구체적인 예는 볼 수 있지만, 물론 나는 여기서 더 많은 세부 사항을 이야기할 것이다.

전환이 있는 CSS 클래스부터 시작하겠습니다.

。 Has- 전환? {?

-웹키트-전환:? 왼쪽 여백? 1s? 긴장을 풀다

-moz- 전환:? 왼쪽 여백? 1s? 긴장을 풀다

-o- 전환:? 왼쪽 여백? 1s? 긴장을 풀다

전환:? 왼쪽 여백? 1s? 긴장을 풀다 -응?

}?

그런 다음 구현:

//우리 요소의 기본값은' has-transition' 속성입니까?

Var? $targetElem? =? $ ('# target elem id'); -응?

//transition 이 포함된 클래스를 삭제하시겠습니까?

$ targetelem.removeclass ('has-transition');

//? Transition 이 포함된 클래스가 없어지면 요소 속성을 변경하시겠습니까?

$targetElem.css('margin-left',? 100); -응?

//? 그런 다음 변환이 포함된 클래스에 다시 추가합니다.

$ targetelem.addclass ('has-transition'); -응?

//? 요소 속성 변경?

$targetElem.css('margin-left',? 50); -응?

위의 구현은 예상대로 실행되지 않았습니다. 모든 수정 사항은 브라우저에 의해 캐시되고 위 코드의 마지막에만 실행됩니다. 우리에게 필요한 것은 강제 재정렬입니다. 이 작업은 다음과 같은 수정을 통해 수행할 수 있습니다.

//transition 이 포함된 클래스를 삭제하시겠습니까?

$ (이거). Removeclass ('has-transition'); -응?

//? 요소 속성 변경?

$ (이거). Css ('왼쪽 여백',? 100); -응?

//변경된 클래스 또는 속성을 즉시 실행할 수 있도록 강제 리플로우를 트리거합니다. -응?

$(this)[0] 입니다. 높은; -응? //? OffsetHeight 는 하나의 예일 뿐이며 다른 속성도 가능합니다. -응?

//? 그런 다음 변환이 포함된 클래스에 다시 추가합니다.

$ (이거). Addclass ("has-transition"); -응?

//? 요소 속성 변경?

$ (이거). Css ('왼쪽 여백',? 50); -응?

이제이 코드는 예상대로 실행됩니다.

실용적인 최적화 권장 사항

몇 가지 유용한 정보를 요약하여 다음과 같이 제안합니다.

-응? 올바른 HTML 및 CSS 를 만들고 파일 인코딩을 잊지 마십시오. 스타일은 head 태그에 작성해야 하고 스크립트 태그는 body 태그 끝에 로드해야 합니다.

-응? CSS 사전 프로세서를 사용하는 대부분의 개발자가 무시하는 최적화 CSS 선택기를 최대한 단순화합니다. 네스트된 레이어 수를 최소한으로 유지합니다. 다음은 CSS 선택기의 성능 순위입니다 (가장 빠른 것부터 시작).

ID 선택기: #id

클래스 선택기:? 。 학급

태그:? 차이

인접한 형제 요소: a+i

상위 요소 선택기:? Ul>

와일드카드 선택기:? *

의사 클래스 및 의사 요소:? A: 호버링? 브라우저가 오른쪽에서 왼쪽으로 선택기를 처리하는 것을 기억해야 합니다. 이것이 맨 오른쪽 선택기가 더 빠른 이유입니다. -# id 또는. 반.

Div? *? {...}? //? 좋지 않아요?

。 목록? 리? {...}? //? 좋지 않아요?

。 목록 항목? {...}? //? 좋아요?

# 목록? 。 목록 항목? {...}? //? 좋아요?

스크립트에서 DOM 작업을 최소화합니다. 속성 및 객체 (재사용 가능한 경우) 를 포함한 모든 내용을 캐시합니다. 복잡한 작업을 수행할 때는 "오프라인" 요소 ("오프라인" 요소는 메모리에만 존재하고 DOM 객체와 분리된 요소) 를 조작한 다음 DOM 에 삽입하는 것이 좋습니다.

JQuery 를 사용하는 경우 jQuery 선택기 모범 사례를 따릅니다.

요소의 스타일을 변경하려면 class 속성을 수정하는 것이 가장 효과적인 방법 중 하나입니다. DOM 트리의 계층 구조가 깊을수록 효율성이 높아집니다 (또한 표현을 논리에서 분리하는 데 도움이 됨).

위치가 절대적이거나 고정된 요소만 가능한 한 애니메이트합니다.

복잡한 스크롤을 사용하지 않을 때? : 호버링? 애니메이션은 좋은 생각입니다 (예: body 태그에 무호버링 클래스를 추가하는 경우).

자세한 내용은 다음 웹 문장 를 참조하십시오.

1. 브라우저는 어떻게 작동합니까

2. 렌더링: 다시 그리기, 재정렬/다시 배치, 스타일 다시 디자인

이 문장 이 당신을 도울 수 있기를 바랍니다!

원본 링크:? Frontendbabel? 번역:? 버락 온라인? -응? 모이제오

번역 링크:? /72692/