diff --git a/week02/calendar-test/README.md b/week02/calendar-test/README.md new file mode 100644 index 0000000..02c9dd7 --- /dev/null +++ b/week02/calendar-test/README.md @@ -0,0 +1,28 @@ +# innerHTML 성능 비교 테스트 + +이 코드는 DOM 조작 방식의 성능 차이를 테스트하기 위해 만들어졌습니다. + +## 테스트 항목 + +- `` 1000개를 반복 생성할 때 + - `innerHTML +=` 방식 vs. `배열.join('')` 방식 +- 실제 달력 렌더링 시 + - 6주 × 7일 구조의 `` 생성 + +## 테스트 결과 + +| 테스트 항목 | innerHTML += | 배열 방식 | 배속 | 절약 시간 | +| ----------------- | ------------ | --------- | ------- | --------- | +| 기본 td 1000개 | 39.00ms | 0.90ms | 43.33배 | 38.10ms | +| 달력 렌더링 (6x7) | 0.30ms | 0.20ms | 1.50배 | 0.10ms | + +**주의** + +- 테스트 결과는 실행할 때마다 달라질 수 있습니다. (성능 수치가 재현되지 않을 수 있습니다.) +- 성능 비교 중 연속으로 클릭한다면, 0ms처럼 너무 작게 나와 Infinity가 뜨는 이슈가 있는데, 간단한 확인용 코드이기 때문에 따로 보정 작업을 하진 않았습니다. 다시 초기화 후 성능 체크를 누르시면 됩니다. + +## 결론 + +- 반복량이 많을수록 `배열.join('')` 방식이 훨씬 빠름. +- 하지만 요소 수가 적거나 구조가 단순하면 큰 차이 없음. +- 실제 애플리케이션에서는 **반복 DOM 조작 성능을 고려해 join 방식 사용 권장**. diff --git a/week02/calendar-test/performance-test.html b/week02/calendar-test/performance-test.html new file mode 100644 index 0000000..bd6e01c --- /dev/null +++ b/week02/calendar-test/performance-test.html @@ -0,0 +1,186 @@ + + + + + + innerHTML 성능 비교 테스트 + + + +

innerHTML += vs 배열.join() 성능 비교

+ +
+

테스트 설정

+

+ 1000개의 <td> 요소를 생성하는 두 가지 방법의 성능을 비교합니다. +

+ + +
+ +
+

기본 innerHTML 테스트 결과

+
+
+ +
+

실제 달력 렌더링 테스트 결과

+ +
+
+ + + + + +