Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- textContent
- useEffect
- 개발일지 #TIL #프론트엔드 #HTML
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- 깃허브오류
- React
- 결합선택자
- 의사클래스
- 부트캠프
- CSS
- 특성선택자
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- Til
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- 리액트
- querySelector
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- 부트캠프 #CSS #개발일지 #TIL
- JS예제
- useState
- ㅜㄹㄹ
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- js
- 부트캠프 #개발일지 #TIL #Position #위치
- 템플릿스트링
- appendChild
- 개발일지
- 알고리즘
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
Archives
- Today
- Total
목록2024/03/11 (1)
나의 개발일지
성능 최적화하기(1) - Lazy loading
레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술이다. 레이지 로딩을 적용하게 되면 최초 페이지 로딩 시간을 개선하고 최초 데이터 전달 양을 감소시키는 것이다 웹페이지를 로딩하는 기존 방식은 리소스들을 한 번에 받는 것인데 로딩 시간이 더욱 길어지고 사용자 경험을 하향시키는 것이다. 레이지 로딩은 주로 이미지와 영상들에 적용이 되고, 유저가 스크롤을 내려서 해당 이미지가 뷰포트에 들어오게 될 경우, 자비스크립트가 그 플레이스 홀더를 대체하면서 제대로된 사이즈의 이미지를 로딩하게 되는 것이다. 우선 lazy Loading을 사용하기 위해 라이브러리를 설치한다. https://www.npmjs.com/packag..
과제 및 팀프로젝트
2024. 3. 11. 10:37