브라우저 렌더링2 Repaint만 일어나는 속성, 아예 Repaint도 일어나지 않는 속성 브라우저에서 웹 사이트를 꾸미는 것에 있어서 우리는 각자 다양한 방식으로 많은 스타일 속성들을 사용하여 꾸미게 됩니다. 그런 상황에서도 브라우저 렌더링을 최소화 할 수 있고 Reflow를 아예 안할 수 있는 속성들이 있어 소개드리려고 합니다. 기본적으로 브라우저 렌더링 상황에서는 Javscript > Style > Layout > Paint > Composite 순서를 따르게 됩니다. Layout(Reflow)단계를 뛰어넘게 되면 연산하는 양이 줄어들기 때문에 렌더링이 개선됩니다. Reflow가 일어나는 속성들 position width height left top right bottom margin padding border border-width clear display float font-famil.. 2021. 2. 21. CSSOM이란? (브라우저 렌더링 과정에 대하여) DOM과 CSSOM 첫째, 브라우저에는 자바스크립트 엔진과 렌더링 엔진이 포함되어 있다는 것을 이해하는 것이 중요합니다. 우리는 후자에 초점을 맞출 것입니다. 예를 들어 WebKit (Safari), Blink (Chrome), Gecko (Firefox) 및 Trident / EdgeHTML (IE / Edge)과 관련된 세부 정보를 논의 할 것입니다. 브라우저는 DOM 및 CSSOM을 구성하는 Conversion, Tokenization, Lexing 및 Parsing 프로세스를 거칩니다. Conversion : HTML 및 CSS에서 원시 바이트를 읽어냅니다. Tokenization : 입력단위를 청크단위로 나눕니다. (시작태그, 종료태그, 속성이름, 속성값 등). 공백 및 줄바꿈과 같은 관련 없는.. 2021. 2. 14. 이전 1 다음
