img 标签和 background

html 中的 <img /> 标签和 css 中的 background-image ，都可以在页面上显示出图片。这两种方式显示图片，有何差别呢，该如何选择呢？

说到二者的区别，就要从网页的渲染的流程讲起了，浏览器渲染网页的过程是这样的：
1.解析 html，构建出 dom 树；
2.解析 css，构建出 cssom 规则树；
3.合并 dom 树和 cssom 规则树，生成渲染（render）树；
4.遍历渲染树，计算每个节点几何信息；
5.屏幕上绘制节点；

用 <img /> 标签设置图片，浏览器会在解析 html 时，加载图片，并且在图片加载完毕之前，<img /> 标签以下的内容不会被解析。

而通过 css 中的 background-image 来设置图片，浏览器先解析 html ，再解析 css，加载图片时不会影响用户浏览器页面内容。

单从页面加载方面来说，用 background-image 来设置图片对用户体验更好，尤其是一些比较大的图片。

而，从 html 语义化来说，<img /> 标签有其明显的优点，<img /> 标签的 alt 属性可以写入提示文字，有利于搜索引擎的爬取，同时可以帮助有视觉障碍的用户阅读网页。