페이지 렌더링 시간을 단축하고 Dom Level 0 Event_javascript 기술을 종료합니다.

오늘날의 웹 애플리케이션은 점점 더 복잡해지고 있으며 다양한 사용자 트리거 이벤트에 응답해야 합니다. 따라서 HTML 페이지의 DOM 요소에 이벤트 수신 기능을 추가하는 것이 불가피합니다.

우리는 세 가지가 있다는 것을 알고 있습니다. 이벤트 수신 함수를 DOM 요소에 바인딩하는 방법:
1: 페이지 html:

2: 페이지 html:


document.getElementById (" btn").onclick = 테스트;



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와 메모리 소모가 다른 방법보다 훨씬 더 큽니다.

분석을 용이하게 하기 위해 코드코드 복사 코드 document.getElementById(“btn”).onclick = function(event){