Nhiều tệp javascript/css: thực tiễn tốt nhất?

Question

Hiện tại tôi có khoảng 7 tệp Javascript (nhờ có nhiều plugin jQuery) và các tệp CSS 4-5. Tôi tò mò về cách thực hành tốt nhất để giải quyết những vấn đề này bao gồm cả vị trí trong tài liệu mà họ nên tải? YSlow nói với tôi rằng các tệp Javascript nên - nếu có thể - bao gồm ở cuối. Sự kết thúc của cơ thể? Nó đề cập rằng sự phân cách dường như là liệu họ có viết nội dung hay không. Tất cả các tệp Javascript của tôi là các hàm và mã jQuery (tất cả được thực hiện khi đã sẵn sàng()) để có thể OK.

Vì vậy, tôi nên bao gồm một CSS và một tệp Javascript và có bao gồm phần còn lại không? Tôi có nên nối tất cả các tệp của mình thành một không? Tôi có nên đặt thẻ của tôi ở cuối tài liệu của mình không?

Chỉnh sửa: FWIW có đây là PHP.

Answer 1

Tôi khuyên bạn nên sử dụng PHP Minify, cho phép bạn tạo một yêu cầu HTTP cho một nhóm tệp JS hoặc CSS. Minify cũng xử lý GZipping, Compression, và HTTP Headers cho bộ nhớ đệm phía máy khách.

Chỉnh sửa: Giảm bớt cũng sẽ cho phép bạn thiết lập yêu cầu để cho các trang khác nhau bạn có thể bao gồm các tệp khác nhau. Ví dụ: một tập hợp các tệp JS lõi cùng với mã JS tùy chỉnh trên các trang nhất định hoặc chỉ các tệp JS cốt lõi trên các trang khác.

Trong khi phát triển bao gồm tất cả các tệp như bình thường và sau đó khi bạn tiến gần đến việc chuyển sang sản xuất, hãy rút gọn và nối tất cả các tệp CSS và JS vào một yêu cầu HTTP. Nó thực sự dễ dàng để thiết lập và làm việc với.

Đồng thời, các tệp CSS phải được đặt trong phần đầu và tệp JS được phân phát ở phía dưới, vì các tệp JS có thể ghi vào trang của bạn và có thể gây ra các vấn đề hết thời gian chờ.

Đây là cách bạn nên bao gồm các file JS của bạn:

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

Chỉnh sửa: Bạn cũng có thể sử dụng Cuzillion để xem cách trang của bạn nên được thiết lập.

Answer 2

Bạn chưa dứt khoát nói rằng bạn đã có quyền truy cập vào một giải pháp server-side, nhưng giả sử bạn làm, tôi đã luôn luôn đi với một phương pháp liên quan đến sử dụng PHP để làm như sau:

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'); 
} 
?> 

với đoạn mã trên tại chỗ, tôi sau đó gọi các tập tin giống như tôi bình thường:

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

và sau đó nếu tôi bao giờ nhận thức được chức năng chính xác tôi đi thôi cần, tôi chỉ chuyển yêu cầu của tôi dưới dạng chuỗi truy vấn (jquery.js.php? r = core, hiệu ứng). Tôi thực hiện chính xác các yêu cầu CSS của mình nếu chúng được phân nhánh.

Answer 3

Đây là những gì tôi làm: Tôi sử dụng tối đa hai tệp JavaScript và thường là một tệp CSS cho mỗi trang. Tôi tìm ra các tệp JS nào sẽ phổ biến trên tất cả các trang của tôi (hoặc đủ của chúng để nó gần - tệp chứa jQuery sẽ là một ứng cử viên tốt) và sau đó tôi nối chúng và rút gọn chúng bằng cách sử dụng jsmin-php và sau đó tôi lưu trữ tệp kết hợp . Nếu có bất kỳ tệp JS nào còn sót lại chỉ dành riêng cho một trang đó, tôi nối, thu nhỏ và lưu chúng vào một tệp duy nhất. Tệp JS đầu tiên sẽ được gọi qua một số trang, tệp thứ hai chỉ trên một trang hoặc có thể là một vài trang.

Bạn có thể sử dụng cùng một khái niệm với CSS nếu bạn thích với css-min, mặc dù tôi thấy tôi thường chỉ sử dụng một tệp cho CSS. Một điều nữa, khi tôi tạo tệp bộ nhớ cache, tôi đặt một mã PHP nhỏ vào đầu tệp để phân phát dưới dạng tệp GZipped, đây thực sự là nơi bạn sẽ nhận được hầu hết các khoản tiết kiệm của mình. Bạn cũng sẽ muốn đặt tiêu đề hết hạn của mình để trình duyệt của người dùng cũng sẽ có cơ hội lưu bộ nhớ cache tốt hơn. Tôi tin rằng bạn cũng có thể kích hoạt GZipping thông qua Apache.

Để lưu vào bộ nhớ đệm, tôi kiểm tra xem thời gian tạo tệp có lớn hơn khoảng thời gian tôi đã đặt hay không. Nếu có, tôi tạo lại tập tin bộ nhớ đệm và phục vụ nó, nếu không tôi chỉ nhận được tập tin lưu trữ hiện có.

Answer 4

Ý tưởng về việc thu nhỏ và kết hợp các tệp là rất tốt.

tôi làm điều gì đó tương tự như trên các trang web của tôi, nhưng để giảm bớt sự phát triển Tôi đề nghị một số mã mà trông như thế này:

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>" 
} 

này sẽ cho phép bạn giữ các tập tin của bạn rời ra được khi dev cho việc quản lý dễ dàng và sử dụng các tập tin kết hợp trong triển khai để tải trang nhanh hơn. Điều này giả định bạn có khả năng kết hợp các tệp và thay đổi các biến như là một phần của quá trình triển khai của bạn.

Chắc chắn xem xét bao gồm các js của bạn ở phía dưới và css ở trên cùng theo đề xuất của YUI vì việc giữ mức JS thấp có ảnh hưởng hữu hình đến sự xuất hiện của phần còn lại của trang và cảm thấy nhanh hơn nhiều.

Answer 5

Tôi sẽ không khuyên bạn sử dụng giải pháp dựa trên javascript (như PHP Minify) để bao gồm css của bạn vì trang của bạn sẽ trở nên không sử dụng được nếu khách truy cập đã tắt javascript.

Answer 6

Tôi cũng có xu hướng để sao chép + dán tất cả các plugin jquery của tôi vào một tập tin duy nhất: jquery.plugins.js sau đó liên kết đến

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

cho thư viện jquery thực tế.