annyhpk.log

Web

[html] <img> 태그 이미지 로딩 지연 시키기

1. 지연로딩을 시키는 이유 1. 많은 이미지, 용량이 큰 이미지 로딩 2. 이미지 로딩중 - [웹 페이지 로딩 상태, 유저 인터렉션 X] 3. 유저 이탈 확률 증가 우선 화면을 그리는데 집중하고 나중에 이미지를 로딩 시키자 라는 방법론 2. HTML 이미지 태그 속성 으로 지연 시키기 //다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다. - loading="option" 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager(기본값) : 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. lazy : 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 스크롤링을 하다가 이미지를 보게 될 것으로 충분히 예상 가..

Web

[HTML] html 태그로 Toggle, Auto complete 구현

- Toggle 기능 - 결과물 - HTML 삽입 미리보기할 수 없는 소스 - 코드 - 오늘의 메뉴 김치찌개 배추김치 계란후라이 시금치무침 백미밥 & - Auto complete 구현 - 결과물 - HTML 삽입 미리보기할 수 없는 소스 - 코드 - 좋아하는 프로그래밍 언어는?

Javascript

리스트에 이벤트를 효율적으로 등록해보자!>

기존의 코드 - 각 태그를 선택하여 각각 이벤트를 주입해준다. 1 2 3 4 5 6 개선된 코드 - 태그에 이벤트를 주입하고 클릭한 이벤트가 이라면 내부로직을 동작시킨다. e.currentTartget : 이벤트 발생 시작 요소 ( 이벤트 핸들러가 부착된 요소) e.target : 이벤트 전파 최하단 요소 1 2 3 4 5 6