본문 바로가기

성능3

웹에서 개선할 수 있는 성능 문제들을 분류하기 웹에서의 성능을 개선하는 작업들을 종종 한다.성능 개선작업에서 제일 중요한 건 무엇을 왜 개선해야하는 지를 계속 상기하는 것이다.겪는 문제를 정확히 분류할 수 있다면, 문제가 작고 보편적인 문제로 바뀐다.웹에서 성능의 문제가 될 내용들을 분류해보자. 크게 분류컴퓨터 입장(브라우저가 동작하는 모든 기기)에서 생각해보자. 브라우저가 웹이란 것을 사용자에게 보여주기 위해 해야할 것은 세 가지로 정의 가능할 것 같다.불러오기, 읽기, 그리기 즉 사용자가 현재 느리다고 느끼다면, 셋 중 하나가 느리다.각각을 더 자세히 정의해보자. 불러오기여기서 불러오기는 서버로부터 자원을 요청하고 다운로드하여, 브라우저 프로세스의 메모리에 적재하는 과정이다.불러오는 것이 느린 이유들을 분류해보자.서버 기기의 성능서버의 위치자원의.. 2024. 6. 19.
브라우저 스토리지를 이용하여 네트워크 요청 줄이기 프론트엔드에서 네트워크 요청을 줄일 수 있는 두 가지 방법에 대해 다루는 글을 작성하였다.이전 글 바로가기첫번쨰 글에서 작성한 두 가지 방법은 다음과 같았다.적당한 단위를 산정하여 인피니티 스크롤 적용하기정적 페이지로 만들어 관리하기이번에는 브라우저 스토리지를 이용한 캐싱 방식에 대해서 글을 작성해보려 한다.브라우저 스토리지는 메모리보다 값을 오래 저장할 수 있도록 도와준다. Table Of Content브라우저 스토리지들의 차이점장바구니 개수 컴포넌트로 생각해보는 장바구니 개수 캐싱캐싱을 이용할 때 주로 고려해야할 것들브라우저 스토리지를 이용한 캐싱브라우저 스토리지에는 로컬 스토리지, 세션 스토리지, 쿠키가 있다.위 세개의 스토리지에 저장을 해두고 값이 갱신되지 않는 경우에 값을 그대로 받아오는 방식을.. 2023. 8. 10.
프론트엔드에서 네트워크 요청 줄이기 DAU 50만 정도의 순간 트래픽이 높은 서비스를 개발중이다.그리고 외부 API를 사용하기 때문에 트래픽 제어가 쉽지 않고 요청이 많아질 경우 비용도 높아지는 문제가 있다.또 현재 개발하고 있는 앱의 연령층은 10대, 40~50대 위주이기 때문에 데이터 비용의 부담도 유저의 이탈을 만들게되곤 한다.그렇기에 사용자 경험을 저해하지 않는 수준의 API 요청 최소화를 생각하며 개발하고 있다.시행착오를 겪으며 사용한 방법들과 고려해야했던 이유들을 다시 한번 검증하고 공유하기 위해 글을 정리한다.내용을 잘 정리하기 위해 글을 두 편으로 정리하려한다. Table Of ContentAPI 요청을 줄여야 할 때는 언제일까적당한 단위를 산정하여 인피니티 스크롤 적용하기정적 페이지로 만들어 관리하기다음 글 Table Of.. 2023. 7. 24.