Làm cách nào tôi có thể giảm chi phí tải các thư viện JS lớn?

23

Nếu tôi đang sử dụng một thư viện Javascript lớn cho trang của mình, làm thế nào tôi có thể chắc chắn rằng điều này không làm giảm việc sử dụng trang web của người dùng?

javascript performance

— Máy móc
nguồn

25

Có 4 điều bạn có thể làm.

Giảm thiểu tệp JS của bạn. Điều này loại bỏ tất cả các bình luận và khoảng trắng để giảm kích thước của nó.
Kết hợp các tệp JS của bạn trên mỗi trang để chỉ có 1 tệp.
Sử dụng một gói để gzip các tập tin của bạn khi bạn gửi chúng. Điều này sẽ làm cho chúng thậm chí nhỏ hơn
Đặt Javascript không cần thiết ngay lập tức ở cuối trang để nó tải ở cuối. Điều này sẽ cho phép người dùng xem và sử dụng trang ngay cả trước khi JS được tải hoàn toàn.

Và một số người khác đã đề xuất:

Apache sẽ tự động xử lý nén (và lưu trữ nội dung đã nén) giúp đơn giản hóa việc quản lý các tệp
Làm cho JavaScript có khả năng lưu trữ bộ đệm đúng cách sẽ mang lại lợi ích lớn.
Các miền ký tự đại diện (có nhiều URI) sẽ cho phép kết nối đồng thời hơn. Tìm nạp trước không chỉ dành cho hình ảnh /

— Ben Hoffman
nguồn

Có nhiều điều bạn có thể làm, và cách tốt hơn để làm những điều này. Apache sẽ tự động xử lý nén (và lưu trữ nội dung đã nén) để đơn giản hóa việc quản lý filse. Làm cho javascript được lưu trữ đúng cách sẽ mang lại lợi ích lớn. Các miền ký tự đại diện (có nhiều URI) sẽ cho phép kết nối đồng thời hơn. Tìm nạp trước không chỉ dành cho hình ảnh /

— symcbean

21

Nếu bạn đang sử dụng các thư viện phổ biến (như jQuery, Prototype hoặc Dojo), bạn có thể giảm tải tệp cho Google và khiến chúng phục vụ nó , điều này mang lại cho bạn một số lợi thế:

Bạn không phải lo lắng về việc thu nhỏ và nén vv
Đó không phải là băng thông của bạn
Các tệp này đến từ một miền khác nhau, do đó bạn có thể (ít nhất là một phần) giải quyết giới hạn của 2 yêu cầu song song cho mỗi tên máy chủ
Nếu bạn may mắn, người dùng đã truy cập một số trang web khác sử dụng cùng một thư viện từ cùng một nhà cung cấp, vì vậy họ đã có nó trong bộ đệm của trình duyệt.

Lưu ý: Phiên bản bạn yêu cầu có thể có tác động lớn đến các đặc điểm của bộ đệm: yêu cầu jQuery 1.4.2 sẽ cung cấp cho bạn một tệp có thể được lưu trong bộ nhớ cache trong một năm, nhưng 1.4 chỉ có thể được lưu trong bộ nhớ cache trong một giờ.

— Cebjyre
nguồn

1

+ 1 cho CDN và scriptsrc.net để làm cho nó dễ dàng hơn nữa;)

— Agos

1

Bạn có thể mở rộng trên 'ghi chú' của mình không? Tại sao có sự khác biệt trong thời gian lưu trữ?

— theycallmemorty

2

@theycallmemorty: Mặc dù tôi chưa kiểm tra tài liệu, tôi cho rằng đó là vì bằng cách chỉ định 1.4.2 bạn rất cụ thể về phiên bản bạn muốn, trong khi yêu cầu 1.4 về cơ bản bạn sẽ nói "hãy cho tôi nhiều nhất phiên bản gần đây dưới 1,4 ", vì vậy họ không lưu trữ nó quá nhiều.

— Zhaph - Ben Duguid

Cũng đáng chú ý là Microsoft cung cấp một số thư viện JS (jQuery và một số MS cụ thể) có sẵn trên CDN của họ, cũng hỗ trợ https (mà nhiều CDN tập lệnh khác không hỗ trợ) asp.net/ajaxl Library / cdn.ashx

— Bert Lamb

6

Bạn có thể đặt toàn bộ thư viện vào một tệp js và nén tệp. Tuy nhiên, nó thực sự chỉ quan trọng đối với lần tải đầu tiên của trang. Sau đó, tệp js của bạn sẽ được lưu trong bộ nhớ cache trong trình duyệt, đặc biệt nếu bạn đặt hết hạn bộ nhớ cache đủ lâu. Do đó, bất kỳ lần truy cập liên tiếp nào sẽ không tải tệp js của bạn nữa.

— txwikinger
nguồn

+1 cho bạn có thể đặt toàn bộ thư viện trong một tệp và nén nó. Không nghĩ về điều đó.

— Gordon Gustafson

4

Ngoài các câu trả lời ở trên, bạn có thể sử dụng Trình biên dịch đóng cửa của Google để tự động nén và tối ưu hóa JS của bạn trong khi tích hợp với các thư viện bên thứ 3 khác (jQuery, YUI, mootools, v.v.)

— họcallmemorty
nguồn

0

Nếu bạn có một số thành phần trang & quyền truy cập vào tên miền riêng biệt, bạn có thể xem xét việc lưu trữ tất cả các tệp tĩnh bao gồm tệp JS lớn trên tên miền thứ hai.

Như Steve Souder lưu ý trong blog Trang web hiệu suất cao của mình -

... trong một số trường hợp, đáng để lấy một loạt các tài nguyên đang được tải xuống trên một tên miền và phân chia chúng trên nhiều tên miền. Tôi gọi tên miền này là shending. Làm điều này cho phép nhiều tài nguyên được tải xuống song song, giảm thời gian tải trang tổng thể.

nơi khác ông viết ..

Các trình duyệt mở một số lượng kết nối giới hạn cho mỗi tên miền ... Tách hoặc tách các yêu cầu trên hai miền, trái ngược với một tên miền, dẫn đến một trang nhanh hơn, đặc biệt là trong IE 6 & 7

— mvark
nguồn