>웹 프론트엔드 >JS 튜토리얼 >페이지 로딩 js 및 성능 분석 방법에 대한 간략한 토론_javascript 기술

페이지 로딩 js 및 성능 분석 방법에 대한 간략한 토론_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:28:071432검색

1. 로딩 중

먼저 정적 페이지의 참조 js 파일을 로드한 다음 참조 파일에 onload 함수가 포함되어 있는지 확인합니다. 예를 들어 main.js에 다른 js 파일에 대한 참조가 있는지 확인합니다. . 먼저 참조 js를 로드합니다. 참조 파일의 로드 순서는 main.js의 순서와 일치합니다.
로딩이 완료되면 onload 함수가 실행되기 시작합니다. js 실행 순서는 순차적이므로 페이지 응답 속도를 향상시키기 위해 일반적인 접근 방식은 onload에서만 페이지를 그리는 것이며 일부 이벤트 바인딩 기능, ajax 메서드 등은 나중에 작성할 수 있습니다.

2. 응답속도 분석

1. 분석 도구를 사용하세요

주요 브라우저(Firefox가 제가 가장 좋아하는 브라우저)의 개발자 도구를 사용하면 js 파일, html 파일, css 파일, 이미지 각각의 로딩 및 실행 시간을 쉽게 확인할 수 있습니다.

2. 하드코딩 분석

첫 번째 단계에서는 기본적으로 병목 현상이 발생한 js 파일을 찾을 수 있습니다. 병목 현상이 발생한 js에서는 console.time('test') 및 console.Endtime('test') 문을 사용하여 js 함수와 코드 블록을 집어낼 수 있습니다. .실행 시간을 가져옵니다. 그러나 콘솔 문은 IE가 아닌 브라우저에서 실행될 때만 유효하며 IE에서는 오류가 보고됩니다. IE를 사용하려면 타임스탬프를 사용하세요. 핀치할 때 더 편리한 방법은 전체 js 파일을 직접 핀치한 다음 F12를 눌러 콘솔에서 대상 js의 모든 기능과 코드 블록의 시간 소비를 확인하고 병목 코드를 찾을 수 있습니다. . 에.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.