请教两个关于 CSS 和 JQUERY 性能的问题，关于背景图片多次加载和 JQ 效率问题
wuhao · 2016-02-28 00:03:00 +08:00 · 3538 次点击这是一个创建于 3176 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 文件一样，被缓存在用户浏览器中，这样会对网页访问速和带宽占用有所帮助？
 |
1
bdbai 2016-02-28 00:34:55 +08:00 via iPhone
1 、问题在于哪一天你的雪碧图地址换了，方法一就酸爽了，缓存也成问题。前端有自动处理雪碧图的工具，配合自动构建工具食用更佳；
2 、代码尽量不要直接写在网页中； 3 、一般图片会有缓存。 关于"是否会被缓存"和"是否占用宽带过大"的问题，请打开浏览器的开发者工具亲手做个实验。 |
 |
2
wuhao OP bdbai 您好
问题 1 ：您说的缓存也成问题是指？前段有自动处理雪碧图的工具？什么是雪碧图？什么工具？能否说一下呀，自动构图工具也分享下？谢谢谢谢~ |
 |
3
dilidili 2016-02-28 02:02:27 +08:00
@wuhao 雪碧图就是你合并的 png 图片 由于这个技术叫 css sprites 所以国内很多人人叫雪碧图 至于工具 一般的前段自动化构建工具都有这个功能
|
 |
4
jsonline 2016-02-28 04:13:30 +08:00 via Android
性能瓶颈不在这里
|
|
5
jsonline 2016-02-28 04:22:51 +08:00 via Android
缓存靠 HTTP 协议
|
|
6
bdbai 2016-02-28 10:17:57 +08:00 via iPhone
@wuhao 比如说你的雪碧图有改过，但是按照上面的方法，旧的会被浏览器缓存下来，这样用户就看不到新的图了。其它静态资源， CSS 、 JS 也有这个问题。
自动构建工具像 Grunt 、 Gulp 都有处理雪碧图的插件，搜一下有不少。 |
 |
7
jugelizi 2016-02-28 10:24:46 +08:00
你目前需要了解到这些？
js 优化就页面底部加载，加上版本号防止缓存 比如 a.js?v=2.1 其他的作为前段的话 F12 都不会看？ Firebug 呢？ |
 |
8
loading 2016-02-28 11:43:33 +08:00
|
Select Language