투케이2K

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

JavaScript

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

투케이2K 2026. 7. 9. 19:37
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

 

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

- 개발 환경 : Web


- 개발 기술 : JavaScript / window.performance / 성능 측정


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

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

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

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

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





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- [반응형 구조 만들기] -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- ✅ [스크립트 : CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>







    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


    // -----------------------------------------------------------------
    // ✅ [Window.onload 웹 브라우저 로드 완료]
    // -----------------------------------------------------------------
    window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

            // ------------------------------------------------
            // 🟦 JS 파일 뒤에 타임스탬프를 붙이는 이유 간략 설명
            // ------------------------------------------------ 
            /*
            1. 브라우저 캐시를 강제로 무효화(Cache Busting) 하기 위해서입니다.
            */
            // ------------------------------------------------ 



            // ------------------------------------------------
            // 🟦 performance 를 사용해 브라우저가 로드한 리소스(JS, CSS, 이미지, 폰트, Ajax 요청 등)의 성능 정보를 조회
            // ------------------------------------------------                    
            if (window.performance && typeof performance.getEntriesByType === "function") {
                //console.log("window.performance : 지원 : ", typeof window.performance === "object" ? JSON.stringify(window.performance) : window.performance);

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

                console.log('performance resources : ', typeof resources === "object" ? JSON.stringify(resources) : resources);

                // ------------------------------------------------
                // 🟦 console 에 출력 되는 로그 예시
                // ------------------------------------------------
                /*
                [
                    {
                        "name": "https://code.jquery.com/jquery-latest.min.js", // 👉 리소스 URL
                        "entryType": "resource",
                        "startTime": 35.6999999997206, // 👉 페이지가 로드된 후 해당 리소스 요청이 시작된 시점(ms)
                        "duration": 33.700000000186265, // 👉 다운로드 완료까지 걸린 시간(ms)
                        "initiatorType": "script",
                        "deliveryType": "",
                        "nextHopProtocol": "",
                        "renderBlockingStatus": "blocking",
                        "contentType": "",
                        "contentEncoding": "",
                        "workerStart": 0,
                        "workerRouterEvaluationStart": 0,
                        "workerCacheLookupStart": 0,
                        "workerMatchedSourceType": "",
                        "workerFinalSourceType": "",
                        "redirectStart": 0,
                        "redirectEnd": 0,
                        "fetchStart": 35.6999999997206,
                        "domainLookupStart": 0,
                        "domainLookupEnd": 0,
                        "connectStart": 0,
                        "secureConnectionStart": 0,
                        "connectEnd": 0,
                        "requestStart": 0,
                        "responseStart": 0,
                        "firstInterimResponseStart": 0,
                        "finalResponseHeadersStart": 0,
                        "responseEnd": 69.39999999990687,
                        "transferSize": 0, // 👉 실제 네트워크에서 전송된 바이트 수 (네트워크 다운로드 발생 / 캐시 사용 가능성 높음)
                        "encodedBodySize": 0, // 👉 압축된 파일 크기
                        "decodedBodySize": 0, // 👉 압축 해제된 실제 크기
                        "responseStatus": 0,
                        "serverTiming": []
                    }
                ]
                */
                // ------------------------------------------------

                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);                    

                });

            } else {
                console.error("window.performance : 미지원");
            }
           
        }
        catch (exception) {
            console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
        }

    }; 
      
    </script>


</head>


<body>

</body>

</html>

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





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

▶️ 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

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

572. (javaScript) 자바스크립트 Cache Storage 캐시 스토리지 사용해 캐시 생성 및 저장 , 캐시 목록 조회 , 특정 캐시 삭제 실시  (0) 2026.07.14
571. (javaScript) 자바스크립트 브라우저 라이브러리 로드 방법 메모리 캐시 (Memory), 디스크 캐시 (Disk), 네트워크 다운로드 (Network) 설명 정리  (0) 2026.07.13
569. (javaScript) 자바스크립트 동적 js 파일 추가 및 외부 js 파일 로드 시 타임스탬프 추가해 캐시 초기화 수행 - QueryString 쿼리 스트링 추가  (0) 2026.07.09
568. (javaScript) 자바스크립트 document.addEventListener visibilitychange 이벤트 사용해 실시간 브라우저 표시 및 보이는 상태 확인  (0) 2026.07.07
567. (javaScript) 자바스크립트 웹 브라우저에서 앱 딥링크 (Deep Link) 스키마 (Scheme) 앱 실행 및 앱 마켓 페이지 이동 수행  (0) 2026.07.06
'JavaScript' Related Articles more
Comments