스크립트 실행 및 * 구문 분석 * 시간을 측정하는 방법은 무엇입니까?

Question

내가 아는 한 스크립트는 자바 스크립트에서 동시에 다운로드 및 실행됩니다. 우리는 다음과 같은 코드를 작성 따라서 경우 :

<script type='text/javascript'>console.time('core')</script> 
<script type='text/javascript' src="guicore.js"></script> 
<script type='text/javascript'>console.timeEnd('core')</script> 

우리가, 다운로드 콘솔 전체 시간에서 볼 구문 분석 JS를 실행하는 것입니다. 구문 분석 시간을 어떻게 제외 할 수 있습니까? 유사한 파일을 추가하기 만하면 모든 코드가 주석 처리됩니다. 다소간이 기법이 효과적입니다.

문제는 내가 90ms의에서이 25ms에 실행 시간을 줄일 수 있지만, 크롬에 대해 같은 ~ 100 ± 10ms의 시간을보고 파이어 폭스 ~ 160 ± 15ms의, 그 코드를 최적화

) =이 그냥 작동하지 않는 것입니다 .

그래, 내가 프로파일 러를 사용할 수 있지만, 질문은 : "js 구문 분석 시간을 정확하게 측정하는 방법"과 내가 btw를 측정 한 것입니다. Research.reverse-engineering은 매우 재미 있지만 어쩌면 그 분야를 잘 아는 사람이있을 것입니다.

Answer 1

Chrome을 열고 개발자 도구를 열면 '타임 라인'탭으로 이동하십시오. 레코드 버튼 (왼쪽 하단에 원으로 표시)을 누른 다음 페이지를 새로 고침하면 매우 상세한 타임 라인을 제공하고 특정 유형의 활동 (Send Request, Parse, Evaluate)을 마이크로 초로 제한합니다.

Answer 2

나는 이것이 일종의 오래된 질문이라는 것을 알고있다. 그러나 나는 이것에 대한 해결책을 찾고있는 동안 그것을 발견했다. 원하는 브라우저에서 dev 도구를 사용하여이 코드를 볼 수 있지만 코드에서 코드를 사용하려면이 코드를 사용하는 방법을 사용하십시오.

아래의 기능은 .js 파일로 URL을 가져와 <script> 요소에 넣고로드/구문 분석 기간을 콘솔에 기록합니다.

현재 DOM 컨텍스트 내에서 프로파일 링중인 <script>이 실행됩니다. 따라서 아래 예제에서 : jQuery은 스크립트가 제거 되더라도 전역 범위에서 계속 액세스 할 수 있습니다. 이 스크립트를 확장하여 에서이 모든 작업을 수행 할 수 있습니다.

function scriptLoadParseDuration(url) { 
 
    var start; 
 
    var script = document.createElement('script'); 
 
    
 
    // <script> must be attached to the document to actually load the file 
 
    document.querySelector('html').appendChild(script); 
 
    
 
    // Calculate load/parse duration once script has loaded 
 
    script.addEventListener('load', function scriptLoad() { 
 
    // Calculate load/parse duration 
 
    console.log('Duration: ' + (Date.now() - start) + 'ms'); 
 
    
 
    // Remove <script> from document 
 
    script.parentElement.removeChild(script); 
 
    }, false); 
 
    
 
    // Get current time in milliseconds 
 
    start = Date.now(); 
 
    
 
    // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request 
 
    script.src = url + '?' + Math.floor(Math.random() * 9e9); 
 
} 
 

 
var url = 'https://code.jquery.com/jquery-3.0.0.min.js'; 
 

 
scriptLoadParseDuration(url);

여기 jQuery는 <script> 제거한 후 전역 여전히 보여주는 예이다.

function scriptLoadParseDuration(url) { 
 
    var start; 
 
    var script = document.createElement('script'); 
 
    
 
    console.log('`jQuery` before attaching: ' + typeof jQuery); 
 
    
 
    // <script> must be attached to the document to actually load the file 
 
    document.querySelector('html').appendChild(script); 
 
    
 
    // Calculate load/parse duration once script has loaded 
 
    script.addEventListener('load', function scriptLoad() { 
 
    // Calculate load/parse duration 
 
    console.log('Duration: ' + (Date.now() - start) + 'ms'); 
 

 
    console.log('`jQuery` once attached: ' + typeof jQuery); 
 
    // Remove <script> from document 
 
    script.parentElement.removeChild(script); 
 
    console.log('`jQuery` after detach: ' + typeof jQuery); 
 
    }, false); 
 
    
 
    // Get current time in milliseconds 
 
    start = Date.now(); 
 
    
 
    // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request 
 
    script.src = url + '?' + Math.floor(Math.random() * 9e9); 
 
} 
 

 
var url = 'https://code.jquery.com/jquery-3.0.0.min.js'; 
 

 
scriptLoadParseDuration(url);

비교적 새로운 대답에

Answer 3

아주 오래된 질문.

Date.now()은 밀리 초의 정확도를 갖는 타임 스탬프를 반환합니다. 응용 프로그램을 60FPS에서 실행하려면 16ms마다 프레임을 업데이트해야합니다. 우리의 밀리 초 미터는 정확하지 않을 수 있습니다.

최신 JS 브라우저에서 Performace API을 도입함으로써 부동 소수점 시간 소인을 마이크로 초 단위로 정확하게 지정할 수 있습니다.

Date.now() 대신에 window.performance.now()을 사용하십시오. Performance API on HTML5Rocks을 사용하는 것이 좋습니다.