자바 스크립트 성능 : 무엇이 페이지 속도를 늦추고 있는지 확인하는 방법?

Question

페이지가 매우 느리지 만로드되지는 않지만 페이지의 양식 필드에 입력하는 응답 성 측면에서 유용합니다.

페이지에 아약스가 없습니다. 이는 네트워크 전송과 관련이 없습니다.

코드 병목 현상을 발견하는 데 유용한 도구 또는 전략은 무엇입니까? 병목 현상이 어디에 있는지 크롬 개발자 도구에서 발견했습니다.

Answer 1

입력란의 각 키를 누르는 중 일부 이벤트가 발생하는 것처럼 들립니다. 당신이 할 수있는 것들 :

1. 크롬의 프로파일은 사용자의 요구에 맞지 않을 경우, 꽤 괜찮은 방화 광 또는 IE9의 프로파일을보십시오. IE9에서는 각 함수 호출에 CPU 시간이 얼마나 소요되었는지 확인할 수 있습니다.
2. 일시적으로 필드에서 핸들러를 하나씩 제거하고 성능의 변경 사항을 관찰하십시오.

어떻게 진행되는지 알려주세요.

Answer 2

웹킷에는 '프로필'옵션이 있습니다. 개발자 도구 (ctrl + shift + i)를 열고 '프로필'을 클릭하십시오. 거기에서 하단에 레코드 버튼 (원)을 볼 수 있습니다. 그것을 클릭하고 평소와 같이 귀하의 페이지를 사용하십시오. 함수 호출에 대한 타임 라인을 중지하고 검사하려면 다시 클릭하십시오!

는 또는 개별적으로 사용하여 벤치 마크 기능을 수행 할 수 있습니다

console.time("Some label"); 
console.timeEnd("Some label"); 

Answer 3

나는이 목적을 위해 firebug 사용합니다. 여기에는 profiler이 포함됩니다.

Answer 4

이 목적으로 나는 UX Profiler을 만들었습니다. 사용자 동작 (클릭, 키 누르기 등)의 결과로 발생하는 모든 이벤트를 추적하고 그룹화하고 성능을 측정합니다. 따라서 어디에서 병목 현상이 발생했는지 쉽게 알 수 있습니다.