V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wuhao
V2EX  ›  浏览器

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

  •  
  •   wuhao · 2016-02-28 00:03:00 +08:00 · 2891 次点击
    这是一个创建于 1942 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    关于"是否会被缓存"和"是否占用宽带过大"的问题,请打开浏览器的开发者工具亲手做个实验。
    wuhao
        2
    wuhao   2016-02-28 00:41:13 +08:00
    bdbai 您好
    问题 1 :您说的缓存也成问题是指?前段有自动处理雪碧图的工具?什么是雪碧图?什么工具?能否说一下呀,自动构图工具也分享下?谢谢谢谢~
    dilidili
        3
    dilidili   2016-02-28 02:02:27 +08:00
    @wuhao 雪碧图就是你合并的 png 图片 由于这个技术叫 css sprites 所以国内很多人人叫雪碧图 至于工具 一般的前段自动化构建工具都有这个功能
    jsonline
        4
    jsonline   2016-02-28 04:13:30 +08:00 via Android
    性能瓶颈不在这里
    jsonline
        5
    jsonline   2016-02-28 04:22:51 +08:00 via Android
    缓存靠 HTTP 协议
    bdbai
        6
    bdbai   2016-02-28 10:17:57 +08:00 via iPhone
    @wuhao 比如说你的雪碧图有改过,但是按照上面的方法,旧的会被浏览器缓存下来,这样用户就看不到新的图了。其它静态资源, CSS 、 JS 也有这个问题。
    自动构建工具像 Grunt 、 Gulp 都有处理雪碧图的插件,搜一下有不少。
    jugelizi
        7
    jugelizi   2016-02-28 10:24:46 +08:00
    你目前需要了解到这些?
    js 优化就页面底部加载,加上版本号防止缓存 比如 a.js?v=2.1
    其他的作为前段的话 F12 都不会看? Firebug 呢?
    loading
        8
    loading   2016-02-28 11:43:33 +08:00
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3660 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 02:31 · PVG 10:31 · LAX 19:31 · JFK 22:31
    ♥ Do have faith in what you're doing.