JavaScript 배열 의 진화 와 성능 분석

본 고 는 자바 스 크 립 트 배열 의 기초 지식 을 설명 하 는 것 이 아니 라 문법 과 사용 사례 도 언급 하지 않 는 다.본 고 는 메모리,최적화,문법 차이,성능,최근 의 발전 을 더 많이 말한다.
자 바스 크 립 트 를 사용 하기 전에,나 는 C,C++,C\#이것들 에 대해 이미 꽤 익숙 했다.많은 C/C++개발 자 들 과 마찬가지 로 자 바스 크 립 트 는 나 에 게 첫 인상 이 좋 지 않 았 다.
Array 가 주요 원인 중의 하나 입 니 다.JavaScript 배열 은 연속(contiguous)이 아니 라 해시 맵(hash-maps)이나 사전(dictionaries)과 유사 합 니 다.나 는 이것 이 마치 B 급 언어 처럼 배열 의 실현 이 전혀 적절 하지 않다 고 생각한다.그 이후로 자 바스 크 립 트 와 나 는 그것 에 대한 이해 에 많은 변화 가 생 겼 다.
왜 JavaScript 배열 이 진짜 배열 이 아니 라 고 하 세 요?
자 바스 크 립 트 에 대해 이야기 하기 전에 Array 가 무엇 인지 먼저 이야기 하 세 요.
배열 은 일부 값 을 저장 하기 위해 연속 적 인 메모리 위치 입 니 다.중점 을 두 세 요.'연속'(continuous,또는 contiguous)이 중요 합 니 다.

위의 그림 은 메모리 에 배열 을 저장 하 는 방식 을 보 여 준다.이 배열 은 요소 마다 4 바이트 씩 4 개의 요 소 를 저장 했다.합쳐서 모두 16 바이트 의 메모리 영역 을 차지 했다.
만약 우리 가 tiny Int arr[4]를 성명 했다 면,분 배 된 메모리 영역의 주 소 는 1201 부터 시작 합 니 다.arr[2]를 읽 으 려 면 수학 적 계산 을 통 해 arr[2]의 주 소 를 받 으 면 된다.1201+(2X 4)를 계산 해 1209 부터 바로 읽 으 면 된다.

JavaScript 의 데 이 터 는 해시 맵 으로 링크 와 같은 서로 다른 데이터 구 조 를 사용 하여 실현 할 수 있 습 니 다.따라서 자바 스 크 립 트 에서 배열 var arr=new Array(4)를 설명 하면 컴퓨터 는 위의 그림 과 유사 한 구 조 를 생 성 합 니 다.프로그램 이 arr[2]를 읽 으 려 면 1201 부터 주 소 를 옮 겨 다 녀 야 합 니 다.
이상 급속 한 자 바스 크 립 트 배열 과 실제 배열 의 차이 점.수학 계산 이 링크 를 옮 겨 다 니 는 것 보다 빠르다 는 것 은 분명 하 다.장수 조 로 서 는 상황 이 특히 그렇다.
JavaScript 배열 의 진화
우리 가 친구 에 게 구 한 256 MB 메모리 의 컴퓨터 가 부러워 죽 을 지경 이 었 던 날 을 기억 하 십 니까?오늘 은 8GB 메모리 가 곳곳에 있다.
이와 비슷 하 게 자 바스 크 립 트 라 는 언어 도 많이 진화 했다.V8,Spider Monkey 부터 TC 39,그리고 날로 증가 하 는 웹 사용자 까지 커 다란 노력 은 자 바스 크 립 트 를 세계 적 인 필수품 으로 만 들 었 다.일단 방대 한 사용자 기반 이 생기 면 성능 이 향상 되 는 것 은 자연히 단단 한 수요 이다.
실제로 현대 자바 스 크 립 트 엔진 은 배열 에 연속 메모 리 를 할당 합 니 다.배열 이 동 질 이 라면(모든 요소 유형 이 같 습 니 다).우수한 프로그래머 는 JIT(인 스 턴 트 컴 파일 러)가 c 컴 파일 러 식 계산 방법 으로 요 소 를 읽 을 수 있 도록 배열 의 동 질 을 보장 합 니 다.
단,동 질 배열 에 다른 유형의 요 소 를 삽입 하려 면 JIT 는 전체 배열 을 재 구성 하고 기 존의 방식 으로 다시 만 듭 니 다.
따라서 코드 를 잘못 쓰 지 않 으 면 JavaScript Array 대상 은 막후 에서 도 진정한 배열 형식 을 유지 하고 있 습 니 다.이것 은 현대 JS 개발 자 에 게 매우 중요 합 니 다.
이 밖 에 배열 은 ES 2015/ES6 에 따라 더 많은 발전 을 이 루 었 다.TC 39 는 유형 화 된 배열(Typed Arrays)을 도입 하기 로 결정 하여 우 리 는 Array Buffer 가 생 겼 다.
Array Buffer 는 우리 가 마음대로 조작 할 수 있 도록 연속 메모 리 를 제공 합 니 다.그러나 직접 메모 리 를 조작 하 는 것 은 너무 복잡 하고 밑바닥 에 치 우 친다.그래서 Array Buffer 를 처리 하 는 보기(View)가 생 겼 습 니 다.현재 사용 가능 한 보기 가 있 습 니 다.앞으로 더 많은 가입 이 있 을 것 입 니 다.

var buffer = new ArrayBuffer(8);
var view  = new Int32Array(buffer);
view[0] = 100;

형식 화 된 배열(Typed Arrays)에 대한 지식 을 더 알 고 싶 으 시 면 MDN 문 서 를 방문 하 십시오.
고성능,고 효율 의 유형 화 배열 은 WebGL 이후 도입 됐다.WebGL 작업 자 들 은 바 이 너 리 데 이 터 를 어떻게 효율적으로 처리 하 느 냐 에 큰 성능 문 제 를 만 났 다.또한,SharedArray Buffer 를 사용 하여 여러 웹 Worker 프로 세 스 간 에 데 이 터 를 공유 하여 성능 을 향상 시 킬 수 있 습 니 다.
간단 한 해시 맵 에서 현재 의 Shared Array Buffer 까지,이거 정말 좋 죠?
구식 배열 vs 유형 화 배열:성능
앞에서 자바 스 크 립 트 배열 의 발전 에 대해 논 의 했 는데 현대 배열 이 우리 에 게 얼마나 큰 수익 을 가 져 다 줄 수 있 는 지 테스트 해 보 자.다음은 제 가 Mac 에서 Node.js 8.4.0 을 사용 하여 실시 한 마이크로 테스트 결과 입 니 다.
구식 배열:삽입

var LIMIT = 10000000;
var arr = new Array(LIMIT);
console.time("Array insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.timeEnd("Array insertion time");

사용 시간:55ms

Typed Array：  
var LIMIT = 10000000;
var buffer = new ArrayBuffer(LIMIT * 4);
var arr = new Int32Array(buffer);
console.time("ArrayBuffer insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.timeEnd("ArrayBuffer insertion time");

사용 시간:52ms
닦 아,내 가 뭘 봤 지?구식 배열 과 Array Buffer 의 성능 이 막상막하 입 니까?아니 야,아니 야.앞에서 언급 한 바 와 같이 현대 컴 파일 러 는 이미 지능 화 되 어 요소 유형 이 같은 전통 적 인 배열 을 내부 에서 메모리 연속 의 배열 로 전환 할 수 있다 는 것 을 기억 하 세 요.첫 번 째 예 는 바로 이렇다.new Array(LIMIT)를 사 용 했 음 에 도 불구 하고 배열 은 실제 적 으로 현대 배열 로 존재 한다.
이 어 첫 번 째 예 를 들 어 배열 을 이성 형(요소 유형 이 완전히 일치 하지 않 음)으로 바 꾸 어 성능 차이 가 있 는 지 살 펴 보 자.

    ：  （  ）
var LIMIT = 10000000;
var arr = new Array(LIMIT);
arr.push({a: 22});
console.time("Array insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.timeEnd("Array insertion time");

사용 시간:1207 ms
세 번 째 줄 에서 발생 하 는 문 구 를 추가 하고 배열 을 이 구조 로 바 꿉 니 다.나머지 코드 는 변 하지 않 습 니 다.성능 차 이 는 22 배 느 린 것 으로 나 타 났 다.
구식 배열:읽 기

var LIMIT = 10000000;
var arr = new Array(LIMIT);
arr.push({a: 22});
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
var p;
console.time("Array read time");
for (var i = 0; i < LIMIT; i++) {
//arr[i] = i;
p = arr[i];
}
console.timeEnd("Array read time");

사용 시간:196 ms

Typed Array：  
var LIMIT = 10000000;
var buffer = new ArrayBuffer(LIMIT * 4);
var arr = new Int32Array(buffer);
console.time("ArrayBuffer insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.time("ArrayBuffer read time");
for (var i = 0; i < LIMIT; i++) {
var p = arr[i];
}
console.timeEnd("ArrayBuffer read time");

사용 시간:27ms
결론.
유형 화 된 배열 의 도입 은 자 바스 크 립 트 의 발전 과정 에서 큰 걸음 이다.Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint 16Array,Int32Array,Uint 32Array,Float 32Array,Float 64Array 등 은 유형 화 된 배열 보기 로 원본 바이트 순 서 를 사용 합 니 다(이 컴퓨터 와 동일).DataView 를 사용 하여 사용자 정의 보기 창 을 만 들 수도 있 습 니 다.앞으로 Array Buffer 의 DataView 라 이브 러 리 를 쉽게 조작 하 는 데 도움 이 되 기 를 바 랍 니 다.
자 바스 크 립 트 그룹의 진전 은 매우 nice 이다.지금 은 속도 가 빠 르 고 효율 이 높 으 며 건장 하 며 메모리 배분 에 도 지능 이 충분 하 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 자 바스 크 립 트 배열 의 진화 와 성능 분석 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!