Web
2 posts
웹사이트 최적화: 성능 개선

HTTP 요청 최소화 웹사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성되는데 이 요소는 모두 웹서버에 있으며, 사용자의 컴퓨터로 가져오는데 네트워크 비용이 들고 이 비용은 곧 응답시간으로 이어진다. 그렇기 때문에 다운로드해야하는 구성 요소의 개수를 줄이는 것이 가장 크고 효과적이다. 재사용 방문자를 위해 캐시 설정을 진행할 수도 있다. 파일 개수 최소화 웹사이트의 성능을 개선할 때는 파일의 용량보다 개수가 더 중요하다. 아주 용량이 작은 파일이라도 원격 서버에서 가져와야한다면 네트워크 비용이 든다. 파일이 캐시에 있더라도 해당 파일이 유효한지 판단해야하며 병렬로 다운로드 하는데 한계가 있기 때문에 파일의 개수가 늘어나는 것은 성능에 치명적이다. 파일 크기 최소화 쿠키 크기 최소화 필요한 정보를 저장하는 가장 쉬운 방법이 최상위 도메인을 이용해 쿠키를 설정하는 것인데 이렇게 되면 자바스크립트 파일이나 스타일시트 파일, 이미지 등 쿠키 정보가 필요없는 구성 요소를…

January 09, 2022
FrontEnd
Web
웹사이트 최적화: 브라우저 처리 과정

브라우저 브라우저는 1. 서비스 이동, 2. 리다이렉트, 3. 어플리케이션 캐시 확인, 4. 네트워크 통신, 5. 브라우저 처리 단계로 나누어지며 각 단계마다 최적화에 고려해야 할 사항들이 있다. 동작 방식 기반 최적화 웹페이지 최적화는 브라우저가 네트워크와 통신하는 과정과 브라우저에서 페이지를 표시하는 과정에서의 응답 속도를 개선하는 것이기 때문에 브라우저가 어떻게 동작하는지 이해하는게 좋다. 서비스 이동(prompt for unload) 사용자가 웹 서비스를 이용하다 다른 주소로 이동할 때 브라우저가 제일 먼저 실행 사용자가 웹 서비스를 이용하다 다른 주소로 이동할 때 브라우저가 제일 먼저 실행하는 단계로 페이지가 표시될 떄 이벤트가 할당되고 메모리를 사용하게 되는데 이 메모리를 더이상 사용하지 않을 때(페이지를 떠날 때) 메모리를 해제해야한다. 필요없는 메모리를 해제(가비지 컬렉션)하지 않으면 브라우저가 응답 없음 상태가 되거나 실행 속도가 급격히 느려지게 된다. DOM의 …

January 06, 2022
FrontEnd
Web