个人小网站搭建

简介

先附上我的网址 米壳的网站

这是我花了两个礼拜左右的时间入门html、css、js等知识，自己搭建的一个小网站，主要介绍了我喜欢的几个摇滚乐队。

在学习过程中，用到的最多的工具是 菜鸟教程 ，里面的内容精当且实用，对新手非常友好。我先是花了几天时间粗粗浏览了一遍相关内容，再开始上手写网站的。除此之外，我还欣赏并借鉴了国内外我认为比较优秀的网站设计，例如有 Shop - Simply Chocolate : Simply Chocolate, gucci 和 iPhone XS - Apple 等等。

其他方面，使用了 adobe illustrator 做了简单的背景蒙版， 从  Shots - Dribbble - Dribbble 上获取了一些有意思的小设计。因为这个网站内容很简单，所以也没有用到什么其他东西了。

模块介绍

网站大致分为5个部分，其中前四个部分分别对应四个乐队( Pink Floyd, The Beatles, Led Zeppelin, The Rolling Stones),最后部分是尾声。

乐队介绍部分，每一个乐队都从 wikipedia 上撷取了简短的乐队介绍，以及代表作专辑的介绍。在本地运行时，浏览器还会根据用户当前正在浏览的乐队播放音乐，但由于 Safari 和 Chrome 采用的新政策，网站不可在与用户进行交互之前播放背景音乐，因此这一效果在局域网上无法实现，对于本人来说略显可惜。

总结

第一次写网站，有非常多的不足之处，现总结如下

1. html排版方式不统一

原本是想写完桌面端网页后进行移动端优化的，但是发现由于排版方式的不统一，也没有规范使用 bootstrap，导致这一工作工程量浩大，实在力不从心。以后争取采取统一规范的方式进行排版。

2.网站加载时间过长，浏览易卡顿

在测试过程中，发现网站受网速影响会有15s~30s不等的加载时间，这对于普通用户来说是非常差的体验。尽管我在js代码中加入了延迟加载的策略，仍然无法有效地解决这个问题。究其原因，只要是服务器配置不足和过大的mp3文件所致。这一方面与我的代码关系不大，所以暂时搁置。

另一方面，在浏览器缓存没有及时清空的前提下，Safari用户在拖动滑动条时会感受到明显的卡顿。这应该是因为我使用了一些内置js库，而这些js文件的功能又有冗余导致的。目前阶段我没有能力或精力自己实现这些js效果，所以也只能暂时搁置了。

现在要开学了，应该还是会有挑有空的时间稍稍完善一下这个网站。

最后，这个小网站只是我业余的小娱乐，为了拓宽一下知识面，主要的学习重心应该还是在学校课程和一些较难的内容上，毕竟前端工程师也不是我的目标。