2010-01-20 26 views
5

Khi tôi có cùng một hình ảnh được sử dụng cho các yếu tố khác nhau (hình ảnh sprite) tôi thường không gọi lại hình ảnh đó vì đây là một yêu cầu HTTP mới.Hình ảnh nền CSS của trình duyệt có lưu vào bộ đệm không?

Tôi thà sử dụng:

element1 { 
    background: url(someImage.png); 
} 

element2 { 
    background-image: inherit; 
} 

là tiết kiệm HTTP này yêu cầu?

Hoặc nếu trình duyệt là thông minh và tôi có thể sử dụng:

element1 { 
    background: url(someImage.png); 
} 

element2 { 
    background: url(someImage.png); 
} 

là trình duyệt sẽ làm cho một yêu cầu HTTP mới? Hoặc nó biết rằng tôi đã có hình ảnh này được lưu trữ?

Câu hỏi đặt ra là: Tôi có đạt được điều gì đó bằng cách sử dụng ví dụ 1 không?

+4

Tùy thuộc vào trình duyệt. – jball

Trả lời

5

Trong trường hợp bạn mô tả, trình duyệt về cơ bản sẽ tham chiếu cùng một hình ảnh nhiều lần trên một trang và điều này gần như chắc chắn sẽ được lưu vào bộ nhớ cache.

Trên các trang khác nhau, câu trả lời tùy thuộc vào trình duyệt và trên tiêu đề hết hạn mà máy chủ của bạn gửi sẽ ảnh hưởng đến hành vi lưu vào bộ nhớ cache trong các đại lý phù hợp.

+0

vì vậy tôi có được bất cứ điều gì từ việc sử dụng 'background-image: inherit;'? – adardesign

+3

Khác hơn là tìm kiếm tồi tệ hơn cho người dùng IE6 và IE7 của bạn? Không hẳn. Và kế thừa sẽ chỉ có tác dụng nếu bộ chọn css đầu tiên được áp dụng cho các phần tử với phần tử thứ hai; nếu họ không phù hợp với cả hai, hoặc đầu tiên, bạn sẽ không nhận được gì. – JasonTrue

4

Có, trình duyệt sẽ tải tham chiếu thứ hai vào cùng một hình ảnh trong tệp CSS từ bộ nhớ cache. Sử dụng Firebug, bạn sẽ có thể xem tất cả các yêu cầu HTTP được thực hiện bởi trình duyệt.

+0

vì vậy tôi có được bất kỳ thứ gì từ việc sử dụng hình nền: kế thừa; – adardesign

+1

Không, nó không có sự khác biệt. – jeffreyveon

1

Nếu bạn muốn đơn giản hóa mọi thứ và tài nguyên bộ nhớ cache và tiết kiệm băng thông, thì bạn nên tạo tệp appcache.appcache trong thư mục gốc của trang web của bạn. This link cung cấp hướng dẫn về cách tạo một appcache. Nó lưu trên các yêu cầu http nếu người dùng truy cập vào trang web của bạn nhiều lần và lưu lại khi yêu cầu cùng một hình ảnh hai lần nếu nó đã tồn tại trong bộ nhớ cache.

Happy Caching!

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