CSS 작업과정 소개(그림과 텍스트)

이 글은 CSS의 작업 과정(그림과 텍스트)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우리는 일상 업무에서 HTML 페이지를 수정하기 위해 일부 프레임워크나 간단한 CSS를 사용할 수 있습니다. 따라서 수석 프런트엔드 실무자가 자신의 작업 원리와 프로세스, 기술을 알아야 하는지 신중하게 생각해 보세요. 이런 종류의 것이라면 사용하기가 더 쉬울 것입니다. 그래서 아래에서는 CSS의 작업 과정을 소개하겠습니다.
고전적인 질문이 있습니다. URL을 입력한 순간부터 페이지를 볼 때까지 어떤 일이 발생하나요? 이 질문에 대한 대답은 길 수도 있고 짧을 수도 있습니다. 대답이 자세하면 수천 단어가 될 것입니다. 여기서는 HTML, CSS, JS 및 기타 다양한 파일을 받는 것부터 시작하겠습니다. 이전 파일은 이 질문의 초점이 아닙니다.
일반적으로 프로세스는 다음 단계로 구분됩니다.

1. HTML 마크업을 처리하고 DOM 트리를 구축합니다.
2. CSS 마크업을 처리하고 CSSOM 트리를 구축하세요.
3. DOM과 CSSOM을 렌더링 트리에 병합합니다.
4. 각 노드의 기하학적 정보를 계산하기 위해 렌더링 트리에 따라 레이아웃합니다.
5. 개별 노드를 화면에 그립니다.

기분이 좋지 않나요? 몇 가지 간단한 과정을 통해 페이지가 보기 좋게 보일 수 있습니다. 이것은 아직은 매우 피상적인 내용입니다. 최근 Bob 선생님의 라이브 수업에서 더 깊은 내용이 언급됩니다. 이러한 여담으로 들어가지 않고 CSS의 작업 프로세스를 보다 명확하게 이해하는 데 도움이 되는 몇 가지 그림을 그려 보겠습니다.

1. DOM 트리 구축: HTML 파일이 로드된 후 브라우저는 DOM 트리를 구축하기 시작합니다. DOM 트리는 HTML 문서의 요소들의 계단식 관계를 설명하는 트리입니다.

2. CSSOM 트리 구축: DOM과 유사하게 CSS를 사용하여 트리를 구축해야 합니다. 먼저 CSS 바이트는 문자로 변환된 다음 토큰과 노드로 변환되고 마지막으로 "CSS객체 모델"(CSSOM)이라는 트리 구조에 연결됩니다. CSSOM 트리는 다음과 같습니다.

3. DOM 트리와 CSSOM 트리는 다음과 같은 렌더링 트리로 병합됩니다.

4. 그리기/래스터화: 우리는 이미 각 요소의 스타일과 레이아웃을 알고 있으며 다음 단계는 브라우저 커널(보통 webkit 커널)을 사용하여 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하여 계산합니다.

5. 화면에 그립니다.

【추천 강좌: CSS 동영상 튜토리얼】

위 내용은 CSS 작업과정 소개(그림과 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!