angularjs - register - directive 뜻




ng-if 대 ng-show/ng-hide를 호의 할 때? (5)

DOM-wise에서 ng-if / ng-show 작업의 차이점을 보여주는 CodePen을 보려면 here 를 참조 here .

@markovuksanovic이 질문에 잘 대답했습니다. 하지만 나는 다른 관점에서 그걸 보았습니다. 항상 ng-if 사용하여 다음 요소가 아닌 한 해당 요소를 DOM 밖으로 가져 왔습니다.

  1. 어떤 이유로 여러분의 요소에 대한 데이터 바인딩과 $watch 가 보이지 않는 동안에도 활성 상태를 유지해야합니다. 현재 양식이 유효하지 않은 입력에 대한 유효성을 검사하여 전체 양식이 유효한지 여부를 판별하려면 양식이이 경우에 적합 할 수 있습니다.
  2. 위에서 언급 한 것처럼 조건부 이벤트 핸들러를 사용하여 정교한 상태 논리를 사용하고 있습니다. , ng-if를 사용할 때 중요한 상태를 잃어 버리는 것처럼 핸들러를 수동으로 연결하거나 분리하는 경우 직접 데이터 모델에서 상태를보다 잘 표현할 수 있는지, 핸들러는 언제든지 지시문에 조건부로 적용되는지 여부를 자문 해보십시오 요소가 렌더링됩니다. 즉, 핸들러의 유무는 상태 데이터의 한 형태입니다. DOM에서 데이터를 가져와 모델로 가져옵니다. 핸들러의 유무는 데이터에 의해 결정되어야하므로 쉽게 다시 작성해야합니다.

각도가 정말 잘 쓰여집니다. 그것은 무엇을 고려하여 빠르다. 그러나 어려운 일 (예 : 양방향 데이터 바인딩)을 쉽게 쉽게 만들 수있는 마법의 모든 것이 있습니다. 이러한 모든 것을보기 쉽게 만드는 것은 약간의 성능 오버 헤드를 수반합니다. 어느 누구도보고 있지 않은 DOM 덩어리에서 $digest cycle 동안 setter 함수가 얼마나 많은 수천 번이나 수천 번 평가되었는지 알면 놀랄 것입니다. 그리고 같은 것을하는 수십 또는 수백 개의 보이지 않는 요소가 있다는 것을 깨닫습니다.

데스크탑은 실제로 대부분의 JS 실행 속도 문제를 해결할만큼 강력 할 수 있습니다. 그러나 모바일 용으로 개발하는 경우 ng-if를 사용하면 인간이 가능할 때마다 쉽게 생각할 수 있어야합니다. JS 속도는 여전히 모바일 프로세서에서 중요합니다. ng-if를 사용하면 매우 저렴한 비용으로 잠재적으로 중요한 최적화를 얻을 수있는 매우 쉬운 방법입니다.

나는 ng-showng-hide 가 요소에 설정된 클래스에 영향을 미치고 ng-if 가 요소가 DOM의 일부로 렌더링되는지 여부를 제어한다는 것을 알고 있습니다.

ng-show / ng-hide 또는 ng-hide 를 선택하는 방법에 대한 지침이 있습니까?


ng-include 및 ng-controller가 ng-include에 큰 영향을 미치면 필수 부분을로드하지 않고 플래그가 true가 아닌 경우 ng-controller에서 플래그가없는 경우 컨트롤러를로드하지 않습니다. 사실 그렇지만 플래그가 false가되면 플래그가 false로 바뀝니다. 플래그가 true가되면 DOM에서 제거하면 DOM이 다시로드됩니다. ng-show는 한 번 더 좋지만 show ng-if가 더 좋습니다.


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

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

대부분의 성능 문제와 같이 대부분의 성능 문제와 같이 반복되는 요소 (n) (특히 중첩 된 경우 (nxn 또는 더 나쁜 경우) 및 이러한 요소 내부에서 실행 되는 계산 유형의 경우)의 차이가 중요해질 수 있습니다 :

  • ng-show : 옵션 요소가 90 %의 시간과 같이 자주 표시 되는 경우 (밀도가 높을 때), 콘텐츠를 저렴하게 표시하는 경우에는 준비가되어 표시 / 숨기기 만 더 빠를 수 있습니다 계산 또는로드). 이것은 DOM을 숨겨진 요소로 채우면서 메모리를 소비하지만 이미 존재하는 것을 보여 주거나 숨기 만하면 브라우저의 값싼 조작이 될 것입니다.

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


유스 케이스에 따라 다르지만 차이점을 요약하면 다음과 같습니다.

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

DOM에없는 요소는 성능에 영향을 미치지 않으며 ng-show/ng-hide 와 비교하여 ng-if 사용하면 웹 응용 프로그램이 더 빨라질 ng-show/ng-hide 있습니다. 내 경험상, 그 차이는 무시할 만하다. ng-show/ng-hideng-if 를 모두 사용하는 경우 애니메이션을 사용할 수 있으며 두 가지 모두에 대한 예제는 각도 문서에서 사용할 수 있습니다.

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


ng-show or ng-hide 하면 표현식의 값에 관계없이 컨텐츠가로드되지만 표현식의 값에 따라 표시됩니다.

ng-if 를 사용하면 ng-if 의 표현식이 true로 평가되는 경우에만 내용이로드됩니다.

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







angularjs-directive