여러 javascript / css 파일 : 모범 사례?

여러 javascript / css 파일 : 모범 사례?

---

현재 약 7 개의 Javascript 파일 (다양한 jQuery 플러그인 덕분에)과 4-5 개의 CSS 파일이 있습니다. 문서에서로드해야하는 위치를 포함하여 이러한 문제를 처리하는 가장 좋은 방법이 무엇인지 궁금합니다. YSlow는 Javascript 파일이 가능한 경우 끝에 포함되어야한다고 말합니다. 시체 끝? 구분자는 콘텐츠를 작성하는지 여부 인 것처럼 보입니다. 내 모든 Javascript 파일은 함수와 jQuery 코드 (모두 ready () 때 완료 됨)이므로 괜찮습니다.

그렇다면 하나의 CSS와 하나의 Javascript 파일을 포함하고 나머지는 포함해야합니까? 모든 파일을 하나로 연결해야합니까? 내 문서의 맨 끝에 Javascript 내 태그를 넣어야합니까?

편집 : FWIW 예 이것은 PHP입니다.

---

JS 또는 CSS 파일 그룹에 대한 단일 HTTP 요청을 생성 할 수있는 PHP Minify를 사용하는 것이 좋습니다 . Minify는 클라이언트 측 캐싱을위한 GZipping, 압축 및 HTTP 헤더도 처리합니다.

편집 : Minify를 사용하면 다른 페이지에 대해 다른 파일을 포함 할 수 있도록 요청을 설정할 수도 있습니다. 예를 들어 특정 페이지의 사용자 정의 JS 코드 또는 다른 페이지의 핵심 JS 파일과 함께 JS 파일의 핵심 세트.

개발 중에는 평소와 같이 모든 파일을 포함하고 프로덕션으로 전환하는 데 가까워지면 모든 CSS 및 JS 파일을 단일 HTTP 요청으로 축소하고 결합합니다. 설정하고 작업하는 것은 정말 쉽습니다.

또한 예, CSS 파일은 헤드에 설정하고 JS 파일은 하단에 제공해야합니다. JS 파일은 페이지에 쓸 수 있고 막대한 시간 초과 문제를 일으킬 수 있기 때문입니다.

JS 파일을 포함하는 방법은 다음과 같습니다.

</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>

편집 : Cuzillion 을 사용 하여 페이지 설정 방법을 확인할 수도 있습니다 .

---

내가하는 일은 다음과 같습니다. 최대 2 개의 JavaScript 파일과 일반적으로 각 페이지에 대해 하나의 CSS 파일을 사용합니다. 나는 내 모든 페이지에서 어떤 JS 파일이 공통적 일지 (또는 그 중 충분히 가깝기 때문에 jQuery가 포함 된 파일이 좋은 후보가 될 것임) 알아 낸 다음 jsmin-php를 사용하여 파일을 연결하고 축소 한 다음 캐시합니다. 결합 된 파일. 한 페이지에만 해당하는 JS 파일이 남아 있으면 단일 파일로 연결, 축소 및 캐시합니다. 첫 번째 JS 파일은 여러 페이지에 걸쳐 호출되며 두 번째는 해당 페이지 또는 몇 페이지에서만 호출됩니다.

css-min 에서 원하는 경우 CSS와 동일한 개념을 사용할 수 있지만 일반적으로 CSS에는 하나의 파일 만 사용합니다. 한 가지 추가로, 캐시 파일을 만들 때 파일 시작 부분에 작은 PHP 코드를 넣어 GZipped 파일로 제공합니다. 실제로는 대부분의 비용을 절약 할 수 있습니다. 또한 만료 헤더를 설정하여 사용자의 브라우저가 파일을 더 잘 캐싱 할 수 있도록합니다. Apache를 통해 GZipping을 활성화 할 수도 있습니다.

캐싱을 위해 파일 생성 시간이 내가 설정 한 시간보다 오래되었는지 확인합니다. 그렇다면 캐시 파일을 다시 만들어 제공하고, 그렇지 않으면 기존 캐시 파일을 가져옵니다.

---

서버 측 솔루션에 대한 액세스 권한이 있다고 명시 적으로 말하지는 않았지만, 그렇게한다고 가정하면 항상 PHP를 사용하여 다음을 수행하는 방법을 사용했습니다.

jquery.js.php :

<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
 {
echo file_get_contents('jquery.' . $file . '.js');
 }
?>

위의 스 니펫을 제자리에두고 평소처럼 파일을 호출합니다.

<script type="text/javascript" src="jquery.js.php"></script>

그런 다음 필요한 정확한 기능을 알고있는 경우 요구 사항을 쿼리 문자열 ( jquery.js.php? r = core, effects )로 전달합니다. CSS 요구 사항이 분기 된 경우에도 똑같이합니다.

---

방문자가 자바 스크립트를 비활성화하면 페이지를 사용할 수 없게되므로 CSS를 포함하기 위해 자바 스크립트 기반 솔루션 (예 : PHP Minify)을 사용하지 않는 것이 좋습니다.

---

파일을 축소하고 결합하는 아이디어는 훌륭합니다.

내 사이트에서 비슷한 작업을 수행하지만 개발을 쉽게하기 위해 다음과 같은 코드를 제안합니다.

if (evironment == production) {
  echo "<style>@import(/Styles/Combined.css);</style>"
} else {
  echo "<style>@import(/Styles/File1.css);</style>"
  echo "<style>@import(/Styles/File2.css);</style>"
}

이렇게하면 쉽게 관리 할 수 ​​있도록 개발 중에 파일을 별도로 보관하고 배포 중에 결합 된 파일을 사용하여 더 빠른 페이지로드를 수행 할 수 있습니다. 이는 배포 프로세스의 일부로 파일을 결합하고 변수를 변경할 수있는 능력이 있다고 가정합니다.

YUI 권장 사항에 따라 하단에 js를 포함하고 상단에 CSS를 포함하는 것을 확실히 살펴보십시오. JS를 낮게 유지하면 나머지 페이지의 모양에 실질적인 영향을 미치고 훨씬 더 빠르게 느껴집니다.

---

또한 모든 jquery 플러그인을 하나의 파일에 복사하여 붙여 넣는 경향이 있습니다. jquery.plugins.js 다음 링크

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

실제 jquery 라이브러리의 경우.

참조 URL : https://stackoverflow.com/questions/490618/multiple-javascript-css-files-best-practices