Array.prototype.2018년 Lodash도 벌써요?

아무래도 틀이 비어 있는 것 같아 두 번째 투고다.JavaScript라면처음의 투고와는 아무런 관계가 없다.

2016년에는 Lodash가 빠른 것 같아요.

여러분을 제일 좋아해요Lodash.쓰고 계신가요?
나는 주로 대상을 사용한다cloneDeep.함부로 쓰면 무거워지지만 표준 DeepCopy 기능이 없으니 어쩔 수 없죠.
그러나 이런 Lodash도 ES6map,forEach,filter 등에서 주로 배열 작업에서 자주 사용하는 함수가 표준화되면서 그림자가 점점 얇아졌다.
그러나 이 경우에도 표준map이 아니라 로더시map다.실행 속도가 다르기 때문이다.예를 들어서 2016년에 쓴 이 기사에서.는 표준map에 비해 로데시map가 5배가량 빠르다고 적혀 있다.그렇구나, 2016년은 이랬나.
하지만 이제 2018년이 끝났다.일정한 표준map 함수 최적화도 빨라지고 있습니다!
그래서 기준을 얻으려고 했다.
이번에 우리는 MeasureThat.net 이 사이트를 이용하여 기준을 얻을 것이다.이것은 브라우저에서 BenchmarkJS(v.2.1)를 실행할 수 있는 웹 응용 프로그램입니다.편리

Map

실행 코드

const array = [...Array(100000).keys()];
array.map(n => n*2)   // Array.protptype.map
_.map(array,n => n*2) // lodash map

chrome

Firefox

Safari

맵은 전체적으로 Lodash가 더 빠릅니다.특히 크롬 환경에서는 차이가 큽니다.

forEach

const array = [...Array(100000).keys()];
array.forEach(n => n*2)   // Array.protptype.forEach
_.forEach(array,n => n*2) // lodash forEach

chrome

Firefox

safari

항상 forEach의 표준 함수가 빠르다고 느낀다.왜 안 맞지?특히 Firefox는 많이 달라요.

filter

실행 코드

const array = [...Array(100000).keys()];
const ram = Math.floor(100000 * Math.random());
array.filter(n => n === ram)          // Array.prototype.filter
_.filter(array,n => n === ram)        // Lodash filter

chrome

Firefox

safari

두 필터 모두 차이가 많지 않다.브라우저에 따라 때로는 이르고 때로는 늦다.

find

실행 코드

const array = [...Array(100000).keys()];
const ram = Math.floor(100000 * Math.random());
array.find(n => n === ram)          // Array.prototype.find
_.find(array,n => n === ram)        // Lodash find

chrome

Firefox

safari

find의 경향도 Filter와 비슷하다.Firefox 환경에서 표준 함수가 더 빠른 것 같습니다.

some

실행 코드

const array = [...Array(100000).keys()];
const ram = Math.floor(100000 * Math.random());
array.some(n => n === ram)          // Array.prototype.some
_.some(array,n => n === ram)        // Lodash some

chrome

Firefox

safari

구별을 모르다

every

실행 코드

const array = [...Array(100000).keys()];
const ram = Math.floor(100000 * Math.random());
array.every(n => n === ram)          // Array.prototype.every
_.every(array,n => n === ram)        // Lodash every

chrome

Firefox

safari

표준 함수가 더 빠른 것 같습니다.

총결산

이상에서 저는 평소에 자주 사용하는 것만 정리했지만 맵을 제외하고는 표준적인 것을 사용하면 됩니다.
그러나 이번에는 성능에 문제가 있는 모바일 브라우저에서 측정을 하지 않았고, 바벨로 편집을 진행하면 다른 결과가 나올 수 있으므로 참고만 하겠습니다.
솔직히 front가 특별히 무거운 계산 처리를 하는 경우는 드물고DOM 묘사는 집행 원가를 높일 수 있기 때문에 실제 프로젝트에서 너무 신경 쓸 필요가 없다.