자바스크립트 데이타 최적화....?

- 자바스크립트 기본원리 : Shape (Mozilla 의 SpiderMonkey 에서 사용되는 용어) 와 ICs(인라인 캐시)

o shlrur.github.io/javascripts/javascript-engine-fundamentals-shapes-and-Inline-caches/

o meetup.toast.com/posts/78 참조 (내용이 겹친다 싶으면, 아래로 스크롤 해서 결론 부분만 읽어 보심이..)

o engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-v8-%EC%97%94%EC%A7%84%EC%9D%98-%EB%82%B4%EB%B6%80-%EC%B5%9C%EC%A0%81%ED%99%94%EB%90%9C-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EB%8B%A4%EC%84%AF-%EA%B0%80%EC%A7%80-%ED%8C%81-6c6f9832c1d9

 

주해 : 데이타를 인식하는 방법이라 해야 할듯..

사용자(개발자)가 만드는 작동 코드가 아니라,

데이타를 메모리에 올려두는 자바스크립트 엔진의 방식이고..

각종 웹브라우저가 개발자 생성 데이터를 바라보는 안경.

그런데, 데이타라고 해서.. 개발자가 기술한 각종 변수들만 Shape 의 대상이 아닙니다.

만약, 개발자가 작성한 코드가 HTML DOM 구조에 접근해야 하는 것이면..

Shape 의 대상은 HTML DOM 전체가 되기도 합니다. ^^;

그러니까, HTML 잘 만들어야 해요.

웹브라우저의 화면 상에서는 동일하게 보이더라도,

잘 만들어진 HTML 태그 구조와 아닌 것은 속도에서 엄청난 차이를 가져옵니다. ^^v

대개의 경우엔 체감이 불가하지만, GC 와 맞물리면 버벅거림은 극한을 달립니다.

오동작 하는 이유들 중의 하나로 지목되기도 하구요.

 

어쨌든, Object(Json 이나 XML 포함) 이건 배열이건..

웹브라우저에겐 동등 또는 동일한 년석들일 뿐입니다. ㅎㅎ

작동하는 방식도 비슷하죠. 다만, 실제로 사용 가능한 함수명이 다르다면 다른 점.

 

결론1..

동일한 작업을 한다면

Shape 이 여러개 나오지 않도록,

한번만 정의하고 이후로는 틀을 깨지 말라는 것.

Shape 이 여러개 나오는 것에는, 항목이 추가되거나, 항목의 type 이 바뀌거나, 기술되는 순서가 변경되는 것 등이 포함.

type 이 바뀌는거요..? 문자열로 했다가 숫자로 했다가 하는 식의 코딩 방식.

Object 에 기술된 변수의 순서를 바꾸는 것도 Shape 을 흔드는 것.

HTML 태그를 예로 들면..

<input type="text" name="a" value="av" readonly> 라 했다가

<input name="b" type="text" value="bv" readonly> 이런식으로 했다가 하는 식..

 

결론2.. (이건 일반적인 개발자가 건드리지 않는 대목이니 패스)

value/writable/enumarable/configurable 속성을 재정의 하지는 말 것. (그냥 default 를 그대로 사용)