CSS Sprites browser rendering

Question

Chúng ta đều biết rằng hình ảnh CSS sprite là tuyệt vời để giảm số lượng yêu cầu và như vậy, nhưng hiệu suất của trình duyệt hiển thị trang bằng nhiều yếu tố bằng cách sử dụng hình ảnh lớn làm nền?

Answer 1

trên máy chậm hơn được trang bị các trình duyệt cũ hơn (như IE6/IE7), bạn có thể nhận thấy hiệu suất giảm đáng kể khi bạn sử dụng hình ảnh rất lớn nhiều lần trên một trang. Nó thậm chí còn nghiêm trọng hơn, khi bạn đang sử dụng sprites cho: hover bang.

Bạn phải kiểm duyệt cảm xúc về việc đẩy tất cả các hình ảnh lên một hình ảnh khổng lồ - suy nghĩ về yếu tố nào là một phần của giao diện trang web/webapp và đặt chúng vào một tệp sprite (những tệp này sẽ được hiển thị mọi lúc, trong khi duyệt). Sau đó, cố gắng nhóm các phần còn lại của các sprites vào các phần hình ảnh cụ thể trên trang web và sử dụng chúng khi cần. Nhược điểm là thời gian tải mở rộng một chút (yêu cầu HTTP bổ sung), nhưng trải nghiệm người dùng trong khi trang xem/cuộn sẽ cao hơn nhiều.

Answer 2

Như chúng ta có thể đánh giá từ trải nghiệm YouTube của mình, không có vấn đề gì lớn với điều đó.

Hy vọng rằng, trình duyệt lưu trữ một hình ảnh trong bộ nhớ và sau đó sử dụng nó để hiển thị đầu ra ở bất cứ nơi nào hình ảnh này là cần thiết.

Answer 3

Bạn cần cân bằng mọi thứ. Nếu bạn đang nói về một hình ảnh mà sẽ bao gồm nói 1000 sprites thì CSS sẽ rất lớn. Ngoài ra có một cơ hội rất mỏng mà bạn sẽ được sử dụng tất cả những sprites trong cùng một trang anyway.

Answer 4

Bạn có thể lưu một số lượng đáng kể yêu cầu HTTP bằng cách hợp nhất hình ảnh của bạn thành một hoặc nhiều hình ghép tổng hợp và sử dụng CSS để hiển thị có chọn lọc các phần của sprite trong trang web của bạn. Bây giờ các trình duyệt chính đã phát triển đủ để hỗ trợ nền CSS và định vị, nhiều trang web hơn đang áp dụng kỹ thuật hiệu suất này. Trên thực tế, một số trang web bận rộn nhất trên Web sử dụng CSS sprites để lưu các yêu cầu HTTP.

Với hàng triệu người dùng, Yahoo! và AOL làm mọi thứ có thể để cải thiện trải nghiệm người dùng. Cả AOL.com và Yahoo.com đều sử dụng CSS sprites để lưu nhiều yêu cầu HTTP cho các giao diện phức tạp của chúng. Cả hai trang web đều sử dụng CSS sprites để hiển thị có chọn lọc các biểu tượng trong thư mục dịch vụ của họ và Yahoo! cũng sử dụng sprites ở nơi khác.

Lợi ích khác của CSS sprites là hình ảnh kết hợp thường nhỏ hơn kích thước tệp so với hình ảnh riêng lẻ, mặc dù thêm khoảng trắng giữa các hình ảnh. Kích thước nhỏ hơn của sprites là do giảm chi phí của nhiều bảng màu và thông tin định dạng theo yêu cầu của hình ảnh riêng biệt. Để tối đa hóa khả năng truy cập và khả năng sử dụng, CSS sprites được sử dụng tốt nhất cho các biểu tượng hoặc hiệu ứng trang trí.