2020改版通知
2020-03-23
周溱
大家可能已经注意到本博客近期做了改版。速度是不是快的好像要飞起来一样?改版的主要目的是清爽易用,希望大家喜欢.下面逐条这次的改动介绍.
RSS2 feed
过去本博客只有JSON Feed. 但是,JSON Feed支持的客户端比较少,所以增加了更流行的RSS. 注意,只支持RSS2.0, 1.0版本不支持.目前所有常见的Feed aggregator 都应该可以直接使用,有问题请及时通知我。
放弃后台加载
过去,本博客列表是后台Ajax加载的,其本意是提高用户体验,避免长时间等待.但评估后发现我的内容还很少,后台加载实际上是画蛇添足,并没有提高用户体验,反而增加了复杂度.现在我改成全嵌入在主体HTML里,一次性加载,简化了前后台程序,提高了兼容性.
新 CSS
这是最大的用户可见改动.过去我出于习惯,一直使用bootstrap. 但是,本博客使用到的bootstrap功能恐怕还不到1%, 反而带入一个非常大的CSS及Javascript包. 这次改版我改用了精简很多的Pure CSS. 正如其名,Pure CSS并无javascript部分,仅包含CSS, 而且这个CSS只有Bootstrap十分之一大.排版功能对我来说也够用了.这加快了加载速度.
新 Javascript
对于前端来说,重头戏永远在Javascript, 虽然用户不可见.过去出于十几年的习惯,我一直使用JQuery. 但本博客使用到的JQuery功能其实也不到十分之一.由于近几年浏览器的演进,实际上JQuery提供的常见功能如DOM查询修改等等,都可以用标准Javascript API来做了,只是稍微繁琐一点而已.我主要参照的是这篇文章, 有兴趣的朋友可以参考一下。
在去除了Bootstrap, JQuery之外,我已经完全去除了对第三方Javascript库的依赖,所有Javascript只有一个文件,2KB大, 相当于之前1%大小.
当然,只是做减法也没意思.我又在Javascript层加入了Turbolinks. 它的原理难以用几句话描述,但只需要加入这个库,再写几行代码,你所有的站内页面跳转都变得很快,简直就是瞬间变脸,不信你试试. 当然,这也不是没有任何限制.你写的Javascript需要遵循一定的规范.具体内容请阅读文档.
加入turbolinks之后我的总体Javascript包大小涨回了40KB, 但与获得的跳转性能来相比,这是相当值得的.
总结
现在本博客主页加载在有cache情况下,应该不到500ms, 无cache情况下总加载大小一百多KB, 大多数网络情况不到一秒.页间跳转时间基本忽略不计.新版面相对之前个人觉得更自然清新,操作也直观.希望能听到你的反馈.