툴팁을 document.body에 첨부하지 마십시오

툴팁 성능 최적화에 대한 Atif Afzal의 통찰력있는 접근 방식<div> 툴팁 관리 용 컨테이너. 이 메소드는 툴팁을 <code>document.body 에 직접 첨부하는 것보다 훨씬 능가합니다. 명시 적으로 언급되지는 않았지만 주요 장점은 절대 포지셔닝에 있습니다. 이 전용 컨테이너는 숨겨진 오버플로 또는 상대적 부모 요소의 복잡성없이 정확한 툴팁 배치를 허용합니다.

놀랍게도, contain CSS 속성이없는 경우에도 별도의 컨테이너를 사용하면 성능이 크게 향상되었습니다. 설명은 강제 스타일의 재 계산을 피하는 데 있습니다. 툴팁 컨테이너는 보이지 않으므로 그 내의 수정은 전체 페이지 렌더링 트리 무효화를 트리거하지 않습니다. 작고 독립적 인 하위 트리 만 무효화되어 상당히 빠른 재 계산이 발생합니다.

이 기술은 Popper.js와 같은 라이브러리와 관련이 있습니다. 저자는 Codepen이 토스트 메시지에 react-hot-toast 를 사용하여 유사한 전략을 사용하여 자신의 메시지 내에 메시지를 중첩하여 추가 최적화 계층을 추가한다고 지적합니다.<div> 컨테이너.</div>

위 내용은 툴팁을 document.body에 첨부하지 마십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!