대신 마우스 오버 및 마우스 아웃 사용 : 호버

Question

프로젝트의 경우 .hover 클래스가있는 :hover 가상 클래스 (mouseover 및 mouseout 이벤트에 추가/제거)를 에뮬레이션하고 싶습니다.
문제는 성능에 어느 정도 영향을 미치며 차이가 얼마나 클까요? link

Answer 1

성능은 개별 사용자의 컴퓨터에 따라 달라집니다 여기
은 예입니다. 자바 스크립트가 비활성화되어 있지 않으면 어떤 머신에서든 차이점이 거의 없을 것입니다. 사용자가 자바 스크립트를 사용할 수 없게 된 경우에이를 보완 할 CSS를 포함시키는 것을 고려할 수 있습니다.

Answer 2

CSS가 JavaScript에서 수행 할 수있는 작업을 다시 작성하여 무엇을 찾고 있습니까?

JavaScript는 CSS보다 항상 느립니다. 이와 같은 매우 간단한 경우에는 눈에 띄지 않을 것입니다. 그러나 많은 것을 얻기 시작하면 (예를 들어 StackOverflow는이 페이지에 약 100 개의 링크가 있으며 매우 빠르게 합쳐집니다), 눈에 띄게 느리게 시작됩니다 다운.

주된 이유 중 하나는 JavaScript 프로세서를 실행하고 JavaScript 검색과 일치하는 모든 요소를 ​​찾아서 이벤트 수신기를 추가해야한다는 것입니다. 또한 JavaScript에는 CSS와 같은 하드웨어 가속 기능이 없습니다. 이것은 CSS가 할 수있는 변환 및 변환을 포함하기 시작할 때 주요 요소가되기 시작합니다.

개발 및 유지 관리 시간을 고려해야합니다. 대부분의 사람들은 명시된 행동이 CSS에있을 것으로 기대합니다. 그들이 그것을 발견하지 못하면, 주위를 파헤 치고, JavaScript 코드를 통해 정신적으로 구문 분석하여 가상 호버 (pseudo-hover) 코드를 찾습니다. 이를 위해서는 시간과 노력이 필요합니다.