Front End Develop Front End Develop

브라우저에서 웹 사이트를 꾸미는 것에 있어서 우리는 각자 다양한 방식으로 많은 스타일 속성들을 사용하여 꾸미게 됩니다. 그런 상황에서도 브라우저 렌더링을 최소화 할 수 있고 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..

DOM과 CSSOM 첫째, 브라우저에는 자바스크립트 엔진과 렌더링 엔진이 포함되어 있다는 것을 이해하는 것이 중요합니다. 우리는 후자에 초점을 맞출 것입니다. 예를 들어 WebKit (Safari), Blink (Chrome), Gecko (Firefox) 및 Trident / EdgeHTML (IE / Edge)과 관련된 세부 정보를 논의 할 것입니다. 브라우저는 DOM 및 CSSOM을 구성하는 Conversion, Tokenization, Lexing 및 Parsing 프로세스를 거칩니다. Conversion : HTML 및 CSS에서 원시 바이트를 읽어냅니다. Tokenization : 입력단위를 청크단위로 나눕니다. (시작태그, 종료태그, 속성이름, 속성값 등). 공백 및 줄바꿈과 같은 관련 없는..