본문으로 건너뛰기
웹 프로젝트 기초집LESSON 18

성능 점검: 이미지·렌더링·불필요한 DOM 작업 줄이기

난이도초급
예상 시간45분
선수지식17강 개발자 도구 디버깅

18강. 성능 점검: 이미지·렌더링·불필요한 DOM 작업 줄이기

1. 이번 강의에서 해결할 문제​

기능은 동작하지만 큰 이미지와 반복 렌더가 초기 표시와 필터 반응을 늦출 수 있습니다. 측정 없이 최적화하지 않고 실제 병목 후보를 확인합니다.

2. 학습 목표​

3. 핵심 개념​

성능 수치는 PC, 브라우저, 캐시, 이미지와 네트워크 상태에 따라 달라집니다. 같은 조건에서 변경 전후를 비교해야 합니다. 첫 화면 핵심 이미지는 즉시, 아래쪽 카드 이미지는 lazy loading을 고려합니다.

4. 단계별 실습​

HTML · 카드 이미지 생성 함수에 속성 추가

game-dev-portfolio/js/app.js
const image = document.createElement('img');
image.src = project.image;
image.alt = `${project.title} 대표 화면`;
image.width = 800;
image.height = 450;
image.loading = 'lazy';
article.prepend(image);

JavaScript · 필터 결과가 같으면 불필요한 갱신 방지

game-dev-portfolio/js/app.js
projectFilters.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-filter]');
  if (!button || button.dataset.filter === activeFilter) return;
  activeFilter = button.dataset.filter;
  // 이후 버튼 상태와 updateProjectList() 실행
});

개발자 도구 확인: Network에서 Disable cache를 켜고 새로 고침해 전체 이미지 전송량과 가장 큰 파일을 기록합니다. Performance 또는 Lighthouse는 같은 조건에서 전후를 비교하되 점수 하나를 절대값으로 해석하지 않습니다.

PowerShell · 실행 위치: 프로젝트 루트

Get-ChildItem .\assets\images -File | Sort-Object Length -Descending | Select-Object Name, Length

예상 결과: 큰 파일부터 표시되어 우선 최적화 대상을 고를 수 있습니다.

5. 코드가 동작하는 이유​

이미지 크기 속성은 레이아웃 공간을 예약하고 lazy loading은 화면 밖 요청을 늦출 수 있습니다. 같은 필터 재선택을 건너뛰면 불필요한 DOM 생성과 교체를 막습니다.

6. 자주 하는 실수와 해결법​

7. 직접 실습​

8. 이해 점검 질문 3개​

9. 핵심 요약​

MINI QUIZ

성능 점검: 이미지·렌더링·불필요한 DOM 작업 줄이기 미니 퀴즈

선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.

0 / 2
  1. 문제 1“성능 점검: 이미지·렌더링·불필요한 DOM 작업 줄이기” 실습 결과를 해석하는 올바른 기준은 무엇인가요?
  2. 문제 2“성능 점검: 이미지·렌더링·불필요한 DOM 작업 줄이기”에서 ‘원본 이미지를 CSS로만 축소’ 문제가 생겼습니다. 가장 알맞은 진단 또는 대응은 무엇인가요?

답을 선택하면 진행 결과가 자동으로 저장됩니다.

LESSON STATUS

학습을 마쳤나요?

직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.

18강. 성능 점검: 이미지·렌더링·불필요한 DOM 작업 줄이기 미완료 상태