前端性能优化之图片篇

末蓝、 2022-01-16 10:11 342阅读 0赞

一个网站，不管是从加载时所占带宽，还是服务器请求数量的角度来说，它所占的比例一般都是相当大的，如果图片处理不当，必将成为前端性能及SEO的一个瓶颈，导致带宽及硬件方面的投入也必将越来越多。

不多说，今天从前端性能和SEO的角度在优化[聚尚网][Link 1]首页，就来分享几点图片优化的策略吧。

通过firebug，或者DynaTrace Ajax Edition都可以检测到，整个网站滚动条如果拉到底服务器请求一共215次，图片187次，并且即使鼠标键盘不动，请求还在一个一个不断增加。这太坑爹了，服务器鸭梨大啊，扛不住啊，即使它扛得住，图片商品图片如果更多，浏览器压力也大啊。

也许有人会很感兴趣，为什么说请求数量在不断增加中？通过工具检测，我们可以发现，不断增加的请求来自于第一屏左上角的轮播图片，轮播图片的右下角有5个切换的图标.

而这5个小图标是通过js不断设置当前图标的css的，并且不是以class的形式设置的，如下图：

这就导致了每次切换时再次请求url获得图片赋给DOM树中的该li，而如果以class的形式设置，整个class已经缓存下来了，即可以直接将class赋给当前图标，就不会导致再次请求了，事实效果也确实如此。

同样的道理，背景图片如果以<img src="">的形式出现，如下图：

类似这些图片如果这样做，而不以cssp\_w\_picpath的形式出现，也将导致进入网站后再点进任何一个页面，头部尾部虽然不变，但仍然会重新请求img中的url，如果头部尾部加起来一共30个这样的情况，也就意味着任何一个用户进入网站后，再次点击任何一个页面，都有着30个不必要的请求，更坑爹的是，有的图片在一个页面出现了N次，比如说3次以上，而一共有3个图片服务器上，并且3个图片服务器上图片文件夹结构及图片是一样的，读取的时候随机从任意一台服务器上读取，如果用<img src="">的形式，将可能导致同一个图片下载3次。

也许有人会担心SEO的问题，有些图片，如下图：

如果单纯的cssp\_w\_picpath的形式出现，搜索引擎肯定是没办法抓取的，然而我们可以给它的子节点加个元素，里面加上文字，再用绝对定位将起不出现在用户的视线内，这样做搜索引擎的认可度是要高于p\_w\_picpath中的alt的，因为alt值本身就是搜索引擎不太认可的一个东西。

还有就是图片合并和smush.it无损压缩。css sprite，即将一些小图通过工具合并在一张较大点的图片上，可以减少很多请求；smush.it，是雅虎弄的一个在线无损压缩工具，不过对jpg图片不太感冒，其他的图片几乎能压小20%所有，对图片量大的网站来说，这也可以节省不少的接受数据时间和带宽。

还有一个很重要的，就是图片按需加载，即在js中定义“可视区域”，如浏览器window区域加上底部200px，那window的高度加200px及为可视区域，当滚动条滚动时不断触发onscroll事件，不断判断该元素是否属于可视区域，如果是，则将自定义属性中的图片地址赋给src，将其显示出来，这也将大大减轻服务器的压力，同时也可以提高DOM树的渲染效率，从运营成本的角度来说，一年可以节省不少的带宽，因为并不是每个用户进入页面后都会讲浏览器慢慢拉到底。

唉，不早了，今天就先分享到这里，欢迎各位同学提出质疑或建议！

Hoogle 2011-11-19

转载于:https://blog.51cto.com/hoogle/718675

[Link 1]: http://www.fclub.cn