开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第27天，点击查看活动详情
一、img 的 alt 与 title 的异同，还有实现图片懒加载的原理
alt 是图片加载失败时，显示在网页上的替代文字；
title 是鼠标放上面时显示的文字,title 是对图片的描述与进一步说明;
这些都是表面上的区别，alt 是 img 必要的属性，而 title 不是。
对于网站 seo 优化来说，title 与 alt 还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt 属性。所以在图片 alt 属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。
条件允许的话，可以在 title 属性里，进一步对图 片说明。由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以说延迟加载几乎是标配了。
图片懒加载的原理很简单，就是我们先设置图片的 data-set 属性（当然也可以是其他任意的，只要不会发送 http 请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求。 然后我们计算出页面 scrollTop 的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标 Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。
二、Style 标签写在 body 后与 body 前有什么区别
1、写在 body 标签前利于浏览器逐步渲染：
resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint
2、写在 body 标签后：
由于浏览器以逐行方式对 html 文档进行解析；
当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染；
在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）；
