2009-06-06 38 views
6

Tôi đã tự hỏi liệu có ai có bất kỳ chiến lược nào để tối ưu hóa việc tải trước hình ảnh qua javascript không?Tối ưu hóa javascript tải trước hình ảnh

Tôi đang chuyển ứng dụng Flash sang html/css, cố gắng tạo lại giao diện người dùng càng gần trang web gốc càng tốt. Về cơ bản nó là một ứng dụng trình duyệt ảnh, nơi một hình ảnh có độ phân giải cao được hiển thị khi người dùng di chuột qua một liên kết. Có khoảng 50-80 trong số những hình ảnh này trên mỗi trang.

Tải trước tất cả hình ảnh riêng lẻ sẽ tạo thời gian tải dài hơn đáng kể so với thời gian tải ứng dụng Flash. Lượng dữ liệu là như nhau, nhưng tôi phải giả định thời gian tải dài hơn là do số lượng chuyến đi khứ hồi phải được thực hiện cho máy chủ cho mỗi hình ảnh.

Ngoài ra, tôi đang xem thời gian tải đáng kể cho mỗi trang ngay cả sau khi hình ảnh được lưu vào bộ nhớ cache, vì trang vẫn cần liên hệ với máy chủ để mỗi hình ảnh nhận mã 304 Không được sửa đổi.

Có ai có bất kỳ đề xuất nào để tăng tốc độ này không? Nó sẽ có ý nghĩa để có thể thử tạo ra một hình ảnh lớn sprite được tải xuống trong một yêu cầu duy nhất thay vì 50-80 hình ảnh nhỏ hơn mà mỗi người có một yêu cầu duy nhất? Mục tiêu ở đây là đạt được thời gian tải tương tự cho trang web Flash.

Cảm ơn. Tôi biết điều này không có vẻ giống như một cách lý tưởng để làm việc.

Trả lời

4

Như bạn chỉ ra - một trong những yếu tố phổ biến nhất mà ảnh hưởng đến thời gian tải trang web hiện đại là những số lượng lớn các hình ảnh nhỏ được gửi giữa client và server. Một số nghiên cứu gần đây cho thấy rằng đối với hơn 20 hình ảnh, 80% thời gian tải của bạn sẽ được chi tiêu trong thời gian chờ thực hiện nhiều lần này, không thực sự thực hiện việc tải xuống! Một công cụ được gọi là SmartSprites là một cách rất tiện dụng để "biên dịch" một hình ảnh lớn duy nhất từ ​​tất cả các hình ảnh nhỏ của bạn mà sẽ thực hiện cả thời gian tải nhanh hơn nhiều và tìm nạp trước hình ảnh. Đây là liên kết http://smartsprites.osinski.name/

+1

Bất kỳ cơ hội nào bạn có thể liên kết với 'nghiên cứu gần đây' đó? Tôi muốn được nghe nhiều hơn về nó. –

+0

Ya, xin lỗi về điều đó, cẩu thả! Đây là trích dẫn, nhưng bạn có thể đọc thêm về nó trong ngữ cảnh tại đây: http://www.websiteoptimization.com/speed/tweak/parallel/ Yuan, J., Chi, CH và Q. Sun, " Mô hình chính xác hơn để truy xuất web, " WWW 2005, May 10-14, 2005, Chiba, Japan .. Các nhà nghiên cứu nhận thấy rằng Thời gian định nghĩa (DT) và thời gian chờ đợi (WT) của các đối tượng có tác động đáng kể đến tổng số độ trễ của việc truy xuất đối tượng web, nhưng chúng bị bỏ qua phần lớn trong các nghiên cứu mức đối tượng. DT và WT bao gồm từ 50 đến 85% tổng thời gian chờ, tùy thuộc vào số lượng đối tượng trong một trang. –

1

Tôi muốn nói rằng sử dụng CSS sprites là một hình ảnh lớn. Có tất cả hình ảnh của bạn hoặc hình ảnh có tính chất tương tự xuất hiện trên một yêu cầu HTTP thực sự giúp tải thời gian. Tải xuống 10 hình ảnh có tổng kích thước tệp là 100kb sẽ chậm hơn tải xuống 1 hình ảnh có cùng kích thước. Nó cũng giúp hình ảnh đi xuống trước khi chúng được yêu cầu trong trường hợp dao động và di chuột qua các sự kiện và chúng thường làm cho mọi thứ mượt mà hơn.

0

Nếu bạn không cần tất cả hình ảnh ngay lập tức, bạn có thể sử dụng chức năng window.timeout() để thực hiện một số công việc sau khi trang đã được khởi tạo.

Ngoài ra, nếu bạn sử dụng một hình ảnh ở nhiều nơi, bạn có thể tránh nhiều cuộc gọi đến máy chủ bằng cách đặt hình ảnh vào kiểu CSS và sử dụng lại kiểu đó thay vì hình ảnh.

1

Sử dụng sprite là tốt nếu bạn đồng ý với giải pháp đó. Ngoài ra, những gì tôi muốn thử là phát hiện dữ liệu URI hỗ trợ trong trình duyệt đó và có tập lệnh tải các bản định kiểu khác nhau dựa trên thông tin đó. Một bảng định kiểu với các URI dữ liệu được mã hóa cơ sở 64 và một với một URL thực sự cho sprite. Tệp CSS cũng có thể lưu vào bộ nhớ cache.

Dưới đây là technique to detect data URIs support hoặc bạn có thể sử dụng nhận xét có điều kiện của IE hoặc ... có một số workarounds for sending IE encoded image strings, trong phản hồi HTTP nhiều phần.

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