it-swarm-vi.com

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

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?

23
Macha

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

  1. 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ó.
  2. Kết hợp các tệp JS của bạn trên mỗi trang để chỉ có 1 tệp.
  3. 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
  4. Đặ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 /
25
Ben Hoffman

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à tạo 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 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ờ.

21
Cebjyre

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.

6
txwikinger

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.)

4
theycallmemorty

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 ghi chú trong blog Trang web hiệu suất cao của mình -

... trong một số trường hợp, nó đá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 tên 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

0
mvark