초보자 가이드 CSS 객체 모델 (CSSOM)
많은 사람들이 첫 번째 HTTP 요청 그리고 최종 전달 웹 페이지의 데이터 전송과 브라우저의 렌더링 파이프 라인에는 많은 기술이 필요합니다. 그 중 하나는 CSS 객체 모델, 아니면 그 CSSOM.
CSS Object Model은 CSS 코드를 사용하여 모든 선택기를 렌더링합니다. 나무 구조로 쉽게 파싱 할 수 있습니다. 아마도 개발자가이 개념을 완전히 이해하는 것이 중요하지는 않지만, 더 많은 것을 배우고 싶다면 공부할 가치가있는 주제입니다. 브라우저가 코드를 작동하는 웹 사이트로 렌더링하는 방법.
이 글에서는 CSS Object Model의 기본 사항을 다루고 작동 원리를 보여 드리겠습니다..
CSSOM이란 무엇인가??
CSS 객체 모델이라는 용어는 각 CSS 선택자의지도 및 각 선택자의 관련 속성. 이러한 스타일은 루트 요소이거나 중첩 된 자식이 될 수 있습니다..
CSSOM은 HTML의 DOM, Document Object Model (문서 개체 모델)의 약자입니다. 둘 다 중요한 렌더링 경로 일어날 일련의 단계입니다. 웹 사이트를 올바르게 렌더링한다.. 이 모든 과정이 일어난다. 자동으로, 무대 뒤에서.
그렇다면 CSSOM이 중요한 이유는 무엇입니까? 브라우저가 사용하는지도입니다. CSS 스타일을 올바르게 렌더링 웹 페이지에. 컴퓨터에 모든 단락을 쉽게 알릴 수있는 방법은 없습니다. .메인 콘텐츠 div에는 추가 줄 높이가 있어야합니다..
해결책은 CSS Object Model입니다. 모든 요소와 속성을 매핑합니다. 귀하의 CSS 코드에서.
CSSOM을 사용하면 브라우저에서 페이지에서 스타일 렌더링. 모든 것은 매우 기술적이지만 프로세스에 대해 약간 이해할 가치가 있습니다. 특히 웹 사이트를 만드는 경우.
작동 원리
DOM과 CSSOM 모두 모든 웹 브라우저에서 광범위하게 사용 해석하고 웹 페이지를 렌더링합니다. 아래 다이어그램은 Google Developers Web Fundamentals 가이드에서 제공 한 것입니다. DOM은 웹 브라우저에서 렌더링됩니다..
DOM & CSSOM 모두에서 모든 정보는 다음과 같습니다. 바이트에서 디지털지도로 변환 된 웹 문서의 모든 요소를 렌더링합니다. 프로세스는 다음과 같이 작동합니다.
- 브라우저 HTML을 다운로드한다. 웹 페이지.
- HTML을 처리하는 동안 파서는 링크 요소에 충돌 할 수 있습니다. 외부 스타일 시트 참조하기.
- 이 CSS 스타일 시트는 지도로 파싱 됨 CSS Object Model 스펙 사용.
- 결과 코드는 DOM의 요소에 적용된다..
이 모든 일이 매우 빠르게 일어나고 발생합니다. 모든 단일 페이지 요청과 함께. 아래의 다른 다이어그램은 CSSOM의 트리 구조 예.
다이어그램의 일부 속성이 밝은 회색 글꼴 색상을 갖는 방법에 유의하십시오. 이러한 속성은 다음과 같습니다. 부모로부터 상속 된. 본문은 특정 글꼴 크기를 가지므로 덮어 쓰지 않는 한 본문 내의 모든 요소는 해당 글꼴 크기를 가져옵니다..
HTML 및 CSS 문자열은 다음과 같습니다. 토큰으로 변환 된 그러면 노드로 이해하다 브라우저에서. 이 노드들은 트리 구조 내의 객체 전체 페이지를 구성하는 방법을 정의하는.
CSSOM과 DOM은 완전히 데이터 모델 분리, 그러므로 그들은 따로 따로 구문 분석. 그러나 그들은 둘 다 가지고있다. 유사한 나무 구조들, 둘 다 동일한 목적을 수행합니다. 브라우저에 페이지의 다른 요소를 렌더링하고 식별 할 수있는 구조를 제공합니다..
웹 개발자가 관심을 가져야하는 이유
모든 렌더링 백엔드에서 발생하다, CSSOM 트리에 대해 걱정할 필요가 없습니다. 하지만 어떻게 작동하는지 이해하는 것이 유용 할 수 있습니다..
기억해야 할 한 가지는 CSSOM이 완전히로드되어야합니다. 웹 페이지가 표시되기 전에 페이지의 모든 요소가 어떻게 나타나는지 정의하므로 페이지가 CSSOM 앞에로드되면 일반 HTML로 먼저 표시되고 몇 초 후에 스타일이 표시됩니다.
브라우저는 최종 사용자에게 혼동을주기 때문에 특별히이를 피합니다. 그리고 CSSOM 캐시 할 수 없다.; 그것이어야한다. 각 페이지에 다시 작성.
애셋을 더 빨리로드하지만 브라우저에서 페이지를 렌더링하려면 실제 CSS 파일을 캐시 할 수 있습니다. 항상 CSSOM 파서를 실행해야합니다.. 이는 또한 JavaScript가 렌더링 및 성능에 부정적인 영향을 미칠 수 있음을 의미합니다..
외부 CSS / JS 리소스 및로드 시간에 대해 자세히 알아 보려면이 기사를 읽는 것이 좋습니다..
사이트를 최적화하는 가장 좋은 방법은 자연 계단식 폭포 어느 자원 나란히 놓여있다..
기술적 인 JS API이기 때문에 JavaScript를 사용하여 CSSOM을 조작 할 수 있습니다. 그러나 JavaScript DOM 조작과 비교할 때 많은 목적을 달성하지 못합니다.
CSSOM에 대해 배울 수있는 가장 큰 이유는 웹 사이트가 실제로 어떻게 작동하는지 직접 교육하는 것입니다.
인터넷을 원활하게 운영하는 데 당연하게 여기는 것들이 많이 있습니다. 전체 과정에 대해 조금 더 이해하면 전체가 어떻게 함께 나타나는지 시각화 할 수 있으며 월드 와이드 웹의 존재에 대해 감사하게 여길 수 있습니다..
더 읽을 거리
이 인트로가 CSS Object Model이 무엇인지, 그리고 이것이 웹 페이지에 어떤 영향을 미치는지에 대한 확실한 아이디어를 줄 수 있기를 바랍니다. 그곳에 CSSOM에서 다루기 힘든 부분은 없다., 그래서 그것은 DOM과 약간 다릅니다..
그러나 웹 개발에서 여전히 중요한 기술이며 브라우저 렌더링의 주요 측면을 분명히해야합니다.
CSSOM에 대해 토론하고있는 다른 많은 리소스와 방법에 대해 설명합니다. 자세한 내용을 보려면 다음 링크를 클릭하십시오.
- CSS 객체 모델 개요
- CSSOM 탐색 : CSS Object Analyzer 만들기
- 모든 프론트 엔드 개발자가 웹 페이지 렌더링에 대해 알아야 할 사항
