순회할 값이 적은 경우에는 왜 먼저 실행한 게 오래 걸리나요?

Question

10번만 돌리니까 먼저 돌린게 오래 걸리고, 1000000번 정도 돌렸을 때는, 순서에 상관없이 L.range가 효율이 좋게 나오네요. const   test   =   ( f ,   name )   =>   {     console . time (name) ;      f () ;     console . timeEnd (name) ; } const   add   =   ( acc ,   i )   =>  i  +  acc ; const   times   =  [ 10 ,   1000000 ] ; /** L.range 먼저 실행**/ for  ( const   t   of  times)  {      test ( ()   =>   reduce (add ,   L . range (t)) ,   ` L.range- ${ t }` ) ;      test ( ()   =>   reduce (add ,   range (t)) ,   `   range- ${ t }` ) ; } log ( " --------- " ) /** L.range 나중에 실행**/ for  ( const   t   of  times)  {      test ( ()   =>   reduce (add ,   range (t)) ,   `   range- ${ t }` ) ;      test ( ()   =>   reduce (add ,   L . range (t)) ,   ` L.range- ${ t }` ) ; } L.range-10: 0.189ms   range-10: 0.051ms L.range-1000000: 36.246ms   range-1000000: 55.928ms ---------   range-10: 2.477ms L.range-10: 0.189ms   range-1000000: 38.996ms L.range-1000000: 27.94ms

MDU 유인동 · Answer

안녕하세요 :) 브라우저의 상태에 따른 문제일거에요.  너무 짧은 시간에 대한 테스트는 의미가 크진 않습니다.  배열을 만드는 경우와 만들지 않는 경우의 로직적인 효율에 포커싱해서 바라봐주시면 좋습니다. 배열의 사이즈가 클 수록 브라우저의 상태와 연관 없이 배열을 만들지 않는 지연방식이 유리하게 됩니다. 그리고 브라우저나 자바스크립트 엔진이 아직은 제너레이터를 더 최적화해서 구현하지 못한 것으로 예상하고 있습니다. 잘 구현한다면 어떤 경우에도 L.range가 더 빠를 것 입니다.  감사합니다 :)