JS 성능 : 조건 내부의 이벤트 처리기와 이벤트 처리기 내부의 조건

필 블런트

나는 비교적 JS에 익숙하지 않지만 성능이 웹 개발에서 매우 중요한 문제라는 것을 잘 알고 있습니다.

몇 가지 관련 스레드 (예 : Javascript pattern : Conditional event handler )를 검색하고 찾았 지만 시나리오가 훨씬 간단하고 클래스와 같은 고급 개념이 포함되지 않기 때문에 혼란 스러웠습니다.

예를 들어, 내 웹 사이트에 다른 body class = "type"태그로 정의 된 다양한 '유형'페이지가 있다고 가정 해 보겠습니다. 명확성을 위해 body class = "member-details", body class = "club-details"및 body class = "random-page-type"을 사용할 수 있습니다. 20 가지 가능한 바디 클래스 유형이 꽤 있다고 상상해보십시오.

본문이 특정 유형이면 특정 클릭 이벤트 핸들러를 요소에 바인딩하고 다른 유형이면 다른 요소에 바인딩하려는 상황을 고려하십시오.

질문은 ~이야:

핸들러를 조건에 배치하거나 핸들러에 조건을 배치하는 것이 성능면에서 더 나은가요? 명확성을 위해 의사 코드 :

1) 이벤트 핸들러 내부의 조건

ON DOCUMENT READY {
    if page type is 'club-details' || page type is 'x' || page type is 'y' {
        bind function1 ();
    }
}

2) 조건 내부의 이벤트 핸들러

if page type is 'club-details' || page type is 'x' || page type is 'y' {
    ON DOCUMENT READY {
        bind fuction1();
    }
}

이것은 매우 간단한 예제이지만, 예제 1에서와 같이 항상 이벤트를 바인딩하는 성능에 대한 정보를 요청하거나 예제 2와 같이 반복 조건을 통해 바인딩할지 여부를 결정한 것 같습니다.

남자 이름

자바 스크립트 이벤트는 비동기 적으로 실행되기 때문에 귀하의 예제는 성능의 용어가 아니라 메모리입니다. 두 번째 예제는 더 적은 이벤트가 바인딩되기 때문에 첫 번째 예제보다 적은 메모리를 사용합니다. 클라이언트 측 성능은 서버 측 성능에 비해 그다지 중요하지 않습니다. 즉, 사소한 성능 이점보다 멋지고 읽기 쉬운 코드 작성을 고려해야합니다. 자바 스크립트는 요즘 정말 빠릅니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

성능 문제 : 조건부 이벤트의 대안

분류에서Dev

Oracle : 트리거 내부의 제약 조건 비활성화

분류에서Dev

JQuery 조건부 이벤트

분류에서Dev

for 문 내부의 조건부 이름 바꾸기

분류에서Dev

클릭 이벤트 처리기 내부의 SetInterval 메서드

분류에서Dev

조건부 흐름이있는 BPMN 이벤트 기반 게이트웨이

분류에서Dev

Haste의 이벤트와 함께 이벤트 처리기

분류에서Dev

조건부 트리거는 성능 향상이 없습니까?

분류에서Dev

조건부로 슬라이드 트리거 및 자바 스크립트 이벤트 숨기기

분류에서Dev

MySQL : 조건문이있는 Concat 내부의 연결 기호

분류에서Dev

dplyr 내부의 조건부 케이스

분류에서Dev

react.js의 부모 구성 요소에서 자식 구성 요소의 이벤트 처리기 기능을 재정의하는 방법

분류에서Dev

C #의 람다 이벤트 처리기에서 비 정적 필드 참조

분류에서Dev

process.stdin의 읽기 가능한 이벤트에 조건을 추가하는 방법은 무엇입니까?

분류에서Dev

Vb.Net의 이벤트 처리기

분류에서Dev

전 처리기 조건부 코드가 바이너리에 들어 갑니까?

분류에서Dev

SUM 내의 조건부 논리

분류에서Dev

SQL 쿼리의 조건부 케이스

분류에서Dev

페이지의 조건부 onbeforeunload 이벤트

분류에서Dev

텍스트 렌더링 선언 부족을 처리하기위한 IE10 +의 조건부 주석

분류에서Dev

두 개의 OnItemClick 이벤트를 처리하는 부모 래퍼 조각

분류에서Dev

템플릿의 전 처리기 조건

분류에서Dev

taxonomy.php 내의 특정 카테고리에 대한 조건부 텍스트

분류에서Dev

대화 조각의 터치 이벤트를 바로 아래보기로 전달 (부모 활동 내부)

분류에서Dev

요소 내부의 텍스트를 jQuery로 바꾸기위한 조건문

분류에서Dev

SQL 쿼리 내부에 조건 작성

분류에서Dev

조건이있는 하위 쿼리 내부 조인

분류에서Dev

Java Hibernate 속성의 null 가능성을 기반으로 조건부 기준이 가능합니까?

분류에서Dev

조건부로 값을 할당하면 Blur 이벤트가 자동으로 트리거됩니다.

Related 관련 기사

  1. 1

    성능 문제 : 조건부 이벤트의 대안

  2. 2

    Oracle : 트리거 내부의 제약 조건 비활성화

  3. 3

    JQuery 조건부 이벤트

  4. 4

    for 문 내부의 조건부 이름 바꾸기

  5. 5

    클릭 이벤트 처리기 내부의 SetInterval 메서드

  6. 6

    조건부 흐름이있는 BPMN 이벤트 기반 게이트웨이

  7. 7

    Haste의 이벤트와 함께 이벤트 처리기

  8. 8

    조건부 트리거는 성능 향상이 없습니까?

  9. 9

    조건부로 슬라이드 트리거 및 자바 스크립트 이벤트 숨기기

  10. 10

    MySQL : 조건문이있는 Concat 내부의 연결 기호

  11. 11

    dplyr 내부의 조건부 케이스

  12. 12

    react.js의 부모 구성 요소에서 자식 구성 요소의 이벤트 처리기 기능을 재정의하는 방법

  13. 13

    C #의 람다 이벤트 처리기에서 비 정적 필드 참조

  14. 14

    process.stdin의 읽기 가능한 이벤트에 조건을 추가하는 방법은 무엇입니까?

  15. 15

    Vb.Net의 이벤트 처리기

  16. 16

    전 처리기 조건부 코드가 바이너리에 들어 갑니까?

  17. 17

    SUM 내의 조건부 논리

  18. 18

    SQL 쿼리의 조건부 케이스

  19. 19

    페이지의 조건부 onbeforeunload 이벤트

  20. 20

    텍스트 렌더링 선언 부족을 처리하기위한 IE10 +의 조건부 주석

  21. 21

    두 개의 OnItemClick 이벤트를 처리하는 부모 래퍼 조각

  22. 22

    템플릿의 전 처리기 조건

  23. 23

    taxonomy.php 내의 특정 카테고리에 대한 조건부 텍스트

  24. 24

    대화 조각의 터치 이벤트를 바로 아래보기로 전달 (부모 활동 내부)

  25. 25

    요소 내부의 텍스트를 jQuery로 바꾸기위한 조건문

  26. 26

    SQL 쿼리 내부에 조건 작성

  27. 27

    조건이있는 하위 쿼리 내부 조인

  28. 28

    Java Hibernate 속성의 null 가능성을 기반으로 조건부 기준이 가능합니까?

  29. 29

    조건부로 값을 할당하면 Blur 이벤트가 자동으로 트리거됩니다.

뜨겁다태그

보관