趁着元旦放假重写了博客,后端采用Node.js+MongoDb,前端采用gulp+webpack打包,这几天才将blog.crazycoder.cc博客的内容全部迁移过来。折腾自己的博客一年多了,本文主要写一下我自己博客的变迁记录。
目前版本的博客做了比较多的优化,可以看一下 Google PageSpeed Insights 的评分。
这个版本主要做了首次加载的优化,减少http请求,后面会涉及到。
2014年12月份的时候,用当时刚刚发布了正式版的Yii2写了自己的博客,数据库采用的是MySQL,前端则用了比较传统的模式,bootstrap、jquery。可以看到当时的UI。
2015年3月份的时候,对这UI看不下去了,哈哈。又重新整了一套,用node.js搭了中间层,通过定时脚本读取php接口,然后用redis缓存接收到的数据,node每次读取的是redis数据库中的数据。其中,通过node接口记录阅读数,然后请求到php接口,回写到msyql数据库。
这个版本里面,前端采用了require.js做模块化处理,以及用它自带的r.js来打包代码。以下图片便是这个版本的UI。
在这个版本里面,因为加入node中间层,所以需要同时维护两套代码,一套是node的,用于渲染,另一套是php,提供数据接口,以及文章编辑的后台。基于这一点,我便趁这段时间用node+mongodb的方式改造了原先的博客,剔除了php部分。
现在来看一下目前博客的相关性能。
来看一下页面连接的网络情况。
可以看到首次请求的时候只有28.9kb(开启了gzip压缩)。这28.9kb包含了页面所需要的css、js,采用内嵌的方式。
在第二次访问时,采用强制刷新,返回的包体只有5.9kb(开启了gzip压缩)。
因为http连接消耗是比较昂贵的,通过将css、js内嵌到html来减少请求。那么,这时候会出现一个问题,如果每次都请求都包含css、js,包体会变大,css、js能否通过某些方式缓存起来呢?
在我这个博客里面,我通过localstorage的方式来保存加载过的css、js,结合cookie来更新css、js。流程如下: