jQuery의 읽기와 JavaScript_jquery의 onload 함수의 차이점

JavaScript에서는 onload 함수가 가장 많이 사용되며 JavaScript에 관련된 거의 모든 사람이 이 기능을 접하게 됩니다. 이 함수의 기능은 문서 흐름의 실행 순서에 따라 헤더에 자바스크립트를 로딩할 때 주로 사용하기 때문에 코드 블록에 있는 명령문을 실행하기 전에 웹 페이지가 완전히 로딩될 때까지 기다리는 것입니다.

코드 복사 코드는 다음과 같습니다.

window.onload = 함수(){
// 웹페이지가 로드된 후 여기에서 코드 블록을 실행합니다.
};

jQuery에는 코드 블록을 실행하기 전에 웹 페이지가 로드될 때까지 기다리는 해당 함수도 있습니다

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
// 웹페이지가 로드되면 여기에서 코드 블록을 실행합니다.
});

위의 두 기능은 동일한 것처럼 보이지만 실제로는 매우 다릅니다.

onload는 DOM 트리가 생성된 후뿐만 아니라 모든 외부 리소스가 로드되고 전체 페이지가 브라우저 창에 표시된 후에도 실행됩니다. 이러한 리소스에는 이미지 리소스뿐만 아니라 페이지에 포함된 플래시 비디오도 포함됩니다. 이미지나 플래시가 너무 많으면 로드하는 데 시간이 오래 걸리므로 코드 블록 실행을 지연시키는 데 더 많은 시간이 소요됩니다.

jQuery의 Ready() 메서드는 문서 구조가 완전히 구문 분석되고 브라우저가 코드 블록을 실행하기 전에 HTML을 DOM 트리로 변환할 때까지 기다리기만 하면 됩니다. 웹 페이지, 플래시 등 외부 소스는 관련이 없습니다.

jQuery의 Ready() 메소드를 사용하면 대기 시간이 단축되는 것을 볼 수 있습니다.

물론 태그 뒤에 모든 스크립트를 넣는 방법도 있습니다. 이 경우 웹페이지는 문서 흐름 순서대로 실행되며 JavaScript에서의 onload 효과는 다음과 같습니다. 또는 jQuery의 Ready()도 달성되며 이 방법을 사용하면 웹 콘텐츠가 더 빠르게 표시됩니다.