本周小总结-CFANZ编程社区

本周小总结

忙碌的一周又过去了，这一周我一直在继续加工我们此次前后端合作完成的音乐网站项目，一周过去必然是有所收获。
这周我们终于开始进行交互了，第一次用到接口的时候可谓的满心欢喜，有了第一次的使用，之后进行的都是比较顺利的，当然顺利的意思不是没有bug（怎么可能不出现bug◑﹏◐）,是相对来说比较顺利。而且在本周写项目的时候第一次使用了精灵图，因为音乐网站上有很多小图标，如果下载成一个一个比较麻烦，也不利于页面的渲染，将小图标合成一个精灵图，即方便使用有优化了性能，这是我这周的一个小小的进步吧（毕竟之前从未用过），顺便给大家推荐一个生成精灵图的网站：http://www.saoban.cn/css-sprites.html
提到精灵图，便想给大家分享几种性能优化的方法：
1.针对css,html,js文件的一些建议

2.使用精灵图
精灵图可减少图片的大小，减少建立连接的消耗
3.懒加载
优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能
在这里插入图片描述

function lazyLoad(imgs){
	var h = window.innerHeight;
	var s = document.documentElement.scrollTop || document.body.scrollTop;
	for(let i = 0;i < imgs.length;i++){
		if(h + s > img[i].offsetTop){
			img[i].src = img[i].getAttribute(data-src);
		}
	}
	
}