VUE3.0을 빠르게 시작하는 방법: 학습
관련 권장사항 입력: JavaScript 튜토리얼
이벤트 핸들러는 최신 웹 애플리케이션에서 상호 작용할 수 있기 때문에 많은 개발자가 실수로 페이지에서 많은 수의 이벤트 핸들러를 사용하게 됩니다. JavaScript에서 페이지의 이벤트 핸들러 수는 페이지의 전반적인 성능과 직접적인 관련이 있습니다. 이유는 다양합니다. ① 각 함수는 객체이며 메모리 공간을 차지합니다. 객체가 많을수록 성능이 저하됩니다. ② 특정 이벤트 핸들러에 필요한 DOM 방문 횟수로 인해 전체 지연이 발생합니다. 페이지 상호 작용.
(let value of value) {
ul.innerHTML += '<li>${value}</li>';} 이 코드는 각 반복마다 innerHTML을 한 번씩 설정해야 하기 때문에 비효율적입니다. 뿐만 아니라 각 루프마다 innerHTML을 먼저 읽어야 합니다. 즉, innerHTML은 한 루프에서 두 번 액세스해야 합니다.
2.let itemsHtml = "";for(let value of value){
itemsHtml += '<li>${value}</li>';}ul.innerHTML = itemsHtml; 이 수정 후에는 innerHTML에만 값이 할당될 수 있습니다. :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');
너무 많은 이벤트 핸들러에 대한 해결책은 이벤트 위임을 사용하는 것입니다. 이벤트 위임은 이벤트 버블링을 활용하므로 하나의 이벤트 핸들러만 사용하여 한 가지 유형의 이벤트를 관리할 수 있습니다. 예를 들어 클릭 이벤트가 문서까지 버블링됩니다. 이는 클릭 가능한 각 요소에 대해 별도의 이벤트 핸들러를 지정하는 대신 전체 페이지에 대해 onclick 이벤트 핸들러를 지정할 수 있음을 의미합니다.
<ul id="myGirls"> <li id="girl1">동비비</li> <li id="girl2">윤윤</li> <li id="girl3">Medusa</li></ul>
여기에는 클릭 시 특정 작업을 수행해야 하는 세 개의 목록 항목이 포함되어 있습니다. 일반적인 방법은 세 개의 이벤트 핸들러를 지정하는 것입니다:
let item1 = document.getElementById("girl1 ");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("click",(event) => {
console.log("저는 비비동입니다!");})item2.addEventListener("click",(event) => {
console.log("나는 윤윤이다!");})item3.addEventListener("click",(event) => {
console.log("나는 메두사입니다!");}) 동일한 코드가 너무 많고 코드가 너무 보기 흉합니다.
이벤트 위임을 사용하면 여러 요소의 공통 조상 노드에 이벤트 핸들러를 추가하기만 하면 문제를 해결할 수 있습니다!
let list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
목표 = event.target을 두십시오;
스위치(target.id){
사례 "girl1":
console.log("저는 비비동입니다!");
부서지다;
사례 "girl2":
console.log("나는 윤윤이다!");
부서지다;
사례 "girl3":
console.log("나는 메두사입니다!");
부서지다;
}}) 문서 객체는 언제든지 사용할 수 있으며 언제든지(DOMContentLoaded 또는 로드 이벤트를 기다리지 않고) 이벤트 핸들러를 추가하고 이를 사용하여 페이지의 일부 유형의 모든 이벤트를 처리할 수 있습니다. 이는 페이지가 클릭 가능한 요소를 렌더링하는 한 지연 없이 작동한다는 것을 의미합니다.
페이지 이벤트 루틴을 설정하는 데 소요되는 시간을 절약하세요.
전체 페이지에 필요한 메모리를 줄이고 전반적인 성능을 향상시킵니다.
이벤트 핸들러를 요소에 할당하면 브라우저 코드와 페이지 상호 작용을 담당하는 JavaScript 코드 사이에 연결이 설정됩니다. 이러한 접촉이 재개될수록 페이지 성능은 더욱 저하됩니다. 이벤트 위임을 통해 이러한 연결을 제한하는 것 외에도 사용되지 않는 이벤트 핸들러는 즉시 제거해야 합니다. 많은 웹 애플리케이션의 성능 저하는 메모리에 남아 있는 쓸모 없는 이벤트 핸들러로 인해 발생합니다.
이 문제에는 두 가지 이유가 있습니다.
DOM 메소드 RemoveChild() 또는 replacementChild()를 통해 노드를 삭제하는 등
가장 일반적인 방법은 innerHTML을 사용하여 페이지의 특정 부분을 전체적으로 바꾸는 것입니다. 이때, innerHTML에 의해 삭제된 요소에 이벤트 핸들러가 있는 경우에는 가비지 컬렉션 프로그램에 의해 정상적으로 정리되지 않습니다.
따라서 요소가 삭제될 것이라는 것을 알고 있는 경우 btn.onclick = null;//删除事件处理程序와 같이 해당 이벤트 핸들러를 수동으로 삭제해야 합니다. 이벤트 위임은 요소가 삭제될 때에도 도움이 될 수 있습니다. innerHTML로 대체된 경우 요소에 이벤트 핸들러를 추가하지 말고 상위 수준 노드에 추가하기만 하면 됩니다.
페이지가 언로드된 후 이벤트 핸들러가 정리되지 않으면 여전히 메모리에 남아 있습니다. 그 후에는 브라우저가 페이지를 로드 및 언로드할 때마다(예: 앞으로 이동, 뒤로 이동 또는 새로 고침) 이벤트 핸들러가 재활용되지 않기 때문에 메모리에 남아 있는 개체 수가 늘어납니다.
일반적으로 페이지가 언로드되기 전에 onunload 이벤트 핸들러에서 모든 이벤트 핸들러를 삭제하는 것이 가장 좋습니다. 이벤트 위임의 장점도 이때 확인할 수 있습니다. 이벤트 핸들러가 적기 때문에 어떤 핸들러를 삭제할지 기억하기 쉽습니다.
let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length;++i){
p = document.createElement("p");
document.body.appendChild(p);} let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len;++i){
p = document.createElement("p");
document.body.appendChild(p);} 표현식 ①의 첫 번째 줄은 문서의 모든 <p> 요소를 포함하는 HTMLCollection을 가져옵니다. 이 컬렉션은 실시간이므로 페이지에 새 <p> 요소를 추가한 다음 이 컬렉션을 쿼리할 때마다 항목이 하나 더 있게 됩니다. 브라우저는 컬렉션이 생성될 때마다 컬렉션을 저장하지 않기 때문에 방문할 때마다 컬렉션을 업데이트합니다. 각 루프는 i < ps.length 평가합니다. 이는 모든 <p> 요소를 가져오는 쿼리를 의미합니다. 새로운 <p> 요소가 생성되어 루프 본문 내의 문서에 추가되기 때문에 ps.length 값도 루프를 통과할 때마다 증가됩니다. 두 값 모두 증가하므로 i는 결코 ps.length 와 같지 않으므로 식 ①은 무한 루프를 발생시킵니다.
표현식 ②에서는 len이 루프 시작 시 세트의 길이를 보유하고 있기 때문에 세트의 길이를 보유하는 변수 len이 초기화되며, 이 값은 세트가 증가함에 따라 동적으로 증가하지 않습니다( for循环中初始化变量处只会初始化一次.) 따라서 식 ①에서 나타나는 무한 루프 문제를 피할 수 있습니다.
변수를 초기화하지 않으려면 역방향 반복을 사용할 수도 있습니다.
let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i ){
p = document.createElement("p");
document.body.appendChild(p);} 
관련 권장사항: JavaScript Tutorial
이상은 JavaScript의 메모리 및 성능 문제에 대한 심층적인 이해입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!
