妹blog近期的优化总结 2014

卜卜口代码

自从写了新的博客程序之后,好像又开始熬夜了OAQ 今天爸爸出院,不用再每天去医院照顾 考虑尽快将这个博客程序完善起来发布出去。(感觉快不起来呢
很久之前从 还在用yo2免费wordpress博客托管 时就有计划写个自己的blog程序,之后也确实写过了不少个不一样的雏形,类论坛、类微博、类轻博客、一句话、依托于浏览器的本地单页应用...等等等但每个最后都因为没法满足自己而废弃,所以这次在开始码代码之前企划的时候、做了很多前期准备,画了不少各式各样的想要的博客样式、画了不少常见的图标意义何在,最后还是有些用处的OAQ(比如保留很多绘图痕迹的难看的图标...

这次的新blog 代号 妹(imouto)大概也就是当初换这个域名的原因。为了现在这个子域名OAQ是一切以速度、极简、效率为优先的一看就是程序员的博客程序,托管选择了静态资源访问起来飞快的http://www.hostker.com/ 基友维护的比较安心OAQ不像某些App Engine有问题可以随时沟通,而且维护很勤快所以经常被攻击T_T

前言好长,自从用上微博好久没写这么多字了(

静态化

静态化是提速的关键,玩过blog的肯定都接触过wordpress,他的肿胀用过的肯定都体验过一番。
在我的旧博客http://mouto.org/上我也做过很多优化,各种方法也都尝试过 但始终不理想。php运行时间始终可怕。

一般的blog在访问时都要在后端进行sql操作,循环模版,调用插件处理数据,输出html内容返回给浏览者。
静态化之后直接跳过这步骤,访问->返回

妹blog在访问时,所有载入资源都实现了静态化。再记录下实现静态化之后的一些必要优化:

静态化资源务必返回缓存头(最后更新时间or缓存时间),这样能在即保持内容及时更新的同时加速二次载入时的速度
设置缓存头时务必附带(Accept-Ranges 和 Content-Length)

如果搭建在hostKer直接在后台网站性能优化里面开启缓存头选项即可~(via. 小新)

JSON传输数据配合hash实现换页不刷新(兼容旧浏览器)

JSON传输数据这个没什么需要说的啦,只记录些让数据更精简的技巧:
在格式可控、前端代码可控的情况下尽量使用没定义下标的数组传输内容,字节数会小挺可观的量;
生成JSON时中文字符不转换成uAAAA 形式的UTF码,斜线之类的标点不用加反斜杠;

hash实现换页不刷新算是我用过比较多的技巧了、单页保留浏览进度还算不错的方法,偷揉电台 http://itorr.sinaapp.com/fm/ 、杂货物讨论版 http://za2.org/ 、萌电台 http://moe.re/fm 等等都是利用这个技术实现单页不刷新。

监控window的popstate事件响应页面变动操作,之后访问 #act 这样的参数url就可以不跳转页面实现内容刷新。页面需要传输多个参数时可以在hash里按照 #!act/参数1/参数2 这样的结构来实现,响应时 根据获取到hash、去除不需要的字串、其余按照’/‘进行分割

location.hash.substring(2).split('/') 

但是旧的浏览器无法响应popstate事件,这时我们就要利用setInterval每隔一段时间检测url改动,实测100毫秒检测一次IE6表现良好。

if(!history.pushState){//判断浏览器不支持popstate事件 
 var laHash=0,//记录历史url 
 setInterval(function(){//设定循环运行 
 if(laHash!=location.hash){ //判断url更新 
 popstate();//运行事件 
 laHash=location.hash;//记录新的历史url 
 } 
 },100); //100毫秒运行一次 
} 

功能增多的前提下 代码颗粒化 按需加载

从一开始的只能加载首页和文章数据到现在在blog上实现了各种还算好玩的常见功能,代码量成倍增加、只通过两条请求加载js和css很容易堵塞首次浏览时的页面显示速度,这时候就要果断把各部分功能不同的代码分开颗粒化,只有需要某部分代码时才进行加载。加载过的就缓存在浏览器进程里(甚至可以缓存到本地)

精简代码 合理重构 代码重用 相同内容不多次加载

这4条放在一起是因为都只关于两段函数的优化 那就是 $.x() ajax部分 和$.lcss()部分
在上一个版本里,blog的缓存机制还是写在blog函数里,每个页面利用不同方式进行缓存,很不用好。所以这个版本对这里进行了推翻重做,直接在ajax函数和插入css函数上进行缓存,
记录每次请求的地址,相同内容直接返回、不再发请求给后端。只要是打开过的页面,在下一次访问会立刻开启。

$.x的话因为要储存载入过来的json数据,实现肯定是越简单好用的好、建立一个object 碰到载入就存起来 下次请求url时判断如果载入过就直接返回

$.x=function(A){//建立一个为A的object 
 return function(i,p,f,e,x){ 
 if(typeof p=='function'){e=f;f=p;p=0};//处理传入参数 
 if(A[i])return f(A[i]);如果载入的url已存在那么直接callback返回 
 /*下面一堆处理ajax的代码*/ 
 (x=win.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP')).open(p?'POST':'GET',i,1); 
 x.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
 if(f||e)x.onreadystatechange=function(){ 
 if(x.readyState==4)((x.status>199&&x.status<301)||x.status==304)?f(A[i]=i.match(/.json$/)?JSON.parse(x.responseText):x.responseText):e(x.status)//载入成功那么根据url缓存起来~ 
 }; 
 x.send(p||''); 
 return x 
 } 
}({}); 

加载css文件的话就简单了,因为不需要多次回调、只需确保样式载入过不多次加载即可。直接用字符串保存载入过的url,下次加载时做一下判断即可。
代码在http://i.mouto.org/c.js 的37行 $.lcss

关于多说评论 以及 缓存外部数据到博客(定时更新

妹blog在企划是就在纠结,评论部分怎么办。自己来做的话很多社区化的圈子没办法做除非自己写个社区化评论插件让一堆人用,权衡了之后还是只能选择用的人比较多的多说,没办法、社区化的圈子自己一定是无能为力,优化多说之前也写过文章http://mouto.org/53943 还被某博客盗文章改成他的不加来源。。。,无外乎上面提到的按需加载,直接利用多说的json API能不用它的js就不用。因为他的js实在是。。。TT不好用
简单总结下调教多说的一些记录吧,之前提到的只在需要多说评论时加载和不用多说的js实现显示最新评论在http://mouto.org/53943 有总结和给出代码就不再重复,
这里说下之前没总结过的。
一般利用多说都是每次打开页面时载入一次多说的js、遇到多说标记的div进行替换,在一般的每打开页面都刷新的网页上这样没什么太大问题包含且不只 速度慢、载入资源多、影响页面渲染、载入过程难看、影响其他资源载入,但是在ajax加载文章的情况下自带的js根本无法工作T
T 给多说提建议人家闲烦:我这就不提供这种、怎么就你需要呢?没必要,等更新吧。 嗯,这就是多说。基本就是这个意思。

为了能让ajax调用的情况下不重复载入多说肿胀的js 也能加载评论框的代码,提前准备好多说的div然后需要载入时运行

DUOSHUO.EmbedThread('.ds-thread'); 

评论部分先这样应付。等有时间把多说的js重写

继续优化多说 最新评论 和 最新访客

接下来是继续优化之前优化过的显示最新评论 和 显示最新访客
即使直接调用多说的json,依旧慢T_T 多说的后端不知道是如何实现的居然能做到如此慢。慢。慢。慢。

为了追求速度,用服务器定时缓存多说的json到本地进行静态化缓存。
提供一下php的代码参考

<?php 
function get($i,$t=60){ 
 $c=curl_init(); 
 curl_setopt($c,CURLOPT_URL,$i); 
 curl_setopt($c,CURLOPT_TIMEOUT,$t); 
 curl_setopt($c,CURLOPT_RETURNTRANSFER,TRUE); 
 $f=curl_exec($c); 
 return $f; 
} 

file_put_contents(‘写入的json文件名.json’,get('http://你的多说id.duoshuo.com/api/sites/listRecentPosts.json?show_admin=是否显示管理员评论(0or1)&show_title=是否显示标题(0or1)&excerpt_length=字符数限制&num_items=加载的最新评论数量')); 

定时运行的话,SAE BAE都有类似的
SAE BAE之类的Cron可以参考 http://sae.sina.com.cn/?m=devcenter&catId=195

如果托管的环境没有定时运行服务提供,找时间总结下身边人用过的各种黑科技OwQ

统一图标

老生常谈,无非什么 CSS雪碧。妹blog在企划之初 计划全站只用一套ICON在各处,也算是优化里面的一步吧

博客使用图像托管

一般玩blog的图像基本都是放在其他一些图像托管上,节省流量、加快访问速度。
妹blog也不例外,既然在国内当然要用本土服务。

没有外链限制、流量限制、没有传图限制、可以没有水印、提供不同尺寸、提供压缩、各地CDN...

哈哈哈这不就是在说新浪微博么OwQ

配合之前写的 http://disu.sinaapp.com/ 偷揉图床API 还算好用OwQ

备上案走国内路线。。。

hostker对于已备案的域名可以不用走香港路线,之前一直不知道T_T 换成国内一下速度提升好多OAQ明显在凑数。

差不多就是这些,还有不少细节上的等下次感觉可以分享的时候再总结吧。好久没有打这么多字了,遇到什么问题评论和QQ之类的联系我都可以OwQ