HTML 페이지 렌더링에 걸리는 시간을 찾는 방법은 무엇입니까?

큰 HTML 표가있는 큰 페이지가 있습니다. Internet Explorer에서 내용을 렌더링하는 데 오랜 시간이 걸릴 수 있습니다. 렌더링하는 데 10-15 초 정도 걸릴 수 있습니다. 페이지가 렌더링되기 시작한 시점과 렌더링이 완전히 끝났을 때를 결정하는 JavaScript 또는 다른 방법이 있습니까?HTML 페이지 렌더링에 걸리는 시간을 찾는 방법은 무엇입니까?

참고 : 자바 스크립트를 사용하여 페이지에 값을 표시하고 싶습니다.

출처

2013-10-25 Berlin Brown

확인이 ** [링크] (HTTP를 findout 이러한 사이트와 테스트 할 수 있습니다 그렇지 않으면 소요되는 많은 시간 findout : //로 stackoverflow.com/questions/2516665/how-can-i-monitor-the-rendering-time-in-a-browser)** – super

테스트중인 IE의 버전 및 최근 IE10 +/FF/Chrome과 비교하는 방법은 무엇입니까? –

[이 SO 응답] (http://stackoverflow.com/a/18272010/1169519)에서 렌더링 시간을 줄이는 방법에 대한 지침을 찾을 수 있습니다. 또한 주석 스레드에 jsFiddle이 링크되어 있습니다. – Teemu

enter image description here 글쎄, 나는 F12 툴에서 Network waterfall을 사용하겠다고 말했고, 여기에이 페이지의 스크린 샷이있다. 초록색 선은 렌더링이 완료되고 사용자가 상호 작용을 시작할 수 있음을 나타냅니다.

하지만 JavaScript로하고 싶습니다. 그래서 약간의 노력이 필요하지만 여기에 있습니다. 콘솔로 가서 performance.timing을 실행하십시오. 이렇게하면 많은 타이밍 값을 가진 객체를 얻을 수 있습니다. 이것들은 진드기 값이며 실제 밀리 초 델타를 얻기 위해 그것들을 비교해야합니다. 다음은이 페이지의 출력 예입니다.

{ 
    [functions]: , 
    __proto__: { }, 
    connectEnd: 1382671634858, 
    connectStart: 1382671634858, 
    constructor: { }, 
    domainLookupEnd: 1382671634858, 
    domainLookupStart: 1382671634858, 
    domComplete: 1382671635972, 
    domContentLoadedEventEnd: 1382671635377, 
    domContentLoadedEventStart: 1382671635198, 
    domInteractive: 1382671635198, 
    domLoading: 1382671634929, 
    fetchStart: 1382671634858, 
    loadEventEnd: 1382671635974, 
    loadEventStart: 1382671635973, 
    msFirstPaint: 1382671635631, 
    navigationStart: 1382671634796, 
    redirectEnd: 0, 
    redirectStart: 0, 
    requestStart: 1382671634929, 
    responseEnd: 1382671634929, 
    responseStart: 1382671634929, 
    unloadEventEnd: 1382671634796, 
    unloadEventStart: 1382671634796 
}

출처

2013-10-25 03:34:03

고마워 크리스챤 여기서 올바르게 포맷 할 코드를 얻을 수 없다. LOL –