bind()가 live() 및 delegate()보다 빠릅니까?

저희 팀은 jQuery Mobile을 사용하여 모바일 웹 사이트를 구축하고 있으며 출시일이 가까워지면서 성능이 더욱 중요시되고 있습니다. 우리가 만든 한가지 관찰은 코드 전체에 live()과 delegate()에 대한 많은 호출이 있다는 것입니다. 사실, 내 지식으로는 이벤트 핸들러를 사용하여 이미 존재하는 DOM 노드에 이벤트 핸들러를 연결하는 것입니다. 우리 애플리케이션의 컨텍스트에서는이 항상 존재합니다. 이 항상 존재합니다.bind()가 live() 및 delegate()보다 빠릅니까?

은 이들 각각은 document 루트 노드에 모든 방법까지 버블 한 이벤트 처리를 포함한다는 live() 및 delegate()이 모두 나중에에 DOM에 나타날 수 있습니다 노드에 동적 바인딩을 제공하기위한 것입니다 점을 감안하고 고려 , 우리는 이러한 전화를 (적절할 경우) bind()으로 변경하여 성능 향상을 볼 수 있을지 궁금합니다.

필자는이 방법을 직접 테스트 할 수 있음을 알고 있지만 JavaScript로 성능 테스트를 해본 경험이 많지 않습니다. 아마도 필자가 생각하는 것보다 더 오래 걸릴 것이라고 생각합니다. 단순히 커뮤니티에 물어 보는 것이 좋습니다. 아무도 이것을 테스트 했습니까? 측정 가능한 차이가 있습니까? 또는이 live()과 delegate()을 bind() (으)로 전환하면 시간이 낭비가됩니까?

출처

2011-08-11 Dan Tao

아시는대로 이벤트가 거품을 낼 수 있습니다.live() 메서드는 노드가 나중에 DOM에 나타나거나 처음부터 거기에 있었는지 신경 쓰지 않고 "list"전역 변수를 청취자에게 부착하고 적절한 객체에서 이벤트가 발생하면 수신 대기합니다. 기능을 수행합니다. 그리고 귀하의 문제에 관해서는 "조기 최적화는 모든 악의 근원입니다." – Mironor

@Mironor : 예, * 조기 * 최적화. –

아무런 측정을하지 않았지만 live은 bind이 모든 요소에 영향을 주므로 더 많은 수의 요소에 대해 bind보다 빠릅니다.

bind 이벤트가 200 개 요소 인 경우 jQuery는 모든 요소를 반복하고 각 요소에 addEventListener을 호출해야합니다.
live 이벤트가 200 개 요소 인 경우 jQuery는 <body>에 단일 이벤트 처리기를 추가합니다.
그러나 이것은 신체에 거품을 일으키는 모든 이벤트가 live d 인 각 선택기에 대해 테스트되어야 함을 의미합니다.

따라서, 가장 빠른 옵션은 가능한 한 당신이 그것을 사용하는 방법에 의존

출처

2011-08-11 17:39:57 SLaks

이 추론은 나에게 의미가 있지만, * bind *와 live * 또는 delegate *를 * 단일 * DOM 노드와 함께 사용하는 시나리오에 대해서는 여전히 궁금합니다. –

@ Dan : DOM 노드가 하나만있는 경우 'bind'가 더 빠를 것입니다. – SLaks

'.bind()'의 또 다른 단점은 영향받는 요소에 아직 이벤트 핸들러가없는 경우 jQuery는 공유되는 실제 핸들러 외에 각 요소에 별도의 고유 한 함수 *를 작성한다는 것입니다. 따라서 200 개의 요소에 바인딩하면 201 개의 Function 인스턴스가 생성되고 참조됩니다. – user113716

(그것은 당신의 선택에 대해 테스트해야 적은 다른 이벤트를 얻을 수 있도록)하지만 한 적은 포함하는 요소에 delegate에 있어야한다 요소에 직접 그 이벤트를 결합하는 데 사용됩니다

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

출처

2011-08-11 17:40:41 Mrchief

이것은 (내 의견으로는)'$ ('a'). bind (...) 대'$ (document) .delegate ('a', ...)'와 같은 다소 인위적인 경우를 다룬다. 하지만 하나의 * DOM 노드를 포함하는 jQuery 객체에서'bind'를 호출하는 시나리오에 관심이 있습니다. 아마 내가 직접 테스트 해봐야 겠어? –

그것의 단일 요소 인 경우, 성능은'delegate'과'bind' 사이에서 거의 동일합니다 ('bind'는 약간 더 빠름). 어쨌든 코드를 프로파일 링하여 확신을 가져야합니다. – Mrchief

bind : 대표는 대부분의 경우에 (반드시뿐 전반적으로 속도면에서) 최상의 성능을 제공합니다. 따라서 이벤트는 동적 요소에도 live 및 delegate이 사용 된 요소가있는 경우에만 첨부됩니다. 귀하의 사용에 따라 다르지만 라이브 및 델리게이트는 더 나은 성능을 제공합니다. bind

출처

2011-08-11 17:43:18 ShankarSangoli

나는이 세 가지에 대해 간단한 벤치 마크를 수행했습니다. 일반적으로 대표자가 가장 효율적입니다. 예외는 바인딩 될 요소가 정적이고 알려진 경우입니다. 정적 요소가 여러 개인 경우에도 지속적으로 성능이 우수한 Delegate를 바인딩합니다. Bind에는 초기 오버 헤드가 더 많이 있지만 Delegate에는 더 많은 이벤트 시간 오버 헤드가 있습니다.

내 결과보기 .live() vs .bind()

출처

2011-10-13 08:37:14

나는이 방법들을 서로 대항하기 위해 사용한 코드를 보게된다. –

단일 정적 테스트의 이벤트 처리기에 의해 트리거 된 경고가있는 단일 단추였습니다. 그런 다음 페이지에 여러 개의 버튼을 놓고 여러 정적에 대한 리스너를 사용하여 각 버튼을 바인딩합니다. 그런 다음 하나의 버튼으로 다음 버튼을 만들고 동적 테스트를 위해 동적으로 바인딩했습니다. 전체 시간에 성능 및 프로세스를 측정하기 위해 프로파일 러를 실행합니다. –

bind()가 live() 및 delegate()보다 빠릅니까?

답변

관련 문제