前端优化-Img与background

当img 遇到 background，这个世界就是这么小~~~~~

 

1 从解析机制看

    Img属于html标签，background是css方法。一个页面由html、css、js组成，按照浏览器解析机制，html标签优先解析。你们都知道css文件会放在head加载，可是这并不意味着它会当即执行，而是在html加载完后才执行的。因此重要的元素，如logo就应该使用img，我也犯了这个错误啊，改~~~。

    若是仅仅是为了显示一张图片，好比banner、广告图等，建议采用background方式。由于不重要的自动日后排，避免占用带宽，形成数据阻塞。

    若是图片不少，这里又出现一个新的问题，不一样的浏览器支持的并发加载数量是不同的，（最新测试）IE是10个，FF是10个，图片多，就会出现严重的延迟或者404，由于图片加载慢会影响到页面主要数据呈现，那么让用户看到的都是空白，你好意思让他继续等下去吗！

    Img标签优势是自闭和，能够避免空标签出现（空标签也是w3c验证的内容之一）。采用background方式就会出现空标签，bootstrap中的icon都是用i标签加入的，而i标签中是空内容，这样就产生了空标签（并非说这样作很差，利弊等会聊）。

 

2 从SEO角度看

    刚才说了，Img标签是自闭和的，不能添加文本内容，可是，Img有一个alt属性，并且这个属性在w3c标准中，要求必须有，这样作的好处仍是不少的。

第一，图片比较大，或者用户网速比较窝火的时候，加载失败了，至少还有文字提示告诉用户这里是个什么内容的图片。若是用户非要看这个图，那就多刷几回去加载。另外，alt属性有利于辅助阅读，尤为是对盲人朋友，他们使用阅读器浏览页面，若是没有文本提示，就太不厚道了。

第二，alt属性有利于SEO，搜索引擎实现很好的图像识别仍是有一段路要走。

第三，说说缺点，Img加载的图片是经过src拿到的，若是HTML代码不容许修改，那怎么换图，只有同名文件替换，可是有可能遇到304状态，须要服务器端作相应的设置。这时background的优势就出来了，换皮肤就是这个栗子。Img的另外一个缺点是，显示区域空间大小的预留，图片必须和预留的空间一致，不然图片要么被拉伸要么被压缩，都不是等比例操做，设计师看到就吐血了，一个像素的差别都能找出来，伤不起的。固然，这种问题就是前端和视觉设计师必须遵照必定的规范。栅格化飘过~~~~~~

作SEO是最方便的仍是background，图片是放在背景上的，前景写内容，两不误。若是不想让内容显示出来，就加text-indent， -99999你懂的。（之前有这种玩法，是搜索引擎算法单一的年代，关键字比重高排名就靠前）。

刚才提了一下bootstrap的background方法，bootstrap的作法是用background设置icon，icon的使用太灵活了，因此必须模块化，语义化先靠边站，鱼与熊掌不可兼得。其次icon的重要性真不高，放在最后加载还减小了带宽占用量，提升PV速度。img标签语义很明确不能乱用，因此bootstrap采用无语义的i标签来设置icon也挺好，但要注意无语义标签是否向前兼容，要关注HTML5中的定义。

 

3 语义化角度

    Background和语义化不沾边了，Img是HTML标签，语义明确。

建议：重要的须要优先加载的图片最好采用img。不重要的图片最好采用background。

 

以上属于我的拙见，欢迎指正。