这个周末写了一个网页版的个人简历，基于bootstrap框架 + github page进行快速的开发及部署。
首先说下github page吧，真的很方便，github帮你提供一个无需配置直接使用的服务器来供你展示静态网页，非常适合做个人网页/博客，同时github page也提供了Blogging with Jekyll的方法使开发者使用markdown语句快速修改网页内容。非常的便捷，实用。
☞点击打开github page官网
但是我这里自己开发了网页进部署，没有用官方推广的 Blogging with Jekyll ，也没有什么其他的原因了。就是想练练前端网页的开发。
然后在开发过程中还是碰到了很多坑的，在这里记录一下，以供记录和分享。
开发思路
感觉这次的开发思路很好的模拟了一次软件设计的流程
- 开发一个网页，可以在自己的电脑上完美展示
- 由于各个浏览器解析和支持情况不同，需要对浏览器进行适配
- 现在移动端更加广泛一些，需要支持移动端的适配
- 可不可以根据用户使用的默认语言来自动调整网页上显示内容来做到更好地用户友好性
最后磕磕绊绊的也算完成了以上的过程，按照流程的话，我之后思考的应该是，如何快速修改网页内容，如何进行动态修改，能不能把这种模式固定下来制作为模板大量开发复用。这也是之后考虑的事了，这次就先做到这里吧。
开发遇到的坑
1.手机适配
手机适配真的很麻烦，文字的展示还好，但是图片的展示真的繁琐，各个手机屏幕的大小都要考虑到，之前也没做过移动端的开发，所以研究了很久。最后采用了@media (max-width){}的方法来判断屏幕来进行适配，可以直接用浏览器的f12打开切换手机显示来调整网页内容的分布。
2.网页打开慢
第一次做好后部署完，网站打开很慢，真的觉得无法忍受，测试了一下，完整加载网页需要10s的时间，很明显是不合适的。查阅了很多方法，找到了几个有显著效果的方法
- 合并请求，减少请求数量，在加载网页时，最多同时对一个站点发送6个request请求，所以减少请求数量可以很好地减少请求的等待延迟。
- 动态加载内容，对图片进行懒加载
- css中的背景图片总是最后加载的，所以不重要的图片也可以使用这种策略去打开
- 使用CDN进行内容分发，使资源来源不同来达到并发加载资源，提高速度
- 压制图片大小，这里强力安利webp格式的图片，可以用格式工厂去转换，大约可以压制出30%~40%的空间，大大缩减图片所占的网络资源，并且质量不会有损失。（但是有缺陷，之后会提到）
- 压缩css和js，使用min.js来缩减资源容量
3.微信/qq内置浏览器打不开图片
腾讯会去检测图片来源，如果使用了外站图片会进行自动屏蔽，此时图片都不会加载，如果只适配安卓端，可以使用<meta name="referrer" content="never" />来屏蔽这种检测，但是ios端无法完成这一操作。值得一提的是可以使用放在qq空间/说说/朋友圈等等一系列放在腾讯服务器的图片，可以很好地通过这层检测。
4.苹果系统浏览器不显示图片
Safari浏览器对于图片来源的检测更为严格，一定要用有证书的图片（为了通过证书检测，不能引用外站图片）。并且由于webp格式图片是谷歌推出的，苹果公司并没有对其进行兼容，所以为了去满足苹果用户的使用，必须使用png格式的图片来进行加载
以上就是这次开发经历，文中有不足，欢迎讨论与指正。
网友评论