ng-if와 ng-show / ng-hide를 언제 선호합니까?

나는 이해 ng-show및 ng-hide요소에 클래스 세트와 그 영향을 미치는 ng-if요소가 DOM의 일부로서 렌더링 여부를 제어합니다.

선택에이 가이드 라인 ng-if이상 ng-show/ ng-hide또는 그 반대는?

사용 사례에 따라 다르지만 차이점을 요약하면 다음과 같습니다.

1. ng-ifDOM에서 요소를 제거합니다. 즉, 모든 처리기 또는 해당 요소에 연결된 다른 모든 항목이 손실됩니다. 예를 들어 클릭 핸들러를 하위 요소 중 하나에 바인딩 한 경우 ng-iffalse로 평가되면 해당 요소가 DOM에서 제거되고 ng-if나중에 true로 평가되어 요소를 표시 한 후에도 클릭 핸들러가 더 이상 작동하지 않습니다 . 핸들러를 다시 연결해야합니다.
2. ng-show/ng-hideDOM에서 요소를 제거하지 않습니다. CSS 스타일을 사용하여 요소를 숨기거나 표시합니다 (참고 : 자체 클래스를 추가해야 할 수도 있음). 이런 식으로 어린이에게 부착 된 처리기가 손실되지 않습니다.
3. ng-ifng-show/ng-hide하지 않고 자식 범위를 만듭니다.

DOM을에없는 요소는 덜 성능에 영향을하고 웹 응용 프로그램은 사용할 때 빠른 것으로 나타날 수 ng-if에 비해 ng-show/ng-hide. 내 경험상 그 차이는 무시할 만하다. 모두를 사용할 때 애니메이션이 가능 ng-show/ng-hide하고 ng-if각 문서 모두에 대한 예제.

궁극적으로 대답해야 할 질문은 DOM에서 요소를 제거 할 수 있는지 여부입니다.

DOM 방식으로 ng-if / ng-show 작동 방식의 차이를 보여주는 CodePen 은 여기 를 참조 하십시오 .

@markovuksanovic 님이 질문에 잘 답변했습니다. 하지만 다른 관점에서 그것을 올 것 : 나는 것 항상 사용 ng-if하고 DOM에서 이러한 요소를 얻을하지 않는 :

1. 어떤 이유로 든 $watch보이지 않는 동안 활성 상태를 유지하려면 요소 의 데이터 바인딩과 -es 가 필요합니다 . 전체 양식이 유효한지 여부를 판별하기 위해 현재 표시되지 않은 입력에 대한 유효성을 검사하려는 경우 양식이 좋은 경우입니다.
2. 위에서 언급했듯이 조건부 이벤트 핸들러와 함께 정교한 정교한 상태 저장 논리를 사용하고 있습니다. 즉 , ng-if를 사용할 때 중요한 상태가 손실되도록 처리기를 수동으로 연결 및 분리하는 경우 해당 상태가 데이터 모델에서 더 잘 표현되는지 여부와 처리기가 지시문에 의해 조건부로 적용되는지 여부를 스스로에게 묻습니다. 요소가 렌더링됩니다. 달리 말하면, 핸들러의 유무는 상태 데이터의 한 형태입니다. 해당 데이터를 DOM에서 모델로 가져옵니다. 처리기의 존재 여부는 데이터에 의해 결정되므로 쉽게 다시 만들 수 있습니다.

각도는 정말 잘 쓰여 있습니다. 그것이하는 것을 고려하면 빠릅니다. 그러나 그것이하는 일은 양방향 데이터 바인딩과 같은 어려운 일을 사소하게 쉽게 보이게하는 마술입니다. 모든 것을 쉽게 보이게하려면 성능 오버 헤드가 발생합니다. $digest아무도 보지 않는 DOM 덩어리 에서 사이클 동안 setter 함수가 몇 백 또는 수천 번 평가되는지 알면 충격을받을 수 있습니다 . 그리고 당신은 수십 또는 수백 개의 보이지 않는 요소가 모두 똑같은 일을하고 있음을 알고 있습니다 ...

데스크탑은 대부분의 JS 실행 속도 문제를 무시할 정도로 강력 할 수 있습니다. 그러나 모바일 용으로 개발하는 경우, 가능할 때마다 ng-if를 사용하는 것은 쉬운 일이 아닙니다. JS 속도는 여전히 모바일 프로세서에서 중요합니다. ng-if를 사용하는 것은 매우 저렴한 비용으로 잠재적으로 중요한 최적화를 얻는 매우 쉬운 방법입니다.

내 경험에서 :

1) 페이지에 ng-if / ng-show를 사용하여 무언가를 표시하거나 숨기는 토글이있는 경우 ng-if는 더 많은 브라우저 지연을 발생시킵니다 (느리게). 예를 들어, 두보기 사이를 전환하는 데 사용되는 버튼이 있으면 ng-show가 더 빠른 것 같습니다.

2) ng-if는 true / false로 평가 될 때 범위를 생성 / 파기합니다. ng-if에 컨트롤러가 연결되어 있으면 ng-if가 true로 평가 될 때마다 해당 컨트롤러 코드가 실행됩니다. ng-show를 사용하는 경우 컨트롤러 코드는 한 번만 실행됩니다. 따라서 여러보기 사이를 전환하는 버튼이 있으면 ng-if 및 ng-show를 사용하면 컨트롤러 코드 작성 방법에 큰 차이가 있습니다.

대답은 간단하지 않습니다 :

대상 컴퓨터 (모바일 대 데스크톱), 데이터의 특성, 브라우저, OS, 실행되는 하드웨어에 따라 다릅니다. 실제로 알고 싶다면 벤치마킹해야합니다.

대부분 메모리와 계산 문제입니다 ... 대부분의 성능 문제로 인해 목록과 같은 반복되는 요소 (n), 특히 중첩 된 경우 (nxn 이상)와 이러한 요소 내에서 실행 되는 계산의 종류에 따라 차이가 커질 수 있습니다 :

• ng-show : 90 %의 시간과 같이 선택적인 요소가 종종 존재하는 경우 (밀도가 높을 경우), 특히 내용이 싼 경우 (예 : 일반 텍스트 만) 계산 또는로드). 숨겨진 요소로 DOM을 채울 때 메모리를 소비하지만 이미 존재하는 것을 표시 / 숨기기하면 브라우저에서 저렴한 작업 일 수 있습니다.

• ng-if : 반대로 요소가 표시되지 않는 경우 (스파 스) 실시간으로 요소를 빌드하고 파괴하십시오. 특히 내용이 비싸면 (계산 / 정렬 / 필터링 된 이미지, 생성 된 이미지). 이는 드문 또는 '주문형'요소에 이상적이며 DOM을 채우지 않는 측면에서 메모리를 절약하지만 많은 계산 (요소 작성 / 파기) 및 대역폭 (원격 컨텐츠 가져 오기)을 수행 할 수 있습니다. 또한 뷰에서 계산하는 양 (필터링 / 정렬)과 모델에 이미있는 것 (사전 정렬 / 사전 필터링 된 데이터)에 따라 다릅니다.

중요한 참고 사항 :

ngIf (ngShow와 달리)는 일반적으로 예기치 않은 결과를 생성 할 수있는 자식 범위를 만듭니다.

나는 이것과 관련된 문제가 있었고 무슨 일이 일어나고 있는지 알아내는 데 많은 시간을 보냈습니다.

(내 지시서는 모델 값을 잘못된 범위에 쓰고있었습니다.)

따라서 머리카락을 절약하려면 너무 느리게 달리지 않는 한 ngShow를 사용하십시오.

어쨌든 성능 차이는 거의 눈에 띄지 않으며 테스트를 거치지 않은 사람이 누구에게 유리한지 아직 확실하지 않습니다 ...

ng-include 및 ng-controller에서 ng-if는 ng-include에 큰 영향을 미치며 필요한 부분을로드하지 않으며 ng-controller에서 플래그가 true가 아니면 플래그가 아닌 한 컨트롤러를로드하지 않습니다. 사실이지만 문제는 ng-if에서 플래그가 false 인 경우 플래그가 true가 될 때 DOM에서 제거되면이 경우 DOM을 다시로드합니다. ng-show가 더 좋습니다. 한 번 동안 ng-if가 더 좋습니다

ng-show or ng-hide컨텐츠 를 사용 하는 경우 (예 : 서버의 썸네일) 표현식의 값에 관계없이로드되지만 표현식의 값에 따라 표시됩니다.

당신 ng-if이 콘텐츠 를 사용 하면 ng-if의 표현이 진실로 평가되는 경우에만로드됩니다.

ng-if를 사용하는 것은 서버에서 데이터 또는 이미지를로드하고 사용자 상호 작용에 따라 이미지 또는 이미지 만 표시하려는 경우에 좋습니다. 이렇게하면 불필요한 nw 집중 작업으로 페이지로드가 차단되지 않습니다.