使用compass自动合并css雪碧图css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方，就是拼图和后期维护的成本比较大。也正是因为这一点，导致很多开发者懒...
分类：
其他好文 时间：
2015-07-12 18:47:18
阅读次数：
241
什么是css sprite？css sprite，中文叫雪碧图，也有人喊CSS精灵，就是一种背景拼合的技术，然后通过background-position来显示雪碧图中需要显示的图像。MDN相关链接：https://developer.mozilla.org/zh-CN/docs/Web/Guide...
分类：
Web程序 时间：
2015-07-10 23:38:12
阅读次数：
223
Grunt,javascript我想先花点时间回忆一下作为一个前端需要做的工作(Loading...)JS合并JS压缩CSS压缩CSS Sprite图片优化测试静态资源缓存(版本更新)...对应的，一个全副武装的前端可能会是这样的：JSHintCSSLintJadeCoffeeScriptRequi...
分类：
其他好文 时间：
2015-06-18 13:07:21
阅读次数：
160
css sprite
为什么使用css sprite？
网页上的很多静态小图片在加载时需要大量http请求，增加了响应时间。（哈哈，雅虎34条优化法则的第一条啊）
css的background-position:x,y;
利用分层实现
1、设置块状元素大小
2、改变背景的位置
3、实现(很多小图组成的大图)对应位置小图的出现
自动生成css sprite的工具：cs...
分类：
Web程序 时间：
2015-06-12 20:59:20
阅读次数：
120
1. 雪碧图的使用场景
(1). 静态图片，不随用户信息的变化而变化
(2). 小图片，图片容量比较小
(3). 加载量比较大
一些大图不建议拼成雪碧图，例如淘宝网站的导航图片都是使用的雪碧图。
2. 使用雪碧图可以减少http请求数量，加速内容显示。每请求一次，就会和服务器链接一次，建立链接时需要额外时间的。
3. 实现原理
使用background-positio...
分类：
Web程序 时间：
2015-06-11 17:11:25
阅读次数：
143
CSSSprites，在前端图片处理中经常用到的一种高效方法，下面参考百度百科的总结，非常到位，学习一下吧！ CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以...
分类：
Web程序 时间：
2015-06-11 16:41:02
阅读次数：
172
雅虎前端优化法则1、尽量减少HTTP请求次数 网页加载中大部分时间都在下载js，css，flash，图片 1、合并文件 css，js，图片（css sprite） 2、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，因为他可以在客户端...
分类：
其他好文 时间：
2015-06-10 20:57:43
阅读次数：
115
前面我写过如何优化Retina屏幕下的图像。如何优化Retina屏幕下的图像一文中从CSS3的background-size切入，介绍了background-size的属性使用方法，然后转入正题，介绍了Retina屏幕下的图像优化。如果你对background-size属性不太了解，建议你先了解一下...
分类：
Web程序 时间：
2015-06-08 11:21:11
阅读次数：
318
1、尽量减少HTTP请求次数 网页加载中大部分时间都在下载js，css，flash，图片 1、合并文件 css，js，图片（css sprite） 2、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，因为他可以在客户端进行缓存2、减...
分类：
其他好文 时间：
2015-06-05 11:38:50
阅读次数：
116
