博客变迁记录

Jan 6, 2016

416

趁着元旦放假重写了博客,后端采用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。流程如下:

JavaScript 」相关文章

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接