자바스크립트는 인터프리터 언어이며 단일 스레드 이다. 자바스크립트에서 동적으로 UI변경 작업이 있을시에는 UI스레드 라는 공간에서 큐 방식으로 처리 순서를 담아 놓는다. 앱 워커는 멀티스레드 기능을 지원하며 워커가 생성될 때마다 자바스크립트를 실행할 수 있는 고유 스레드를 생성하여 속도 성능을 크게 향상시킬 수 있다. 워커에서 실행하는 코드는 브라우저 UI에도, 다른 워커에서 실행하는 코드에도 영향을 주지 않는다.즉 독립접으로 실행되는 멀티스레드 이다. 웹워커는 다음과 같은 상황에서 사용하기 적절하다.1) 매우 큰 문자열의 암호화/복호화2) 복잡한 수학계산(이미지/비디오 처리 포함)3) 매우 큰 배열의 정렬=> 즉 로딩과 실행이 오래 걸리는 자바스크립트 파일간단한 예제를 보자 ( 2개 파일을 생성 )wo..

다른 프로그래밍 언어와 마찬가지로 어떤 알고리즘을 선택하고 코드를 어떻게 분해했느냐에 따라 성능 차이는 확연히 달라진다. 1) for, while, do while 모두 성능은 비슷하다 빠른 루프도, 느린 루프도 없다. 2) 객체에 속성에 대해 모르는 상태에서는 for-in 구문을 쓰지 말것 3) 반복문의 성능을 올리기 위해서는 작업을 줄이고 반복 횟수를 줄이는 것 4) 참조테이블 사용 5) 브라우저의 콜 스택 크기에 따라 자바스크립트가 몇 번까지 재귀를 실행 할 수 있는지 다르다. 6) 스택오버플로우가 나면 재귀함수를 사용하지 말고 반복문 알고리즘을 사용하거나 메모이제이션을 사용하라

DOM은 메모리를 많이 차지하는 요소중 하나이며 전역으로 사용되기 때문에 사용을 조심히 다루는 것이 홈페이지에 속도를 최적화 할 수 있다. [자바스크립트 성능 최적화 中] 1) DOM접근을 최소화 하고 자바스크립트에서 많은 구문을 작성하라 2) 자주 접근하는 DOM은 참조를 지역변수에 하여 사용하라 3) HTML 컬렉션(getElementyById, getElementsByTagName 등등)은 문서를 동적 반영하므로 조심히 다루고 length 같은 것은 변수를 복사헤서 사용하고 무거운 작업을 할 때에는 배열에 담아서 사용하라 4) 가능한 querySelectorAll 같은 빠른 API를 사요하라 5) 리페인트와 리플로우를 항상 생각하라. 스타일 변경은 한 번에 묶어서 처리하고, DOM트리를 조작할 때는..

프로그램을 구현하다 보면 등의 표현을 사용 할 때가 있다. 이벤트 핸들러를 등록하는 것도 DOM입장에서는 하나하나 시간이 드는 작업입니다. 그래서 이를 최소화 해주시는 것이 좋고 엘리먼트에 이벤트를 등록할 시에는 부모요소에 핸들러를 하나 붙여서 모든 자식 요소에서 발생하는 이벤트를 처리하도록 하는 것이 최적화된 기법입니다.

모든 DOM 혹은 CSS 등에서 애니메이션을 넣어야 하는 상황이 온다면 해당 애니메이션 엘리먼트 요소를 절대값으로 위치하는 것이 좋다. 이유는 간단하다. 리플로우를 방지하기 위함이다. 절대값이 아닌 상대값(relative)로 애니메이션을 구현하게 된다면 다른 엘리먼트들도 변경이 되어 리플로우 되어 DOM 속도가 느려지게 된다. 절대값으로 지정하게 되면 애네메이션으로 지정된 엘리먼트만 동작하기 때문에 다른 엘리먼트 요소에 대해서 리플로우를 최소화 시킬 수 있다. 무슨말인지 모르겠는가? 리플로우를 공부하면 알 것이다.

문서조각을 이용하는 것은 리플로우의 작업을 최소화 하기 위해서 DOM 변경을 처리할 때 가장 좋은 방법입니다. 동적으로 추가하는 방식이다. 최소한의 DOM을 접근하기 때문에 성능면에서는 우수하나 알고 있는 사람이 많이 없어서 아쉬울 뿐이다