기술/성능분석3 프런트엔드 성능 최적화 - 렌더링 최적화 2. 렌더링 최적화 1. 레이아웃 스래싱 2. 가상돔 3. 웹 워커 1. 레이아웃 스래싱 HTML과 CSS를 파싱해서 렌더 트리를 만들어 레이아웃을 그린다. 레이아웃을 그리는 작업은 요소 하나 하나 크기와 위치를 측정하기 때문에 오래 걸리고 비용이 큰 과정이다. 페인트를 하고 화면을 뿌린다. HTML-DOM > CSS-CSSOM > Redner Tree > Layout > Paint > 화면 뿌리기 이 과정이 DOM 변경으로 인해 반복된다. 강제 동기 레이아웃은 DOM 조작이 없는데도 불구하고 이 과정을 강제로 진행해서 강제 동기 레이아웃이라고 한다. 이런 강제 동기 레이아웃을 유발할 수 있는 코드는 한번만 쓰고 캐싱한다. 2. 가상돔 가상돔은 DOM변경을 최소화하는데 의의가 있다. Proxy와 가상돔을.. 2021. 1. 13. 프런트엔드 성능 최적화 - 로딩 최적화 크게 로딩 최적화와 렌더링 최적화에 대한 글 최적화를 왜 하나. 사이트를 최적화하면 로딩 시간이 적게 들고 방문자는 사이트에 오래 머물고, 다시 찾고, 클릭률 상승, 매출이 는다 통계가 있다. 1. 로딩 최적화 방법 2. PWA 케이스 소개 3. 랜더링 최적화 방법 목적은 로딩이 빨라야 하고 랜더링이 부드러워야 한다. 1. 로딩 최적화 1) 브라우저 기준 최적화의 문제점 2) 사용자 기준 최적화 3) 프리 렌더러 4) PWA 사례 2. 렌더링 최적화 1) 레이아웃 스래싱 2) 가상돔 3) 웹 워커 1. 로딩 최적화 (브라우저 기준) 1) Navigation Timing : Resource, Processing, Load 2) 로딩과 Critical Rendering Path 관계 3) 로딩 성능 : 자바.. 2021. 1. 12. 웹 페이지 속도 테스트 및 개선방법 페이지 속도는 블로그 포스트 검색 순위에 영향을 미친다. 구글의 경우 속도가 2% 느려지면 검색량도 2% 감소 야후는 400ms 빨라지면 트래픽이 9% 증가한다. 로딩 속도가 너무 느리면 창을 끄고 비슷한 정보를 볼 수 있는 다른 사이트로 이탈한다. 사용자가 이탈하지 않고 만족하면서 사이트에 머무는 적정한 로드시간은 1~2초 전환 최적화 전문가 제레미 스미스 Jeremy Smith에 따르면, 1~2초가 가장 좋다. 3~6초는 평균으로 사용자가 참을만 하다. 7~10초 속도개선 작업 필요하다. 10초 이상 사용자 이탈이 발생한다. 사이트의 로딩 속도를 확인하는 방법, 그리고 미충족 결과에 대한 개선 방법을 하려면 어떻게 해야 할까. 웹사이트 퍼포먼스를 모니터링하고 최적화하는 방법의 기준은 아래와 같다. 1.. 2021. 1. 9. 이전 1 다음
