[CS] 웹 페이지를 빠르게 로딩하는 방법-작성중

• 내용 추가 필요(210710)

  웹 페이지 로딩

---

• 보통 스크린은 1초에 화면을 60번 그림, 60fps(frame per second)인 것인데 따라서 브라우저 역시 60fps를 유지해야 웹페이지가 매끄럽게 보임
  • 만약 브라우저가 1초에 60프레임을 그려내지 못하게 되면, 웹페이지에서 스크롤을 내린다거나 드래그를 할 때 버벅이는 현상 발생(Jank)
  • 최적화(Optimization)가 필요

네트워크 요청에 빠르게 응답하자

• 리다이렉션을 피할 것 : 응답 시간이 지연됨
• meta-refresh 사용금지 ??
• CDN(content delivery network)을 사용할 것 ??
• 동시 커넥션 수를 최소화 할 것 ??
• 커넥션을 재활용할 것(Connection : keep alive)

자원을 최소한의 크기로 내려받자

• gzip 압축을 사용할 것(전송데이터 압축, 전송 시간이 줄지만 클라이언트에서 압축 해제에 시간이 들어 사이즈가 작은 경우 불필요)
• HTML5 App cache를 활용할 것, 브라우저 캐시를 활용(자원을 캐시 가능하게 할 것)
• 조건 요청을 보낼 것 ??

효율적인 마크업 구조를 구축하자

• @import 의 사용을 피할 것 ??
• inline 스타일과 embedded 스타일은 피할 것 ??
• 사용하는 스타일만 CSS 에 포함할 것
• 중복되는 코드를 최소화 할 것

미디어 사용을 개선하자

• 이미지 파일 압축
• 이미지 스프라이트를 사용할 것 ??
• 실제 이미지 해상도를 사용할 것
• 비디오의 미리보기 이미지를 만들 것(비디오 로딩을 비동기로 구현, 미리보기 이미지를 만들어둠)

빠른 자바스크립트 코드를 작성하자

• 코드를 최소화할 것
• 필요할 때만 스크립트를 가져올 것 : flag 사용
• DOM 에 대한 접근을 최소화 할 것 : Dom manipulate 는 느리다
• 다수의 엘리먼트를 찾을 때는 selector api 를 사용할 것
• 마크업의 변경은 한번에 할 것 : temp 변수를 활용
• DOM 의 크기를 작게 유지할 것
• 내장 JSON 메서드를 사용할 것 ??

애플리케이션의 작동원리를 알고 있자.

• Timer 사용에 유의할 것
• requestAnimationFrame 을 사용할 것 ??
• 활성화될 때를 알고 있을 것 ??