이 글은 CSS의 작업 과정(그림과 텍스트)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
우리는 일상 업무에서 HTML 페이지를 수정하기 위해 일부 프레임워크나 간단한 CSS를 사용할 수 있습니다. 따라서 수석 프런트엔드 실무자가 자신의 작업 원리와 프로세스, 기술을 알아야 하는지 신중하게 생각해 보세요. 이런 종류의 것이라면 사용하기가 더 쉬울 것입니다. 그래서 아래에서는 CSS의 작업 과정을 소개하겠습니다.
고전적인 질문이 있습니다. URL을 입력한 순간부터 페이지를 볼 때까지 어떤 일이 발생하나요? 이 질문에 대한 대답은 길 수도 있고 짧을 수도 있습니다. 대답이 자세하면 수천 단어가 될 것입니다. 여기서는 HTML, CSS, JS 및 기타 다양한 파일을 받는 것부터 시작하겠습니다. 이전 파일은 이 질문의 초점이 아닙니다.
일반적으로 프로세스는 다음 단계로 구분됩니다.
기분이 좋지 않나요? 몇 가지 간단한 과정을 통해 페이지가 보기 좋게 보일 수 있습니다. 이것은 아직은 매우 피상적인 내용입니다. 최근 Bob 선생님의 라이브 수업에서 더 깊은 내용이 언급됩니다. 이러한 여담으로 들어가지 않고 CSS의 작업 프로세스를 보다 명확하게 이해하는 데 도움이 되는 몇 가지 그림을 그려 보겠습니다.
1. DOM 트리 구축: HTML 파일이 로드된 후 브라우저는 DOM 트리를 구축하기 시작합니다. DOM 트리는 HTML 문서의 요소들의 계단식 관계를 설명하는 트리입니다.
3. DOM 트리와 CSSOM 트리는 다음과 같은 렌더링 트리로 병합됩니다.
4. 그리기/래스터화: 우리는 이미 각 요소의 스타일과 레이아웃을 알고 있으며 다음 단계는 브라우저 커널(보통 webkit 커널)을 사용하여 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하여 계산합니다.
5. 화면에 그립니다.
【추천 강좌: CSS 동영상 튜토리얼】
위 내용은 CSS 작업과정 소개(그림과 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!