请教两个关于 CSS 和 JQUERY 性能的问题，关于背景图片多次加载和 JQ 效率问题

[wuhao]

1 、如果我把很多图片元素全部做到一张图片中去，我在 CSS 里写入的时候比较懒，习惯不好，每次用图片我都会 background:url(xxx.png) xxxx xxx 0 0;这样写与
把图片全部写到一个 css 属性中，如：.gongyongbeijing{background:url();}
然后每次用的时候，用到的地方都 background-position: -215px -12px;

这两种写法，队网页打开速度和缓存，带宽区别大吗？除了代码文字上的差别，我是说
第一种方法，浏览器会不会加载 N 次同一张图片，造成访问网站速度变慢，占用带宽大幅度增加？

或者说，这两种写法，本质是差不多的，只是重复写代码多了代码的占用？

2 、如果网页中用到了 jQuery ， 我把 jquery 的所有语句写到 js 文件中加载，这个文件一般会不会被浏览器缓存？如果我写到网页中去，每次都要加载和执行代码，所以一般写到 js 文件里去，会对网站的速度有所帮助？

3 、 CSS 里面用到的图片，是不是跟 CSS 文件一样，被缓存在用户浏览器中，这样会对网页访问速和带宽占用有所帮助？

[bdbai]

1 、问题在于哪一天你的雪碧图地址换了，方法一就酸爽了，缓存也成问题。前端有自动处理雪碧图的工具，配合自动构建工具食用更佳；
2 、代码尽量不要直接写在网页中；
3 、一般图片会有缓存。

关于"是否会被缓存"和"是否占用宽带过大"的问题，请打开浏览器的开发者工具亲手做个实验。

[wuhao]

bdbai 您好
问题 1 ：您说的缓存也成问题是指？前段有自动处理雪碧图的工具？什么是雪碧图？什么工具？能否说一下呀，自动构图工具也分享下？谢谢谢谢~

[dilidili]

@wuhao 雪碧图就是你合并的 png 图片 由于这个技术叫 css sprites 所以国内很多人人叫雪碧图 至于工具 一般的前段自动化构建工具都有这个功能

[jsonline]

性能瓶颈不在这里

[jsonline]

缓存靠 HTTP 协议

[bdbai]

@wuhao 比如说你的雪碧图有改过，但是按照上面的方法，旧的会被浏览器缓存下来，这样用户就看不到新的图了。其它静态资源， CSS 、 JS 也有这个问题。
自动构建工具像 Grunt 、 Gulp 都有处理雪碧图的插件，搜一下有不少。

[jugelizi]

你目前需要了解到这些？
js 优化就页面底部加载，加上版本号防止缓存 比如 a.js?v=2.1
其他的作为前段的话 F12 都不会看？ Firebug 呢？

[loading]

楼主请认真看：

http://www.cnblogs.com/babycool/archive/2012/04/15/2450187.html