2012-11-28 3 views
0

내 사이트에서 jquery와 일반 자바 스크립트를 사용하고 있으며 내 페이지의 닫는 본문 태그에서 최소화 된 양식의 모든 자바 스크립트를로드하는 것이 더 낫다고 들었습니다. 헤더에있는 것보다 현재의 것입니다.jquery/javascript loading 혼란

또한 요청 수가 줄어들도록 모든 JS를 하나의 파일로 정리해야한다고 들었지만 포함되지 않을 자바 스크립트도 있다고 들었습니다. 이 메가 파일은 FB (예를 들어)에서 필요하기 때문에

그래서 지금 완전히 혼란 스럽습니다. 시작을 위해 1) 저는 jquery와 jquery.ui를 사용합니다. 이것들은 메가 파일에 집중되어 끝에로드 될 수 있습니까?

2) 스크립트 태그로 둘러싸인 내 페이지 소스에 현재 나타나는 모든 것을이 파일에 붙일 수 있습니까?

3) 무엇을 제외해야합니까?

그것의 모든 조금 오버의 whelming는 학습자에게있을 때 당신은 내가로드 볼 수있는 사이트가 http://www.traditionalirishgifts.com/에 있습니다

:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

뿐만 아니라 다른 자바 스크립트

을의 힙을
+0

실제로는 "최선의"방법이 아닙니다. 상황, 대상, 응용 프로그램 구조, 응용 프로그램 유형, 필요한 스크립트 등에 따라 다릅니다. 시작하려면 간단하게하십시오. 나중에 페이지로드가 너무 오래 걸리는 경우 문제가 발생하면로드중인 코드의 양을 줄이거 나 http 요청 수를 줄이십시오. body 태그를 닫기 전에 머리에 스타일 시트, 스크립트. –

+0

그래,하지만 jquery를 하나의 파일로 모두로드 할 수 있습니까? –

+0

물론 가능합니다 (라이센스를 그대로 유지하십시오). 그러나 사용자가 캐싱 한 경우 CDN에 연결하는 것이 더 빠를 수도 있습니다. –

답변

0

주석에서 지적한 것처럼 응답은 많은 변수에 따라 달라집니다.

서버 측 웹 프레임 워크를 사용하고 있습니까? 가치가있는 웹 프레임 워크는 자바 스크립트 및 CSS 연결 옵션을 제공합니다. 일반적으로 이러한 옵션을 사용하면 연결을 정확히 원하는 방식으로 정의 할 수 있습니다. 특정 js 파일이 자주 변경되지 않습니다 (예 : jquery, jquery ui). 다른 특정 파일은 자주 변경되지만, 응용 프로그램 스크립트를 예로들 수 있습니다. 연결 대상을 결정할 때 이러한 모든 사항을 고려할 수 있습니다.

어떤 서버 측 기술과 어떤 웹 서버를 사용하고 있는지 공유 할 수 있다면 특정 솔루션을 찾도록 도와 줄 수 있습니다.

세 가지 질문과 관련하여은 귀하의 의존 관계 관리에 관한 모든 것입니다. 응용 프로그램 스크립트 또는 "스크립트 태그로 둘러싸인 내 페이지 소스에 현재 나타나는 모든 것"이 jQuery 또는 다른 라이브러리에 의존하면 jquery 또는 해당 라이브러리를 포함해야합니다.

DOM에 종속성이있을 수도 있습니다. 스크립트가 document.write을 사용하여 직접 html로 출력하면 쉽게 이동할 수 없습니다.

나는 연결된 사이트의 홈페이지의 html을 보았습니다. 이 파일의 js 코드는 본문의 끝 부분 바로 이전으로 이동할 수 있지만 동일한 순서로 나타나야합니다. 포함 된 모든 플러그인은 document.ready에 초기화되는 것으로 보입니다.이 플러그인은 모든 html/js/css가 구문 분석 된 후에 만 ​​발생합니다.

이미 CDN에서 jquery/jqueryui를 참조하고 있으므로 연결된 파일에 추가하지 마십시오.

(FB 사용으로 인해) 연결할 수없는 코드를 발견하지 못했습니다. 그것은 당신이 그 이유를 설명해 줄 사람에게 물어볼 수 있다고 말했습니다.

마지막으로, 개인적으로 YSlow (http://developer.yahoo.com/performance/rules.html)Google Page Speed (https://developers.google.com/speed/docs/best-practices/rules_intro)

에 최적화 프런트 엔드로드 시간에 대한 자세한 내용을보실 수 있습니다, 당신이 가서 그냥 몸이 끝나기 전에 모든 것을 이동 건의 할 것입니다. 무언가가 깨진다면, 귀하가받는 오류에 대해 구체적으로 질문하십시오.