자바스크립 속도 개선.

해당 게시글은 앞으로 계속 업데이트 하겠지만,

어떻게 하면 자바스크립트를 좀 더 빠르게 실행 시킬까 고민도 참 많았다.

 

우선적으로 HTML 안에는 여러가지 내용들이 있고,

구글, 엣지, 사파리 브라우저들은 해당 내용들을 읽어서,

브라우저 안에 컴포넌트들로 정보를 저장하게 된다.

 

결국 자바스크립트는 브라우저 컴포넌트 정보들을 이용하게 된다.

싱글스레드이기도 하지만, 어찌 보면 멀티스레드라고 봐야 하나....

 

객체에는 let 대신에 const 사용하기

단순히 readonly 상태는 문제가 없지만, 값이 변한다면, 

리터럴 아닌 이상은 const를 사용해야 한다(메모리 주소변경이 되지 않도록 한다)

const는 추가의 개념으로 보고, let은 신규의 개념으로 보아야 한다.

구글링을 하면서 찾게된  사실이기도 하다.

 

let arr = [];
arr.push(1); // arr[1]은 신규
arr.push(2); // arr[1, 2]은 신규
.
.
arr.push(100000000); // arr[1, 2 ~ 100000000]; 신규 

const arr = [];
arr.push(1); // 1 배열에 추가
arr.push(2); // 2 배열에 추가
.
.
arr.push(100000000); // 100000000 배열에 추가

---

Element style이나 값 변경하기.

Html Element의 style 혹은 값을 읽는 것과 쓰는 것은 차이가 크다.

let element = document.querySelector(엘리먼트의 클래스);
// 속도는 빠르다.

let value = element.textContent;
// 속도는 빠르다.

element.textContent = '값'
// 속도는 느리다. 암튼 element 들에 대해 어떤 값을 넣고 바꾸면 느려진다.

if (element.textContent != '값') element.textContent = '값';
// 읽는 건 빠르고 쓰는 건 느리므로, 불필요한 입력은 피하는 것이 낫다.

---

구조적으로 코딩 하기

좀 원론적인 말이긴 하지만, 불필요한 코딩이 어디서 발생되는지를 알아야 한다.

문법적인 부분은 결국 나중에 구력이 쌓이면 해결될 문제다.

 

예를 들어, 어떤 object[][] 배열 중에 요소를 3개 삭제 혹은 추가 하고 싶다.

우선적으로 1개를 추가, 삭제 하는 함수를 만든다.

 

그리고 여러개를 추가, 삭제하는 로직은 1개를 추가 삭제 하는 함수를 이용하면 된다.

만약에 여러개를 한번에 추가하는 함수를 만들면 소스량도 많아지고, 가독성도 떨어진다.

의외로 속도 향상에 도움이 된다.

---

for 문 사용시

만약 배열을 for문으로 돌리게 된다면, 다음과 같이 배열의 길이를

상수로 잡는 것도 좋은 방법이라고 생각한다.

for (let i = 0, len = 배열.length; i < len; i++) {}
for (let i = 0, len = document.selectorAll('셀렉터').length; i < len; i++)

---

Int8Array 사용하기

자바스크립트 문자든 숫자든 64비트 이다.

자바나 닷넷 처럼 tiny int(맞나?) int 등 작은 수가 없는데 유일하게 배열은 

존재한다. 

 

음. 사용은 주로 1, 0, 0 처럼 배열로 들어가야 할 곳이 있을때, Int8을 사용하면 된다.

문자 8 bit 이니까 영문자 하나 정도는 담아도 될것 같네요. 

const int8 = new Int8Array(2);
int8[0] = 1;
int8[1] = 0;

---

뷰포트 화면에 보이는 곳만 수정

조금 과할 수 있는 부분이기도 하다. 보이는 부분만 수정하면, 

속도가 조금 더 빠르지 않을까 해서, 작업해 보았는데, 확실히 효과는 있다.

스크롤이 기능이 있는 경우에는 해당 사항이 있을 것 같다.

 

하지만 조금 과한 작업이 될 수도 있을 것 같다. 

---

CSS 를 가급적 많이 애용하자

CSS를 사용함으로서, 코딩량도 줄일 수 있고, 물론 자바스크립트 속도도 빨라진다.

초보 시절 난 CSS 에 대해 잘 몰랐다. 아무래도 디자이너, 퍼블리셔 들의 공간이기도 하다.

자바스크립트로 불필요하게 element 의 style에 접근하지 않는 것도 좋은 방법이다.