성능이 뛰어난 JavaScript 이벤트를 작성하는 기술

효율적인 웹 프론트엔드 프로그램을 어떻게 만들느냐는 제가 프론트엔드 개발을 할 때마다 무의식적으로 고민하는 질문입니다. 몇 년 전 야후의 뛰어난 프론트엔드 엔지니어들이 웹 프론트엔드 성능 향상에 관한 책을 출판했는데, 이는 전체 웹 개발 기술 커뮤니티에 센세이션을 일으켰습니다. 신비한 웹 프론트엔드 최적화 문제는 웹 상에서 공통적인 문제가 되었습니다. 스트리트, 그리고 웹 프론트엔드 최적화는 초보자와 전문가 모두가 답할 수 있는 간단한 질문이 되었습니다. 업계 전체가 충격적인 비밀 답을 알게 되면, 기존의 최적화 기술로는 더 이상 개발하는 웹사이트의 질적 도약을 이룰 수 없습니다. 우리가 개발하는 웹사이트가 다른 웹사이트보다 더 나은 성능을 발휘하도록 하려면 더 나은 웹사이트를 만들기 위해서는 더 깊이 있고 독립적으로 생각하고 더 나은 기술을 보유해야 합니다.

Javascript의 이벤트 시스템이 가장 먼저 떠오르는 획기적인 점입니다. 왜 JavaScript 이벤트 시스템인가요? 우리 모두는 웹 프론트엔드에 html, css, javascript라는 세 가지 기술이 포함되어 있다는 것을 알고 있습니다. html과 css가 어떻게 결합되는지는 매우 명확합니다: style, class, id 및 html 태그에 대해서는 별로 말할 것이 없습니다. javascript는 html과 css의 중간에 들어가는데, 이 세 가지를 통합하는 것은 어떻습니까? 마지막으로 이 진입점이 JavaScript의 이벤트 시스템이라는 것을 알게 되었습니다. 우리가 작성하는 JavaScript 코드가 아무리 길거나 복잡하더라도 결국 이벤트 시스템을 통해 HTML과 CSS에 반영될 것이라고 생각했습니다. 은 세 가지 포인트 통합을 위한 진입점이므로 페이지에 필연적으로 많은 수의 이벤트 작업이 있을 것입니다. 특히 오늘날 점점 더 복잡해지는 웹 페이지에서는 이러한 이벤트가 없으면 신중하게 작성된 자바스크립트 코드가 다음 위치에만 저장됩니다. 데이터베이스와 영웅은 쓸모가 없습니다. 페이지에 수많은 이벤트 함수가 있을 예정인데, 습관대로 이벤트 함수를 작성하면 효율성에 영향을 미치는 문제가 있을까요? 제가 조사해본 답은 실제 효율성 문제가 있고, 그것도 심각한 효율성 문제라는 것입니다.

제 답변을 명확하게 설명하기 위해서는 먼저 JavaScript 이벤트 시스템에 대해 자세히 설명해야 합니다.

이벤트 시스템은 javascript, html 및 css 통합을 위한 진입점입니다. 이 진입점은 java의 주요 기능과 같습니다. 그러면 브라우저는 이 진입점을 어떻게 완료합니까? 총 3가지 방법을 연구했는데,

방법 : html 이벤트 처리

HTML 이벤트 처리는 html 태그에 이벤트 함수를 직접 작성하는 방식인데, 이렇게 작성하는 방법은 다음과 같습니다. html과 유사하게 태그가 밀접하게 결합되어 있으므로 html 이벤트 처리라고 합니다. 예를 들어 다음 코드는 다음과 같습니다.