2009-07-27 27 views
6

Tôi đã thực hiện một số tìm kiếm về điều này nhưng không thể tìm thấy bất kỳ loại thực hành hay đề xuất nào tốt nhất - và có lẽ đó là vì không có bất kỳ. Tôi đang sử dụng tất cả các loại plugin jQuery trên trang web của mình, ngoài TinyMCE và một số plugin khác cũng như tệp JS cụ thể của trang web của tôi. Trên hết, tôi có ba bản định kiểu ..... và có nhiều thứ khác khi trang web phát triển!Số lượng quá nhiều bao gồm trong <HEAD>?

Có bất kỳ loại 'giới hạn' hoặc bất kỳ điều gì bạn nên theo dõi để bao gồm cả tập lệnh trong thẻ không? Tôi biết rằng mỗi người là một yêu cầu HTTP khác cần được hoàn thành, nhưng nếu tất cả chúng đều được rút gọn và nhỏ đến mức có thể, sẽ có vấn đề gì không?

<link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/redmond.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/style.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/jqueryFileTree.css" /> 

    <!--[if gte IE 7]> 
     <link rel="stylesheet" type="text/css" href="http://mysite.com/scripts/style.ie.css" /> 
    <![endif]--> 

    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery-ui.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqueryFileTree.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqminmax.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.corner.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.jeditable.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.qtip.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/plugins/tinymce/tiny_mce.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/js/latitude.js"></script> 
+0

Không phải là thời gian tải xuống tất cả giới hạn quan trọng phải không? Bạn hỏi gì? Tốc độ tải xuống quá chậm? –

+0

Có, thời gian tải xuống là tất cả những vấn đề quan trọng. Nhưng tôi không biết cách nào để kết hợp các tệp JS một cách dễ dàng và tự hỏi suy nghĩ của người khác về số lượng "quá nhiều". –

+2

Tiện ích 'mèo' của UNIX là một cách hay để kết hợp các tệp JS. – Quentin

Trả lời

8

Không tốt!

Tôi sẽ khuyên bạn nên kết hợp các tệp này vào một js và một css bằng cách sử dụng tập lệnh trước khi triển khai để phát hành. Có nhiều lý do tại sao điều này là không tốt, xem liên kết dưới đây để biết thêm:

http://developer.yahoo.com/performance/rules.html

Edit: Để trả lời thêm Không, không có giới hạn về số lượng file, nhưng hầu hết các trình duyệt có thể chỉ có 2 kết nối (cho một trang web) đến một máy chủ web tại một thời điểm và do đó sẽ tải các tệp js của bạn 2 tại một thời điểm. YSlow plugin cho firefox sẽ hiển thị cho bạn biểu đồ về cách các tệp của bạn đang được tải xuống.

Nếu bạn đang sử dụng ASP.NET, bài viết codeproject này có thể trợ giúp, nếu bạn đang sử dụng Linux thì this có thể hữu ích.

Edit: Một tập tin batch đơn giản trên cửa sổ (để cắm vào xây dựng các công cụ của bạn) sẽ là

@echo off 
copy file1.js + file2.js + file3.js merged.js /b 
+1

Làm cách nào để kết hợp các tệp JS? Chỉ cần sao chép dán tất cả các mã vào một điều khổng lồ sau đó giảm thiểu nó? –

+0

C/P sau khi minification cũng hoạt động. – millimoose

+0

Giữa thư viện này và thư viện YUICompress, tôi nghĩ tôi nên ổn. Cám ơn vì tất cả đóng góp! –

1

Càng nhiều tệp CSS và JS bạn tham chiếu trên trang tải dài hơn để tải. Tốt hơn hết là kết hợp chúng thành ít tệp nhất có thể.

+1

Nhiều trình duyệt sẽ mở 2 kết nối đồng thời tới máy chủ, hiệu quả khi tải xuống, có các thủ thuật bạn có thể thực hiện trong lưu trữ nội dung trên các tên miền/tên miền phụ khác để lừa trình duyệt thiết lập nhiều hơn 2 kết nối đó để tải xuống nội dung. Đó là một sự cân bằng giữa kích thước và nr của các tập tin. – nos

2

Nếu nó giúp bạn cảm thấy tốt hơn nhiều trang web khác được "tải" như vậy và các tệp js được lưu trữ khá nhiều bởi tất cả các trình duyệt hiện đại (và thậm chí là cũ). Một thứ có thể giúp liên kết tệp jquery của bạn với một tệp được lưu trữ trên trang web googleapis, vì có thể có một số trang web khác đang liên kết đến cùng một tệp jquery được lưu trữ ở đó và đã có trong bộ nhớ cache của họ:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Máy chủ web của bạn đã tối ưu hóa tệp bằng cách tự động bật nén gzip, nhưng hãy kiểm tra kỹ để đảm bảo.

+0

Tải xuống "bộ nhớ cache lạnh" rất chậm, ví dụ: lân đâu tơi thăm. Và có dữ liệu từ Yahoo cho biết số lần truy cập trang web lớn nhất là bộ nhớ cache lạnh. – Frozenskys

0

Tôi không biết nếu có tồn tại một câu trả lời tốt cho các loại hình câu hỏi, nhưng nếu bạn quan tâm đến việc tối ưu hóa, có một số lượng được thực hiện bởi Yahoo !: http://developer.yahoo.com/performance/rules.html.

Cá nhân, tôi có xu hướng bỏ qua hầu hết các quy tắc đó, đơn giản là vì những thứ tôi đang xây dựng không phải là tất cả những gì lớn.

4

Trình duyệt có giới hạn về số lượng yêu cầu đồng thời cho một miền, do đó, chúng có thể làm chậm việc tải các mục khác trong trang của bạn. Ví dụ: IE8 has a limit of 6 concurrent connections, and IE7 has a limit of 2.

Tôi khuyên bạn nên kết hợp các tệp mà bạn lưu trữ cục bộ, tham khảo các tệp khác bên ngoài (ví dụ: trên Google) và có khả năng di chuyển người khác đến cuối trang để chúng không làm chậm tải.

Bạn có thể kết hợp tập lệnh với nhiều công cụ trực tuyến, như jsCompress. Nó có một "Upload Files" tab, vì vậy bạn chỉ có thể tải lên tất cả các file js của bạn và nó sẽ nén và rút gọn.

Ngoài ra còn có các tiện ích phía máy chủ sẽ làm điều đó cho bạn. Bạn không nói những gì công nghệ phía máy chủ bạn đang sử dụng, nhưng ví dụ trong thế giới PHP, bạn có thể sử dụng Minify.

Các vấn đề liên quan