css-sprite是一个好的技术吗？ [英] Is css-sprite a good technique?

问题描述

1. 是css-sprite好的技术吗？我在 http://spriteme.org/ 上阅读了关于其优点的信息，我还看到了很多关于css的问题




2. 它会工作吗？

解决方案

是的，良好的技巧。

您可以减少HTTP请求的数量，这是一种页面优化技术。

中的第一条规则超速的最佳做法Yahoo的网站

是

最小化HTTP请求

最终用户响应时间的80％是在前端花费的
。这个
时间的大部分时间是在下载页面中的所有
组件：图片，
样式表，脚本，Flash等等。
减少$ b中的组件数量$ b turn减少了渲染页面所需的HTTP
请求的数量。
这是更快页面的关键。

CSS Sprites 是首选方法
用于减少图像数
请求。将您的背景
图像合并为单个图像，并使用
CSS背景图像和
背景位置属性
显示所需的图像片段。

减少页面中
组件数量的一种方法是简化
页面的设计。但是有一种方式
来构建页面更丰富的内容
同时还实现快速响应
次？这里有一些技术，
减少了HTTP请求的数量，
同时仍然支持富有的页面
设计。

当您需要更改sprite内部图像的尺寸时，您必须重新计算图像的偏移量。但我不认为这是一个巨大的负担。

几乎所有的现代浏览器都支持。

这也是一个关于CSS sprites的好文章

CSS Sprites：它们是什么，为什么是酷的，以及如何使用它们

1. is css-sprite good technique? I read about its pros at http://spriteme.org/ and have also I seen a lot of questions about css sprites here in stackoverflow.

2. What are its cons?

3. Will it work in all browsers as claimed in their site?

解决方案

Yes, it is a good technique.

You can reduce the number of HTTP requests and it is a page optimization technique.

The first rule in

Best Practices for Speeding Websites by Yahoo

is

Minimize HTTP Requests

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

When you need to change the dimensions of the images inside the sprite then you have to recalculate the offsets for the images. But I don't think this is a huge burden.

It is supported by almost all modern browsers.

This is also a good article on CSS sprites

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

这篇关于css-sprite是一个好的技术吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！