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

2016-02-28 00:03:00 +08:00
 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 文件一样,被缓存在用户浏览器中,这样会对网页访问速和带宽占用有所帮助?

3536 次点击
所在节点    浏览器
8 条回复
bdbai
2016-02-28 00:34:55 +08:00
1 、问题在于哪一天你的雪碧图地址换了,方法一就酸爽了,缓存也成问题。前端有自动处理雪碧图的工具,配合自动构建工具食用更佳;
2 、代码尽量不要直接写在网页中;
3 、一般图片会有缓存。

关于"是否会被缓存"和"是否占用宽带过大"的问题,请打开浏览器的开发者工具亲手做个实验。
wuhao
2016-02-28 00:41:13 +08:00
bdbai 您好
问题 1 :您说的缓存也成问题是指?前段有自动处理雪碧图的工具?什么是雪碧图?什么工具?能否说一下呀,自动构图工具也分享下?谢谢谢谢~
dilidili
2016-02-28 02:02:27 +08:00
@wuhao 雪碧图就是你合并的 png 图片 由于这个技术叫 css sprites 所以国内很多人人叫雪碧图 至于工具 一般的前段自动化构建工具都有这个功能
jsonline
2016-02-28 04:13:30 +08:00
性能瓶颈不在这里
jsonline
2016-02-28 04:22:51 +08:00
缓存靠 HTTP 协议
bdbai
2016-02-28 10:17:57 +08:00
@wuhao 比如说你的雪碧图有改过,但是按照上面的方法,旧的会被浏览器缓存下来,这样用户就看不到新的图了。其它静态资源, CSS 、 JS 也有这个问题。
自动构建工具像 Grunt 、 Gulp 都有处理雪碧图的插件,搜一下有不少。
jugelizi
2016-02-28 10:24:46 +08:00
你目前需要了解到这些?
js 优化就页面底部加载,加上版本号防止缓存 比如 a.js?v=2.1
其他的作为前段的话 F12 都不会看? Firebug 呢?
loading
2016-02-28 11:43:33 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/259573

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX