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
属性可以写入提示文字,有利于搜索引擎的爬取,同时可以帮助有视觉障碍的用户阅读网页。
网友评论