페이지 렌더링 시간을 단축하고 Dom Level 0 Event_javascript 기술을 종료합니다.
- WBOY원래의
- 2016-05-16 17:45:591337검색
오늘날의 웹 애플리케이션은 점점 더 복잡해지고 있으며 다양한 사용자 트리거 이벤트에 응답해야 합니다. 따라서 HTML 페이지의 DOM 요소에 이벤트 수신 기능을 추가하는 것이 불가피합니다.
우리는 세 가지가 있다는 것을 알고 있습니다. 이벤트 수신 함수를 DOM 요소에 바인딩하는 방법:
1: 페이지 html:
코드 복사 코드는 다음과 같습니다.
2: 페이지 html:
코드 복사 코드는 다음과 같습니다.
>
Javascript:
코드 복사 코드는 다음과 같습니다.
document.getElementById (" btn").onclick = 테스트; 3: 페이지 html:
코드 복사 코드는 다음과 같습니다.
Javascript:
코드 복사 코드는 다음과 같습니다.
document.getElementById(“btn”).atachEvent(“onclick”,test); //즉 이 세 가지 방법의 기능적 효과와 차이점은 모두가 알고 있으므로 여기서는 자세히 설명하지 않겠습니다. 하지만 이 세 가지 방법은 페이지 렌더링 속도와 리소스 소비에 미치는 영향이 매우 다릅니다. .
텍스트 뒤에 있는 html 코드는 IE 브라우저로 열고 다양한 코드 세그먼트에 주석을 달아 페이지의 실행 효과를 확인할 수 있습니다.
첫 번째 방법은 다음과 같습니다. , 페이지 노드가 증가하면 페이지 렌더링 시간이 급격히 늘어납니다.
두 번째 방법이 확실히 더 좋고, IE7에서는 약 250ms입니다. 세 번째 방법이 가장 빠릅니다. IE7에서는 권장되는 표준 작성 방법이기도 합니다.
그런 다음 이벤트 바인딩의 논리를 제거하고 시간만 찾습니다. 바인딩 이벤트 없이 DOM 요소를 렌더링하는 것은 125ms에 불과하며, 표시되는 이벤트 바인딩에 소요되는 시간은 여전히 매우 크며, 특히 첫 번째 방법인 Dom 레벨 0 이벤트가 가장 시간이 많이 걸립니다.
또한 각 코드를 실행할 때 작업 관리자를 열고 브라우저에 해당하는 프로세스를 찾아 코드가 실행될 때 CPU 사용량과 메모리 사용량을 확인하는 것이 좋습니다.
Dom 레벨을 확인할 수 있습니다. 0 이벤트는 훨씬 더 많은 CPU를 소비합니다.
메모리 소비 분석
:
브라우저를 다시 열면 빈 페이지의 메모리 사용량은 약 37M, 페이지 이후 가상 메모리는 28M입니다. 렌더링됨: 1 메모리 사용량은 54M, 가상 메모리는 41M 2 메모리 사용량은 44M, 가상 메모리는 31M
3 메모리 사용량은 44M, 가상 메모리는 31M
Dom 레벨 0 이벤트의 메모리 소모가 다른 방법보다 훨씬 많다는 것을 알 수 있습니다.
Dom 레벨 0 이벤트가 왜 이런가요? CPU와 메모리 소모가 다른 방법보다 훨씬 더 큽니다.
분석을 용이하게 하기 위해 코드
} ;
IE 브라우저는 정확히 동일한 내부 함수를 가진 많은 익명 함수를 구별하고 해당 참조를 병합할 만큼 똑똑하지 않습니다. 따라서 점점 더 많은 DOM 이벤트가 바인딩될수록 익명 함수의 수도 점점 더 많아지기 때문입니다. 선언해야 할 익명 이벤트 처리 함수가 너무 많아서 왜 그렇게 많은 시스템 리소스가 소모되는지 이해하는 것은 어렵지 않습니다.
DOM 요소 수가 증가할수록 이 리소스 소모도 증가하게 됩니다. 그리고 페이지를 새로 고치려고 시도하면 새로 고침 횟수가 증가할수록 페이지 실행 속도가 점점 느려지고 CPU 소비도 증가하며 Dom 수준도 약간 증가하는 것을 볼 수 있습니다. 0 이벤트 시간의 연장과 CPU 소모의 누적으로 인해 약간의 메모리 누수가 발생할 것으로 예상됩니다. 또한 IE 브라우저는 버블링 이벤트 모델을 기반으로 하기 때문에 하위 요소의 이벤트가 상위 요소까지 버블링되므로 보다 극단적인 최적화는 많은 하위 요소의 이벤트 바인딩을 제거하고 이벤트를 상위 요소에 바인딩하는 것입니다. .. 이후의 데모에서는 이와 관련된 시도도 있습니다. CPU와 메모리 소비가 가장 낮을 뿐만 아니라 시간도 깨끗한 HTML 페이지를 렌더링하는 것과 동일하다는 것을 알 수 있습니다.
따라서 페이지 이벤트 바인딩에서 이를 수행해야 합니다. Dom 레벨 0 이벤트를 피하고 이벤트를 최대한 늘리십시오. (물론 이벤트 처리의 유연성도 고려해야 합니다.)
데모:
var d = new Date()
var str = [] ;
for(var i = 0;istr.push('' i ' ')
}
ul.innerHTML = str.join("");
alert(new Date - d)
//670 새로 고칠 때 시간이 85씩 늘어납니다.
< /script>
">
;SCRIPT LANGUAGE=" JavaScript">
;/BODY>
IE 브라우저는 정확히 동일한 내부 함수를 가진 많은 익명 함수를 구별하고 해당 참조를 병합할 만큼 똑똑하지 않습니다. 따라서 점점 더 많은 DOM 이벤트가 바인딩될수록 익명 함수의 수도 점점 더 많아지기 때문입니다. 선언해야 할 익명 이벤트 처리 함수가 너무 많아서 왜 그렇게 많은 시스템 리소스가 소모되는지 이해하는 것은 어렵지 않습니다.
DOM 요소 수가 증가할수록 이 리소스 소모도 증가하게 됩니다. 그리고 페이지를 새로 고치려고 시도하면 새로 고침 횟수가 증가할수록 페이지 실행 속도가 점점 느려지고 CPU 소비도 증가하며 Dom 수준도 약간 증가하는 것을 볼 수 있습니다. 0 이벤트 시간의 연장과 CPU 소모의 누적으로 인해 약간의 메모리 누수가 발생할 것으로 예상됩니다. 또한 IE 브라우저는 버블링 이벤트 모델을 기반으로 하기 때문에 하위 요소의 이벤트가 상위 요소까지 버블링되므로 보다 극단적인 최적화는 많은 하위 요소의 이벤트 바인딩을 제거하고 이벤트를 상위 요소에 바인딩하는 것입니다. .. 이후의 데모에서는 이와 관련된 시도도 있습니다. CPU와 메모리 소비가 가장 낮을 뿐만 아니라 시간도 깨끗한 HTML 페이지를 렌더링하는 것과 동일하다는 것을 알 수 있습니다.
따라서 페이지 이벤트 바인딩에서 이를 수행해야 합니다. Dom 레벨 0 이벤트를 피하고 이벤트를 최대한 늘리십시오. (물론 이벤트 처리의 유연성도 고려해야 합니다.)
데모:
코드 복사 코드는 다음과 같습니다.
var d = new Date()
var str = [] ;
for(var i = 0;i
}
ul.innerHTML = str.join("");
alert(new Date - d)
//670 새로 고칠 때 시간이 85씩 늘어납니다.
< /script>
">
;SCRIPT LANGUAGE=" JavaScript">
;/BODY>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.