web2 Critical Rendering Path(CRP) CRP이란 CRP은 브라우저가 HTML, CSS, JS를 변환하여 스크린으로 보여주는 과정을 의미합니다. CRP을 최적화한다면 웹페이지의 성능을 크게 향상할 수 있다고 합니다. CRP은 그림에서 보다시피 Request/Response => loading => scripting => rendering => layout => painting으로 구분됩니다. Requset/Response : 브라우저가 서버에게 요청/응답을 보냄 loading : 브라우저가 서버에서 파일 받아옴(html, css, js) scripting : html파일을 DOM요소로, css 파일을 cssom요소로 (DOM : document object model) (DOM + CSS = CSSOM) rendering : DOM 과 CSS.. 2022. 2. 8. getBoundingClientRect() Vs css 좌표 getBoundingClientRect()는 엘리먼트의 좌표값을 알 수 있는 api입니다. 그런데, 이 좌표값이 css와 혼동이 있어서 정리 해 보았습니다. getBoundingClientRect() css ex) (getBoundingClientRect()) right:1240px; bottom:569 (css) position: fixed right:40px; bottom:40px; 두 좌표가 같은 element를 의미하고 있습니다. (화면크기에 따라 위에 해당 하는 값 다를 수 있음) 결론 getBoundingClientRect()를 이용할 때는 right, bottom의 기준이 왼쪽 상단이지만, css에서 right, bottom을 측정할 때는 element를 기준으로 값을 지정했습니다. 2022. 2. 1. 이전 1 다음 반응형
