2012-01-19 3 views
8

HTML5 Canvas로 일부 애니메이션 작업을하고 있다고 가정 해 보겠습니다. 내가 것이 바람직 할 것이다 객체의 방법을, 애니메이션을 찾고 있어요 경우, 성능은 현명한 (내가 IE8에 대해 걱정하지 않는다 가정) :개체 메서드에서 setTimeout - ES5 바인딩 또는 종료?

setTimeout(this.render.bind(this), 15); 

또는

var self = this; 
setTimeout(function() { self.render() }, 15); 

내 특별한 경우가 아니다 시각적으로 차이를 만들 정도로 충분히 강렬합니다. 나는 최선의 방법을 찾고있다.

bind으로 새 함수를 만드는 것이 클로저를 만드는 것보다 오버 헤드가 적을 것이라고 생각하지만 전문가에게 물어보고 싶습니다.

+1

이것은 내게 최적화가 된 것 같은 냄새가 난다. 그런데 당신의 문제가 무엇인지는 모르겠다.하지만 나는이 안전 문제에 대해 75 %의 시간이 문제가되지 않는다고 생각한다. – mkoryak

+0

둘 다 클로저를 만들고, 유일한 차이점은 어떤 범위인가? 그 기능들은 ... –

+2

@mkoryak - 당신이 더 많은 일을하고 있다면 그것은 단지 지나치게 최적화 된 것입니다. 두 가지 모두 구현하기는 쉽지 않으며, 어느 것이 (잠재적으로) 더 성능이 좋은지 궁금합니다. –

답변

5

JavaScript 성능 질문은 까다로운 데 그 이유는 다양한 엔진이 성능 특성이 매우 다르기 때문입니다. 한 엔진에서 빠른 것은 다른 엔진에서 느립니다.

클로저는 실제로 매우 빠릅니다. 결국 모든 함수는 클로저이고 변수는 즉시 포함 된 컨텍스트에 정의되어 있습니다 (따라서 범위 체인을 통해 많은 부분을 살펴 보지 못합니다).

이론적으로 ES5 기능을 기본적으로 지원하는 엔진을 사용하면 bind의 작동 방식을 최적화 할 수 있으므로 더 빠르게 만들 수 있습니다 (단 하나의 스코프 체인 조회 만 필요 없음).

중요합니까? 아뇨, 당신에게 의미있는 것을 사용하겠습니다. ES5 기능 중 일부는 항상 사용할 수 있지만 IE8은 기본적으로 ES5 기능을 기본적으로 제공하지 않는 유일한 브라우저는 아니며 일부 ES5 기능과 달리 bind은 sh37에 의해 완벽하게 에뮬레이트 될 수 있습니다.   — 그것을하기 위해 그들은 call/apply을 사용해야 만합니다. 이는 일부 엔진의 잠금보다 느릴 수 있습니다).

관련 문제