性能优化之 - 按需加载

按需加载是网站性能优化立竿见影的其中一项，按需加载可以了解为 当用户触发某个动作的时候，才去主动的请求资源，这样带来的优化好处：减少了HTTP请求，节省带宽，让页面首屏的内容更快展现在用户的视线范围内，可见极大提高了用户体验。触发的动作有很多，如鼠标点击，拉动页面滚动条，鼠标经过等等。

其中比较重要的是拉动页面滚动条的按需加载。

一、图片按需加载

<img src="伪装的图片" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" />

原理：把图片的真实资源地址存放在标签自定义的属性里，如 'data-src'，那么src属性就用一张透明的图片占用(1k左右)，当触发动作时，交换属性，就可以达到按需加载。

常见的交互效果是图片滚动按需加载，可参考我之前所写的插件讲解，进入。 

 

 

 

参考博客：

一、https://www.cnblogs.com/focuslgy/p/4270946.html