옛날에 호스팅 해서 쓰던 사이트가 결혼하고 애 생기면서 관리를 안해가지고 다 날라가서... ㅠㅠ 날라간 자료들은 어쩔수 없고... 이제라도 다시 좀 정리해봐야겠다는 생각에 정리를 해봅니다.. 도메인은 모르겠는데 호스팅은 이제 안하는걸로...ㅋㅋㅋ
자바스크립트는 성능 최적화가 필요합니다.(모든 프로그램이 다 똑같지만) 인터프리터 언어는 더 심해요 인터프리터가 어떻게 동작하는지까지 알아야해서요. Native Execution 되는 프로그램들은 computer architecture에 따라 실행되고 컴파일러의 성능최적화에 의존해도 어느정도 괜찮습니다. 메모리 leak과 pointer만 잘 신경쓰면요...(만... 이라고 하기에는 신경써야 하는난이도가 높지만 ㅋㅋ). 어쨋든 컴퓨터 구조를 알아야 native로 실행되는 프로그램을 더 잘 만들 수 있듯이... 인터프리터 언어로 프로그램을 더 빠르게 만들려면 인터프리터의 특성에 맞게 코드를 작성 해야한다는 이야깁니다..
자바스크립트 기준에서는 node나 브라우저의 특성을 파악하는게 인터프리터의 특성을 파악하는게 되는거고요. 그래서 보통은(요새는) V8 엔진을 기준으로 알면 되요.(IE는....ㅠㅠ) 사실 자바스크립트의 태생은 Web을 위한(브라우저를 위한) 언어이고 이건 html(view)를 빼놓고 이야기를 할 수가 없어요. DOM(Document Object Mode)을 조작하는 의도가 제일 큰 언어니까요.. 그래서 자바스크립트의 성능튜닝은 View(html 태그 + Javascript) 둘다 이야기를 하게 됩니다. 그럼 Node는 자바스크립트로 서버사이드개발하는거니까 html이야긴 안나오고 V8엔진에 대한 이야기만 나오게 될겁니다.
일단 첫번째로 로딩만 이야기 해봐야겠어요.
보통 html코드는 아래와 같아요
<html>로시작해서 </html>로 끝나요. 그리고 그 안에 <head></head><body></body>가 들어갑니다. 이런 구조를 tree라고 하는데 우리는 이걸 DOM Tree라고 불러요. DOM Tree는 최상위가 html. 그 자식으로 head, body가 있다고 생각하면 됩니다. DOM의 최상의는 html인데 위에 document가 또 있습니다. 이건 javascript에서 dom에 접근하기 위한 객체(대상)에요.
우리가 웹페이지에 접속을 하면 브라우저는 위의 트리를 분석해서 그대로 브라우저에 그림을 그려요. 예외없이 모든 프로그램은 순차실행이라서 DFS로 그림을 그려요. 위의 그림에서는 html->head -> title -> body -> h1 -> a 순인거죠. 웹에서는 이 html을 view 라고 하고 head, body와 같은것들을 tag라고 부르는데 html tag만 브라우저에서 그릴거면 사실 아무 문제가 없어요. 순차적으로 그냥 그리면 되거든요.
문제는 이 DOM(View)을 조작하고 싶어서 Javascript로 프로그램을 만드는데서 시작해요. 이 자바스크립는 head, body 둘중에 하나의 태그에 삽입되는데 이것도 하나의 tag라서 이것도 순차적 실행이에요. 보통 파일로 html 파일 밖에 선언되고 사용자의 브라우저에 html 파일과 함께 다운로드 되서 실행되기 때문에 <script></script> 태그 안에 있는 파일을 다운로드 합니다.
여기서부터 문제인데, <script> 태그를 만난 순간부터 해당 파일을 다운로드 하기때문에 다운로드를 완료하기 전까지 다른 태그들을 렌더링(그리기)을 하지 않아요.(block 된단 이야기) + 브라우저는 body 태그를 만나기 전까지 아무것도 화면에 표시해 주지 않아요. 그러면 스크립트를 다 다운로드 받기 전까지 아무것도 화면에서 볼 수 없다는 이야기와 같습니다. 그래서 아래와 같은 사항을 기억해야되요.
1. 브라우저에서는 script 태그를 만나면 다운로드하는데, 다운로드가 완료될때까지 block상태이다.(요즘 브라우저는 2개씩 해주긴 합니다)
2. 다운로드 받은 스크립트를 전부 수행하기 전까지 다음 스크립트 파일도 다운로드 하지 않는다.
3. 스크립트파일 다운로드및 실행이 브라우저 렌더링에 영향을 주지 않으려면 body태그의 맨 마지막에 script 태그를 삽입한다. 그러나 script를 다운받아서 렌더링 하는 도중 실행해야하는 것이 있다면 operation aborted 에러가 생길 수 있다. -> head에 넣는게 안전하단 소리.( 상식적으로 렌더링 하는데 써야될 스크립트가 렌더링 할 부분의 맨 마지막에 있으면 문제가 생기겠죠?)
4. script를 다운로드 하는것은 전부 http request이기때문에 성능 부담이 있다. 따라서 한파일로 묶을 수 있으면 전부 묶는다.(자바스크립트 빌드도구 쓰란이야기. 빌드라고 해봤자 합치는거죠)
5. 같은 이야기로 link(보통 스타일시트 css) 뒤에 있는 script는 link된 css가 다운로드 되기 전까지 실행되지 않습니다.
6. 모던 브라우저는 스크립트에 defer 키워드를 제공합니다.(non-block을 제공한다는 이야기, 지연스크립트라고 부릅니다)
위와같은 문제를 전부 해결해 준느 방법이 있는데 그게 자바스크립트 동적 로딩이에요. 페이지를 일단 다 로딩(렌더링) 한 다음에 document에 태그를 넣어주는겁니다. 그럼 태그가 생기면서 그때부터 자바스크립트 파일을 다운로드 하기 시작할 거에요. 이 방법의 좋은점은 아래와 같은 루틴
while(렌더링 할게 남아있을때) { 자바스크립트 다운로드(block) -> 자바스크립트 실행 -> 렌더링} 의 과정을
브라우저렌더링 -> 자바스크립트 다운로드 함 -> 다운로드한 자바스크립트를 실행. 으로 바꿔준다는 겁니다.
중간중간 block되는게 없어졌으니 체감성능이 올라가고 idle time이 없어집니다.
Native Execution 환경에서 CPU 파이프라인 만들어 준거랑 같다고 생각하면 될 것같네요.
'컴퓨터공학' 카테고리의 다른 글
| [소프트웨어공학] 수평조직, 방어적태도, 공격적태도, 오버커뮤니케이션 (0) | 2022.11.21 |
|---|---|
| [가상화] KVM 기본 구조 (0) | 2019.04.29 |
| [개발이야기] CD(Continuous Development) (0) | 2019.04.26 |
| [성능튜닝] Java Primitive Type Array vs ArrayList (0) | 2019.04.24 |
| [ANDROID] Funf wifi-scanner 구조 (0) | 2019.04.09 |
