목록웹 성능 최적화 (6)
FrontEngineer JungBam
preload 타이밍 1. 마우스가 그 이벤트를 하러 갈때 2. 초기화 렌더링이 끝나고 componentDidMount 타이밍 preload 기능이 포함된 lazyload 시키기(feat.유동균) const lazyWithPreload = import =>{ const Component = React.lazy(import) Component.preload = import return Component } 이미지 prelaod 시키기 const preImg = new Image() preImg.src = 파일 주소 위의 코드를 통해 preload 타이밍에서 이미지 소스를 불러오고 앞서 블로그에 글을 남겼던 HTTP의 캐시를 통해 이 이미지를 먼저 로드해놓았다가 사용할 수 있게 된다.
애니메이션 최적화
턴제 게임의 특성상 타이머를 구현해야 했고 처음에는 쟁크현상이 발생하였었다. 이것을 부드럽게하기 위해 작업했을 때 너무 많은 Reflow가 발생하였는데 이런 점을 최적화 할 수 있는 방법에 대해서 알게 되었다. ※ 쟁크 현상 : 초당 60프레임을 그리는 브라우저의 특성과 달리 초당 60프레임이 주어지지 않았을 때, 살짝 끊기는 듯한 화면이 그려지는 현상 Reflow => 렌더링 과정이 모두 재실행되는 것 Repaint => color, background-color 변경의 경우 layout을 생략하고 paint 작업으로 넘어가는 것 GPU의 도움을 받아 Reflow와 Repaint 피하기 => tranform, opacity를 변경하게 될 경우 layout과 paint 과정을 모두 생략하고 Composi..
웹 성능 최적화 // 번들링 최적화
웹팩을 가이드라인을 따라 기본적인 동작원리가 이해가 되었다 싶어서 프로젝트의 번들링 결과를 확인해보았다. webpack을 eject를 통해 뜯어보는 것은 지양하라고 하여 방법을 찾던 중 강의에서 들었던 분석 라이브러리를 사용해서 보았다. 애니메이션 라이브러리와 page를 네임스페이스 패턴으로 작성한 스크립트가 비율이 엄청 크다는 것을 알 수 있었다. 이 부분에 대해서 코드 스플리팅을 해야겠다라는 생각이 들었다. 두번째 사진이 코드 스플리팅 이후 번들링에서 index.js에 포함된 게임에 필요했던 모듈들이 제외되면서 번들 자체가 확실히 줄어든 것을 확인할 수 있었다. 두번째 이후 ICON.js에도 코드 스플리팅을 적용했을때 번들 자체가 확실히 줄어든 것이 눈에 띄었다. 초보 수준의 번들링 최적화지만 결과가..
웹 성능 최적화 // 로드와 렌더링
Light house? 웹 성능을 분석하는 도구로 별도의 라이브러리였으나 구글 개발자도구에 audit으로 포함되었고 최근에는 확장팩을 통해 추가하여 사용가능 하다. 성능을 분석했을 때 위의 화면처럼 각각의 문제점들이 나오게 된다. Opportunity는 로딩에 대한 개선점들이 나오고 DIAGNOSTICS에는 렌더링에 관련된 항목들이 나온다. Light house에서는 이런 점들에 대해 개선시킬 수 있는 기본적인 가이드 라인을 제공하는데 이 가이드 라인을 참고해서 성능 최적화의 첫 발을 딛게 되었다.
웹피란? web과 picture가 합쳐진 단어로, 웹에서 사용되는 gif, jpg, png의 이미지 파일을 대체하기 위해 개발된 이미지 포맷이다. 웹피의 장점 1. 가장 큰 장점은 파일 사이즈이다. 특히, gif파일의 경우에는 손실방식으로 저장하면 20~30%까지 줄일 수 있다. 이러한 장점은 이미지 저장 및 사용에 드는 리소스를 줄일 수 있을 것이다. 2. 두번째를 현실적으로 느껴지는 것은 확장자 명이 하나라는 점이다. 여러가지 확장자명을 고민할 필요없이 webp면 된다는 점이다. 3. 구글에서 webp에 대한 소스를 오픈했기 때문에 이를 사용하는데에 어떠한 비용도 추가되지 않는다는 점이 있다. 웹피의 단점 아직 많은 편집기들이 webp를 지원하지 않는 경우가 있고 IE를 포함한 몇몇 브라우저에서는 해..
코드 스플리팅이란 ? - 자바스크립트로 개발하였을 때에 프로젝트가 커질 수록 자바스크립트 파일 용량이 커지고 용량이 커지면 페이지 로딩속도가 느려지게 되는데, 이 부분에 있어서 지금 필요한 코드가 아닌경우에는 나중에 필요할때 불려지도록 하는 작업을 말한다. 이를 통해서 로딩속도를 개선할 수 있다. 프로젝트의 페이지 중에 꼭 필요한 페이지와 필요하지 않을 수 있는 페이지를 나누어 필요하지 않을 수 있는 페이지의 경우 스플리팅되도록 작업했다. 이렇게 분류된 페이지로는 프로필 설정 페이지, 회원탈퇴 페이지, 에러 페이지, 서버점검 페이지로, 해당 페이지들은 React.lazy를 통해 스플리팅 작업을 했다. React.lazy와 함께 suspense를 사용하여 해당 페이지들이 필요시 불려올때 로딩페이지를 띄워줄..