렌더링 반응형 2 렌더링 최적화방법 렌더링 최적화 방법 1. 인라인 스타일 사용하지 않기 인라인 스타일은 가독성을 해칠 뿐 아니라 수차례 리플로우를 발생시킵니다. 그에 반해 외부 스타일을 사용할 경우 한 번만 리플로우를 발생합니다. 2. 작업 그룹핑 DOM 요소의 정보를 요청하고 변경하는 코드는 같은 형태의 작업끼리 묶어 실행시키는 것이 좋습니다. function popChange() { let width = document.getElementById("pop1"). style.width; document.getElementById("pop2"). style.width = width; let height = document.getElementById("pop3"). style.height; document.getElementById("po.. 2021. 8. 26. 렌더링 이란? 렌더링 이란? 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 보여주는 과정입니다. 브라우저는 서버로부터 HTML 문서를 받습니다. 그리고 브라우저의 렌더링 엔진은 HTML문서를 파싱 해서 DOM트리를 만들어 줍니다. 그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱 하여 CSSOM(CSS Object Model) 트리를 만들어 줍니다. 그 결과 인라인으로 들어가 있는 스타일 속성이 우선순위를 가지게 됩니다. 다음으로 DOM트리와 CSSOM을 결합하여 렌더링 트리를 형성합니다. 이때 화면에 드러나지 않는 head 태그나 display 속성에 none 값이 할당된 요소는 렌더 트리에 포함되지 않습니다. 다음은 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정이 진행됩니다. 이.. 2021. 8. 23. 이전 1 다음
