FEDev Story

페이지 라이프사이클은 크게 3가지로 분류된다. 로드 시점과 관련된 이벤트로써, 발생하는 시점은 다음과 같다. DOMContentLoaded - HTML 이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img etc) 가 아직 로드되어지지 않았을 때 load - 브라우저에 모든 리소스(img, style, script, etc) 가 로드되었을 때 beforeunload / unload - 페이지를 떠날 때 위 내용만으로도 DOMContentLoaded 가 load 보다 빨리 발생한다는 것을 알 수 있다. (unload 에 대한 것들은 사용빈도가 낮기 때문에 생략하겠다.) 각 이벤트에 대한 유용한 경우는 다음과 같다. DOMContentLoaded - DOM 이 준비 상태이기 때문에, DOM 노..

HTML 구조를 다루는 DOM 파서 CSS 구조를 다루는 CSSOM 파서 이 둘의 작업이 완료되면 렌더링 트리를 만들어 렌더링이 시작되고 페인팅되어 브라우저에서 우리가 볼 수 있게 된다. 문제는 이 파서들의 작업을 멈추게 하는 경우가 있다는 것. 크롬 개발자도구의 네트워크 탭 하단을 보면 DOMContentLoaded 항목의 속도가 표시되어 있는데 의미하는 바는 다음과 같다. HTML 다운로드 시간 + HTML DOM 빌드 시간 렌더링을 빠르게 구축한다는 것은 DOMContentLoaded 에 해당하는 시간을 줄이고 파서 차단을 최소화 시킨다는 말이다. HTML, CSS, JS 상호작용 메커니즘 서버에 http 요청시 서버는 HTML 을 응답하는데 이 과정에는 우리가 인지하지 못하는 컴퓨터간의 효율적인 ..

문제점 Swiper.js를 사용하여 슬라이드 적용시 좌우로 무한루프를 적용하기 위해 아래와 같이 옵션을 설정할 수 있다. {loop:true] 문제는 무한 루프를 적용하기 위해 Swiper.js는 DOM을 좌우로 복사하게 된다. 즉 카테고리가 4개라면 다음과 같이 DOM을 복사한다. 카테고리 4개 * 3 = 12개의 DOM 생성 복사된 DOM 자체는 무겁지 않으나 로딩시 데이트를 한번에 불러와 복사된 DOM에 적용하는 과정에서 성능 저하를 가져오게 된다. 카테고리가 많아질 수록 성능이 더 저하될 수 밖에 없는 구조이다. 스킨케어 메이크업 바디/헤어/향수 가방/지갑 해결책 모든 데이터를 한번에 불러오지 않도록 Ajax를 적용하여 현재 활성화된 탭에 대해서만 데이터를 불러온 후 슬라이드 될 때마다 동적으로 ..