홈페이지 » 코딩 » 초보자 가이드 CSS 객체 모델 (CSSOM)

    초보자 가이드 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은 웹 브라우저에서 렌더링됩니다..

    이미지 : Google 개발자

    DOM & CSSOM 모두에서 모든 정보는 다음과 같습니다. 바이트에서 디지털지도로 변환 된 웹 문서의 모든 요소를 ​​렌더링합니다. 프로세스는 다음과 같이 작동합니다.

    1. 브라우저 HTML을 다운로드한다. 웹 페이지.
    2. HTML을 처리하는 동안 파서는 링크 요소에 충돌 할 수 있습니다. 외부 스타일 시트 참조하기.
    3. 이 CSS 스타일 시트는 지도로 파싱 됨 CSS Object Model 스펙 사용.
    4. 결과 코드는 DOM의 요소에 적용된다..

    이 모든 일이 매우 빠르게 일어나고 발생합니다. 모든 단일 페이지 요청과 함께. 아래의 다른 다이어그램은 CSSOM의 트리 구조 예.

    이미지 : Google 개발자

    다이어그램의 일부 속성이 밝은 회색 글꼴 색상을 갖는 방법에 유의하십시오. 이러한 속성은 다음과 같습니다. 부모로부터 상속 된. 본문은 특정 글꼴 크기를 가지므로 덮어 쓰지 않는 한 본문 내의 모든 요소는 해당 글꼴 크기를 가져옵니다..

    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 만들기
    • 모든 프론트 엔드 개발자가 웹 페이지 렌더링에 대해 알아야 할 사항