571. (javaScript) 자바스크립트 브라우저 라이브러리 로드 방법 메모리 캐시 (Memory), 디스크 캐시 (Disk), 네트워크 다운로드 (Network) 설명 정리

---

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

---

[설명 정리]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript / 라이브러리


- 사전) 👉 window.performance 간략 설명 : 

  >> window.performance 은 브라우저에서 제공하는 성능 측정 API 입니다.

  >> window.performance 주로 사용 되는 곳 

    - 페이지 로딩 시간 측정
    - API 응답 시간 측정
    - JS 실행 시간 측정
    - 이미지 다운로드 시간 측정
    - 렌더링 시간 측정
    - Core Web Vitals 분석
    - 성능 모니터링(RUM)

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[설 명]
-----------------------------------------------------------------------------------------

1. 웹 브라우저가 JS 라이브러리 (jquery.js, react.js 등) 를 가져올 때는 크게 3가지 경로를 통해서 가져옵니다.

  >> ✅ 브라우저는 보통 위 순서로 확인하며, 가장 빠른 곳에서 파일을 찾으면 다음 단계로 가지 않습니다.

    Memory Cache
        ↓
    Disk Cache
        ↓
    Network Download


2. ✅ Memory Cache (메모리 캐시) 설명 정리

  >> 브라우저 프로세스의 RAM에 저장된 데이터를 사용하는 방식입니다.

  >> 특징 : 참조 되는 속도가 가장 빠르며, 페이지 A에서 다운로드한 후 같은 탭에서 페이지 B로 이동하면서 다시 사용하면 메모리에 남아있는 파일을 재사용할 수 있습니다.

  >> 장점 : 
  
    - 매우 빠름
    - 네트워크 사용 안 함
    - 디스크 I/O 없음

  >> 단점 : 

    - 브라우저 종료 시 대부분 사라짐
    - 메모리가 부족하면 제거됨

  >> window.performance 특징 : 
  
    {
        transferSize: 0,
        duration: 0 ~ 5ms
    }


3. ✅ Disk Cache (디스크 캐시) 설명 정리

  >> SSD/HDD 등 저장장치에 보관된 파일을 읽는 방식입니다.

  >> 특징 : 브라우저를 종료했다가 다시 실행해도 살아있을 수 있습니다.

    - C:\Users\...\Chrome Cache
    - Android Browser Cache

  >> 장점 : 

    - 네트워크 사용 안 함
    - 재방문 시 빠름

  >> 단점 : 

    - 디스크 접근 비용 발생
    - 메모리 캐시보다 느림

  >> window.performance 특징 : 
  
    {
        transferSize: 0,
        duration: 5 ~ 50ms
    }


4. ✅ Network Download (네트워크 다운로드) 설명 정리

  >> 캐시에 파일이 없거나 만료되어 서버에서 다시 받아오는 경우입니다.
  
    jquery.js 필요
        ↓
    Memory Cache 없음
        ↓
    Disk Cache 없음
        ↓
    CDN 서버 요청
        ↓
    다운로드
        ↓
       실행

  >> 장점 : 항상 최신 파일 확보 가능

  >> 단점 : 

    - 가장 느림
    - 네트워크 상태 영향
    - 데이터 사용량 발생

  >> window.performance 특징 : 
  
    {
        transferSize: 120000,
        duration: 100ms 이상
    }


5. ✅ 자바스크립트 window.performance 사용 예시 소스 코드 : 

    const resources = performance.getEntriesByType("resource");

    resources.forEach(entry => {

        // -------------------------------------------------------
        // 👉 PC 기준 일반적으로 duration 에 따른 캐시 여부 체크
        // -------------------------------------------------------
        // 👉 단, 캐시를 사용하더라도 리다이렉션으로 호출 되는 경우 duration 시간이 길 수 있음
        // -------------------------------------------------------
        /*
        if (entry.duration < 5) {
            cacheStatus = "memory-cache";
        }
        else if (entry.duration < 50) {
            cacheStatus = "disk-cache";
        }
        else {
            cacheStatus = "network";
        }
        */
        // -------------------------------------------------------
        console.log('resources.forEach : ', entry.name, ' : ', entry.duration);                    

    });

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 570. (javaScript) 자바스크립트 window.performance 사용해 resource duration 리소스 (css , js , img 등) 다운로드 시간 확인

https://kkh0977.tistory.com/8964

https://blog.naver.com/kkh0977/224341765757


▶️ 194. (javascript/자바스크립트) 외부 js , css 파일 로드 시 QueryString 쿼리 스트링 추가 및 캐시 초기화 실시간 반영 방법

https://kkh0977.tistory.com/2416

https://blog.naver.com/kkh0977/222860079651?trackingCode=blog_bloghome_searchlist


▶️ 106. (html/css/javascript/jquery) 이미지 태그에 이미지 파일 (jpg, png) 로드 시 확장명 뒤에 QueryString 쿼리 스트링 추가 방법

https://kkh0977.tistory.com/4792

https://blog.naver.com/kkh0977/223246008043?trackingCode=blog_bloghome_searchlist


▶️ 76. (javascript/자바스크립트) object innerHTML 사용해 다른 html 파일 내부에 로드 실시

https://kkh0977.tistory.com/911

https://blog.naver.com/kkh0977/222411584202?trackingCode=blog_bloghome_searchlist


▶️ 43. (javascript/자바스크립트) window ready, window onload 구현 및 코드 차이점 설명 

https://kkh0977.tistory.com/841

https://blog.naver.com/kkh0977/222391324766?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8964

570. (javaScript) 자바스크립트 window.performance 사용해 resource duration 리소스 (css , js , img 등) 다운로드

---