2010-07-20 3 views
3

Javascript 코드는 HTML 파일의 끝에 모두 놓여 있어야하므로 사용자가 뭔가를 볼 수 있도록 페이지 내용이 먼저 표시되므로 (사용자가 다른 12 초를 기다리는 대신 뭔가를 볼 수 있도록 만족 됨) 예를 들어,).

"이미지 회전식 메뉴"와 같이 HTML을 캡슐화하고 Javascript 코드를 일치 시키려면 대개 HTML과 자바 스크립트가 하나의 파일에 배치되므로 HTML 코드와 HTML 코드가 모두 섞인 자바 스크립트 코드 블록이 있습니다. 최종 HTML 파일.

하지만 이러한 모든 자바 스크립트 코드 블록이 jQuery의 $(document).ready(function() { ... })을 사용하여 작업을 수행하면 페이지 표시가 매우 빠를까요? Javascript가 실제로 HTML 파일의 끝 부분에 배치되었을 때보 다 빠르지는 않지만 충분히 준비된 이벤트 대기열에 함수를 추가하기 때문에 충분하다고 생각합니다.

답변

2

은 내가 JS가을 다운로드 동안 페이지의 콘텐츠가 표시되도록 (대개 닫는 </body> 태그 안에) 지점이 페이지 하단의 JS를 배치하는 것입니다 생각합니다.

.ready()의 HTML 코드에서 jQuery 코드를 호출하면 <body>이 완전히로드 될 때까지 실행되지 않습니다. 그래서 질문은 HTML에서 자바 스크립트가 얼마나 많은가?

상당히 많으면 각 스크립트 이후에 오는 모든 콘텐츠의 표시 속도가 느려집니다. 상대적으로 적은 양의 코드라면별로 눈에 띄지 않는 차이는 없을 것입니다.

가능한 한 빨리 페이지의 콘텐츠를 표시하는 것이 중요하다면 의 모든 스크립트를 콘텐츠 뒤에 뒤에 넣으십시오.

저는 개인적으로 연관성을 위해 자바 스크립트를 HTML과 혼합하지 않았습니다. 스크립트를 포함하는 콘텐츠를 제거/추가하기 시작하면 예기치 않은 결과가 발생할 수 있습니다. 차라리 적절하게 명명 된 클래스와 ID는 물론 많은 코드 주석을 사용하고 싶습니다.

jQuery이로드 될 때까지 해당 .ready() 통화가 작동하지 않는다는 것을 명심하십시오. 이는 페이지 상단이나 적어도 처음 전화가 걸릴 필요가 있음을 의미합니다.

그래서 다시 당신에게 중요한 질문으로 돌아갑니다. 콘텐츠를 가능한 빨리 볼 수있게하려면 모든 js를 맨 아래에 놓습니다. js와 HTML을 혼합하는 방법을 원한다면 페이지 표시에 약간의 지연이있을 것입니다.