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

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의 모든 기능과 코드 블록의 시간 소비를 확인하고 병목 코드를 찾을 수 있습니다. . 에.