jQuery가있는 페이지로드 시간

StackOverflow https://stackoverflow.com/questions/1211414

문제

페이지로드 시간을 계산하고 싶습니다. 이것은 전체 페이지가로드 될 때 두 번째 0에서 작은 jQuery 스 니펫이로드 됨)를 의미합니다.

누구든지 경험이 있는지 궁금합니다. 또한 올바르게 구현하는 방법에 대한 아이디어는 적용됩니다.

연장이 필요하지 않습니다. 이미 Firebug가 있고 JS 솔루션이 필요합니다.

감사해요 :)

도움이 되었습니까?

해결책

다른 사람들이 언급했듯이 이것은 매우 정확하지 않을 것입니다. 그러나 이것은 합리적으로 작동해야합니다.

당신의 <head>, 즉, 가능한 빨리 :

<script>
   var startTime = (new Date()).getTime();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
   $(window).load(function () {
       var endTime = (new Date()).getTime();
       var millisecondsLoading = endTime - startTime;
       // Put millisecondsLoading in a hidden form field
       // or Ajax it back to the server or whatever.
   });
</script>

열쇠는이 행동입니다. jQuery 문서에서:

창 요소에 바인딩되면 사용자 에이전트가 창, 프레임, 개체 및 이미지를 포함하여 문서 내의 모든 컨텐츠로드를 완료하면 이벤트가 발생합니다.

다른 팁

스크립트가 구문 분석하자마자 실행되기 때문에 헤더 바로 안에 스크립트 태그 하나를 넣은 다음 jQuery를로드 한 후 스크립트를 사용하여 페이지로드 이벤트를 연결하는 것이 좋습니다.

<html>
<head>
   <script>
      // Capture start time
   </script>
   ...
   <script src="jquery.js" />
   <script>
      $(window).load(function() {
         // Capture end time
      });
   </script>
...

그렇게하면 가능한 한 많은 페이지로드 시간을 잡을 수 있어야합니다.

브라우저 플러그인을 사용하는 것이 더 나을 수 있습니까? JavaScript를 계산하려면 jQuery 스 니펫을로드 할 시간이 포함되지 않으며 요청을 보내는 브라우저 사이에 시간이 포함되지 않으므로 페이지로드 시간을 과소 평가해야합니다.

거기에 로드 시간 분석기 Firefox 용 플러그인.

최적화를 위해이 작업을 수행하는 경우 사용하는 것이 좋습니다. yslow. Firebug-Firefox 확장입니다. 페이지로드 시간과 다른 많은 유용한 정보를 보여줄 수 있습니다.

읽기 내비게이션 타이밍에 대한 W3C 권장 사항

주목할 만한:

예를 들어, 다음 스크립트는 페이지를 완전히로드하는 데 걸리는 시간을 측정하려는 순진한 시도를 보여줍니다.

<html>
<head>
<script type="text/javascript">

var start = new Date().getTime();
function onLoad() {
  var now = new Date().getTime();
  var latency = now - start;
  alert("page loading time: " + latency);
}

</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>

스크립트는 헤드의 첫 번째 JavaScript가 실행 된 후 페이지를로드하는 데 걸리는 시간을 계산하지만 서버에서 페이지를 가져 오는 데 걸리는 시간에 대한 정보는 제공하지 않습니다.

사용자 경험에 대한 완전한 정보의 필요성을 해결하기 위해이 문서는 성능 인터페이스를 소개합니다. 이 인터페이스를 통해 JavaScript 메커니즘은 응용 프로그램 내에서 완전한 클라이언트 측 대기 시간 측정을 제공 할 수 있습니다. 제안 된 인터페이스를 사용하면 이전 예제를 수정하여 사용자의 인식 된 페이지로드 시간을 측정 할 수 있습니다.

다음 스크립트는 가장 최근의 탐색 이후 페이지를로드 할 시간을 계산합니다.

<html>
<head>
<script type="text/javascript">
function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  alert("User-perceived page loading time: " + page_load_time);
}

</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>

그 이후로 jQuery로 이것을 할 수는 없습니다 $(document).ready(); 페이지가로드되었을 때 발생합니다.

당신은 이것을 할 수 있습니다 yslow 개똥 벌레 Firfox 용 플러그인. 모든 브라우저 에서이 작업을 수행하려면 첫 번째 요소가 하단 요소에 기록 될 때 얼마나 오래 걸렸는지 표시하기 위해 서버 사이드 코드를 추가해야합니다.

그것이 당신이 원하는 것이 아니라면 당신은 다음과 같은 도구를 사용할 수 있습니다. 셀렌 시간을 캡처하기위한 테스트를 작성하십시오 open 끝까지 waitForPageToLoad. 셀레늄은 모든 브라우저에서 작동합니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top