JS파일 가져오기 로컬, 원격 차이

코드 리팩토링을 진행하던중 외부 라이브러리를 가져올때 차이가 궁금해졌다.

//로컬
<script src="/JS/sockjs.min.js"></script>
//원격
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.2/dist/sockjs.min.js"></script>

---

성능비교 

로컬에 위치한 파일을 사용할경우 크기는 57.8KB가 나왔으며 통상적인 통신시간은 10~20ms였다.

원격의 경우 (CDN 방식)

크기는 20.7KB가 나왔으며 시간은 통상적으로 20~30ms가 소요되었다.

 

해당 결과를 바탕으로 결론을 내려고 했으나 다른 글에선 CDN이 더 빠르다는 소리가 있었다..

그렇다면 어떤게 더 나은 방식일까?

---

브라우저 렌더링 과정

1. 리소스 요청 및 응답: 브라우저가 웹 서버에 HTML, CSS, JavaScript, 이미지 등 필요한 리소스를 요청, 응답을 받습니다. 개발자 도구의 '네트워크' 탭에서 확인 가능
2. DOM, CSSOM 생성: 브라우저 렌더링 엔진은 전달받은 HTML을 파싱해서 DOM (Document Object Model) 트리를 생성, CSS 내용을 파싱하여 CSSOM (CSS Object Model) 트리를 생성(DOM과 CSSOM은 각각 웹 페이지의 구조와 스타일 정보)
3. 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 실제로 화면에 표시되는 요소만을 포함하며, 각 요소의 시각적 속성(크기, 색상 등)을 담고 있습니다.
4. JavaScript 실행: JavaScript 코드를 파싱하여 AST (Abstract Syntax Tree)를 생성되고, 이는 바이트 코드로 변환되어 실행된다. 여기서 JavaScript는 DOM을 조작할 수 있으며, 이 과정에서 DOM 또는 CSSOM이 변경될 수 있습니다, (documnet.getElementByid등..)
5. 레이아웃 계산: 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산하는 레이아웃 과정을 진행(리플로우)
6. 페인팅: 마지막으로 모든 레이아웃이 계산된 요소들을 화면에 출력 (텍스트 색상, 배경 이미지 등이 화면에 렌더링)

 

DOM-Tree의 예시 사진이며, 노란색이 CSSOM이다

 

여기서 2번쨰 DOM, CSSOM 생성 시점에서 JS파일이 실행 및 로드가 진행되며 페이지 로딩이 끝난뒤 button 등으로 JS를 실행할경우 4~6의 과정을 반복한다.

또한 html파싱을 중단하고 진행하는지 아닌지에 따라 async(비동기)과 defer(동기) 2가지 속성에 따라 나뉜다.

더 자세한건 프론트 페이지를 참조하자!..

 

이제 본론으로 돌아와서 원격에서 가져오는 CDN의 의미부터 알아보겠다.

---

CDN(Content Delivery Networks)

 

분산서버 시스템을 의미하며 콘텐츠를 요청하는 사용자에게 더 가깝게 캐싱하여 대기시간을 줄이는것이 주요 목적이다.

CDN은 여러 위치에 있는 Edge를 통해 사용자가 콘텐츠를 요청할경우 요청자와 가장 근접한 Edge로부터 캐시 복사본을 제공하여 콘텐츠 전달에 사용되는 시간을 줄이는것이 주요 목적이다.

쉽게 말해서 감자를 구매하기 위해 감자농장을 찾아가는게 아닌 집앞 슈퍼마켓에 가는것과 동일한 이유이다.

가장 자주볼수 있는 CDN은 Cloudflare으로 서울에 있다고한다! (https://www.cloudflare.com/ko-kr/network/)

CDN의 경우 캐싱을 진행하지 않는다.

First off, modern browsers don't cache requests to CDNs across multiple domains,

최근 브라우저는 CDN을 캐싱하지 않는다고 하며 만약 CDN을 캐싱할경우 이를 토대로 추적이 진행될 우려로 인해 이미 다운로드한 LIB를 포함하더라도 다시 다운로드를 진행하게된다.

설명이 조금 모호했는데 더 자세히 말하자면 브라우저가 10분에 A사이트에 접속하다가 15분에 B사이트에 접속할경우 A사이트에서 CDN이 동일한 스크립트가 존재하더라도 B사이트에 접속할때 다시 다운받는다는 소리이다. (A는 10분에 받는게 B는 15분에 받은게 존재한다)

2번 다운로드 받는게 보안측면에서 더 문제가 있지만 캐시 타이밍 공격을 통해 방문한 웹사이트를 못알도록 하는 이유이다.

캐시 타이밍 공격 - 사용자의 방문한 웹사이틑 비롯한 브라우저의 활동내역을 알아내는것(특정 사이트에 접속했을경우 리소스가 다운되었으며 캐싱이 되어있기에 다시 접속할경우 network부분에선 빠른 load결과가 나타날것이고 이를 통해 해당 페이지에 접속을 했다는걸 알수있다)

원본 링크 : https://blog.wesleyac.com/posts/why-not-javascript-cdn

 

 

즉, 현재 내 상황은 서버도 Local, 실행도 Local이기에 CDN보다 local에서 Script를 가져오는데 더 빠른속도로 나온것이며 실제 배포를 진행한경우 CDN을 이용하는게 더욱 빠르다는 소리이다.

---

관련 레퍼런스

링크1(스택오버플로우) : https://stackoverflow.com/questions/42591235/is-it-better-to-use-cdn-for-js-and-similar-resources-vs-local

링크2 : https://www.cdnetworks.com/web-performance-blog/cdn-vs-local/