HTML 및 CSS 성능 개선 정보

5521 단어 HTML 성능 성능 조정 CSS

이번에는 HTML과 CSS의 성능을 향상시키는 팁과 팁입니다.
그러나 그 전에 브라우저가 페이지를 렌더링하는 방법을 알아야 합니다.여기에는 HTML, CSS, JavaScript 및 브라우저가 최종 사용자에게 웹 페이지를 표시하는 데 필요한 모든 절차가 포함됩니다.

주요 렌더링 경로

주요 렌더링 경로 5단계로 구성됩니다.도해하면 이해하기 쉽죠.

이렇게 보았으니, 우리 각 절차를 상세하게 설명해 봅시다.

DOM 및 CSSOM 구축

대부분의 페이지는 HTML, CSS 및 JavaScript로 구성됩니다.웹 브라우저는 사용자에게 무엇을 표시하는지 알려야 한다.따라서 네트워크를 통해 전송된 HTML 페이지를 복호화하여 문서 객체 모델(DOM)을 구축합니다.또한 HTML 태그<p></p>、<div></div>、<h1></h1>를 읽고 영패로 변환합니다.이 영패들은 동시에 노드로 전환될 것이다.
각 태그의 시작과 끝 태그를 순서대로 처리하면 브라우저가 해당 계층 (부모 및 하위 계층) 을 설정합니다.
이것은 보기보다 훨씬 간단하다.위의 그림에서 DOM은 모든 노드(나뭇가지)와 하위 노드(잎)를 가진 나무와 같다고 상상해 보세요.이 트리에는 HTML 구축을 위한 모든 노드 종속성이 포함되어 있습니다.
　　　　

W3C website
DOM은 브라우저에서 단계별로 작성된 전체 태그를 나타냅니다.HTML5 이후 브라우저는 전체 페이지가 브라우저에 한꺼번에 전송되기를 기다리지 않고 HTML 흐름 전송을 지원합니다.그것의 장점은 정보를 받는 동시에 렌더링을 할 수 있다는 것이다.
DOM을 구축하면 브라우저는 페이지에서 참조하는 모든 스타일을 찾아 CSS 개체 모델(CSSOM)을 구축합니다.CSSOM은 문서에 적용해야 하는 스타일 규칙을 나타냅니다.이것은 DOM이 어떻게 구축되었는지와 매우 비슷하지만, 이 과정에서 모든 하위 요소는 부모 요소에 응용된 스타일인 cascading style sheets(연관 스타일시트)의 이름을 계승한다.
스타일의 부분 처리는 불가능하기 때문에 모든 스타일의 규칙을 보내기 전에 브라우저는 어떤 스타일의 규칙이 어느 노드에 적용되는지 추측할 수 없습니다.이것이 바로 CSS가 렌더링을 막는 이유입니다.
DOM과 CSSOM 혼합을 렌더 트리라고 합니다.렌더 트리는 모든 노드와 종속성, 그리고 해당 노드에 적용되는 모든 CSS 규칙을 포함합니다.

렌더 트리

모든 노드를 구축한 후 브라우저는 어떤 노드가 페이지에 표시될지 알아야 합니다.렌더 트리는 페이지에 표시되는 표시 내용 자체입니다.
브라우저는 루트에서 시작하고 DOM과 CSSOM에서 모든 보이는 노드를 복사합니다.다음 단계를 수행합니다.

루트에서 시작하여 각 가시 노드를 따르기

메타 태그나 링크와 같이 보이지 않는 노드가 있습니다.

일부 노드는 CSS(예: display:none)를 사용하여 숨깁니다.

각 노드와 일치하는 CSS 규칙을 찾아 적용

가시 노드와 그 내용 및 스타일 출력

레이아웃 디자인

모든 노드에 스타일을 설정한 다음 화면에 배치할 위치, 즉 레이아웃을 고려해야 합니다.우선 브라우저의 창 크기가 필요합니다.이것은 모든 원소의 위치와 크기를 확정할 것이다. 이것은 이후의 모든 계산의 기초이다.
이 단계의 출력은 정확한 위치와 사이즈뿐만 아니라 여분, 충전, 테두리 등상자 모형도 포착했다.
크기를 조정하거나 이동 터미널에서 가로 및 세로 디스플레이를 전환할 때마다 이 절차가 반복됩니다.

드로잉

마지막 단계는 화면에 픽셀을 그리는 것입니다.브라우저 작업이 많아서 시간이 좀 걸릴 수 있습니다.소요 시간은 창 크기, 각 노드에 적용되는 스타일, 터미널로 사용되는 하드웨어 유형에 따라 달라집니다.
완료되면 페이지가 뷰포트에 표시됩니다.

활용단어참조

주요 렌더링 경로에 대해 이 정도면 충분합니다.그렇다면 HTML과 CSS를 조작하여 웹 성능을 향상시키는 방법을 살펴보자.

클라이언트에 HTML 보내기

클라이언트에 HTML을 보낼 때 마지막으로 한 번만 쓰지 말고 버퍼를 자주 내보내야 합니다.이렇게 하면 HTML의 메시지 그룹을 받기 전에 브라우저가 그것들을 해석할 수 있다.이것은 성능을 향상시킬 것이다.
예를 들어, HEAD 태그를 받으면 브라우저는 다른 HTML 정보를 수신할 때 다른 자산에 대한 요청을 보낼 수 있습니다.

크기를 줄이다

읽기 크기를 줄이고 HTTP 응답 시간을 단축하여 읽기 시간을 단축할 수 있기 때문에 소형화와 압축이 매우 중요합니다.
이러한 기술과 정확한 캐시 정책을 결합하면 네트워크 성능을 현저하게 향상시킬 수 있다.

CSS 신속 전송 및 최소화

보시다시피 CSS는 렌더링을 막는 요소이기 때문에 가능한 한 빨리 클라이언트에게 보내야 합니다.또한 첫 페이지를 읽는 데 필요한 CSS 양을 고려하여 메인 파일에서 사용하지 않은 CSS를 추출하고 필요할 경우 나중에 각각 읽습니다.
성능을 향상시키기 위해 미리 캐시를 불러올 수도 있다.이것들은 구글이 2016년 도입한 PRPL 모드의 일부분이다.
또 다른 기교는 콘텐츠의 바디에서 링크 표시를 사용하는 것이다. 비록 개발자들 사이에서 그렇게 빈번하지는 않지만.HTML에 설명된 style 태그도 매우 유용합니다. 클라이언트에게만 최소한의 CSS를 보내고 나머지는 나중에 필요에 따라 읽을 수 있기 때문에 렌더링 시간을 줄일 수 있습니다.

총결산

한 마디로 하면 관련 물건을 최소한으로 제어하여 신속하고 최적으로 발송한다.사용되지 않는 CSS 규칙을 줄여 전송 속도를 높이고 소형화와 압축을 활용합니다.
이 투고가 좀 도움이 됐으면 좋겠어요.그럼 다음을 기대하세요.😉

참고 자료

웹 성능 관련: Google Developers

주요 렌더링 프로세스 파악: CSS Tricks