페이지 로딩 js 및 성능 분석 방법 소개_javascript 기술

1.

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

2. 응답 속도 분석

1. 도구를 활용한 분석
주요 브라우저(저는 Firefox를 가장 좋아합니다)의 개발자 도구를 사용하면 각 js 파일과 html을 쉽게 볼 수 있습니다. file , CSS 파일 및 이미지의 로딩 및 실행 시간.

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