Trong môi trường có độ trễ tối thiểu 500ms trên kết nối di động 2G (~ 0.1mbps), cách nhanh nhất và hiệu quả nhất để gửi khoảng 10kb css và js, trong khoảng 5-10 tệp trên máy chủ, cho máy khách ?Inline vs js và css bao gồm?
tôi có thể nghĩ ra ba lựa chọn:
- kết hợp tất cả js vào một tập tin và tất cả css vào một tập tin
- nối tất cả các file css và js từng người một
- inline mọi thứ
Tôi biết google sử dụng nội tuyến, nhưng đó có thể chỉ là để tiết kiệm ổ cắm máy chủ. Họ thậm chí còn tiết kiệm ram bằng cách chạy ở chế độ không trạng thái - họ tin tưởng các khách hàng nhớ các phiên cho họ. Sức mạnh máy chủ không phải là vấn đề gì cả.
Mặt khác, facebook dường như tự động tạo css của họ (tên của họ được mã hóa base64), nhưng vào hơn 10 tệp khác nhau được gửi cho người dùng và thậm chí họ không có khả năng tối ưu hóa nó; chỉ một số loại bỏ khoảng trắng.
Tôi đã chuyển tất cả các tệp qua một hàm nén tất cả mọi thứ, vì vậy, bất kỳ một trong số này đều khả thi. Tôi không muốn chọn giải pháp thay thế đầu tiên bởi vì nó dễ dàng hơn. Hai người đầu tiên tận dụng bộ nhớ đệm (cái thứ hai ít hơn một chút) nhưng thứ hai chỉ yêu cầu ba yêu cầu tới máy chủ, và thứ ba chỉ yêu cầu một yêu cầu từ máy chủ (bỏ qua vài hình ảnh chúng tôi có thể có trên một số trang).
Bộ nhớ cache và bộ nhớ cache Android/iOS có bắt đầu lại trên trình duyệt không? Nếu không, thì nội tuyến sẽ tốt hơn.
Mục tiêu duy nhất là giảm thiểu thời gian tải trung bình của người dùng. Mỗi người dùng sẽ chi tiêu khoảng 100 lần tải trang trên trang web mỗi ngày, nhìn thấy khoảng 40 tệp css và js mỗi ngày. Css và js về cơ bản là nội dung tĩnh. Nó được đặt thành bộ nhớ cache 30 ngày và chúng tôi thay đổi url nếu tệp thay đổi bằng cách sử dụng /path/to/file.ext?md5-hash-of-file. Ngoài ra, tất cả mọi thứ được gzipped bất cứ nơi nào có thể.
CHỈNH SỬA:
Tôi nghĩ tôi nên làm rõ hai tùy chọn tôi tìm thấy cho số hai. Có nên sử dụng một tệp duy nhất cho css và js trên toàn bộ trang web không? Nó sẽ chỉ sử dụng hai yêu cầu và loại bỏ bất kỳ bộ nhớ đệm đôi (hoặc septuple) nào vì một hàm duy nhất nằm trong hai hoặc nhiều tệp kết hợp js khác nhau, nhưng tải xuống tối đa 1MB không có vẻ tốt.
Hôm nay về cơ bản nó là một kết hợp css cho mỗi lượt xem, vì vậy mỗi khi bạn xem lại cùng một trang, nội dung được lưu vào bộ nhớ cache. Tuy nhiên, một số js và css được sử dụng trên nhiều trang.
1 có nghĩa là ít yêu cầu hơn được gửi, nhưng khi bạn đặt tiêu đề bộ nhớ cache, nó không quan trọng lắm. Đối với 3, trang của bạn có được tạo động không? Nếu vậy nó sẽ không được lưu trữ và nội tuyến CSS/JS sẽ là một ý tưởng khủng khiếp. Đối với các tệp bộ nhớ đệm Android/iOS hoặc không, điều đó sẽ phụ thuộc vào kích thước của các tệp đó. –
nếu bạn sử dụng điều hướng ajax, nội tuyến dễ dàng hơn và không phải lúc nào cũng yêu cầu lãng phí băng thông: ví dụ; trao đổi ra khỏi cơ thể, để lại nội tuyến js/css trong đầu. nếu bạn làm mới trang thường xuyên, một vài url bên ngoài được lưu trong bộ nhớ cache thường hoạt động tốt nhất. hãy nhớ rằng hai tệp 50kb trên 2g thường sẽ truyền nhanh hơn 1 tệp 100kb do đường ống lót. Tuy nhiên, nếu bạn có quá nhiều thời gian trễ, có thể tìm kiếm/xfer một url nhanh hơn hai lần. – dandavis
tất cả các trang được tạo động, php, do đó, bộ nhớ đệm sẽ không hoạt động chút nào. Bạn có bất kỳ ý tưởng về kích thước tập tin được lưu trữ không? –