本周小总结

忙碌的一周又过去了，这一周我一直在继续加工我们此次前后端合作完成的音乐网站项目，一周过去必然是有所收获。

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

提到精灵图，便想给大家分享几种性能优化的方法：

1.针对css,html,js文件的一些建议

• script标签移到文件末尾
• 保持统一大小写
• 清除空格
• 减少不必要的嵌套
• 减少注释
• 代码要结构化、语义化
• css和javascript尽量分离
• 除去无用的标签和空标签
• 尽量少使用废弃的标签

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);
  }
  }
}

在接下来的一周内，我们将会尽快完成前后端交互，同时我们前端之间的页面跳转也要尽快实现，希望在接下来的一周项目进展能够顺利