两个激进的前端优化手段

连续发了几篇纯后端的文章,来点老本行有关的东东。昨天实现了本博客的ping server之后,按计划今天应该写完ping client的。结果中午装IE9,体验新版develop toolbar时,无意中发现我的博客请求数好多,这对一个搞了这么多年前端的人来说太丢人了,话不多说,马上来优化。

首先合并css和js,这没什么好讲的,写个py脚本自动合并文件,再调下yui压缩就行了。图片资源就有点无语了,我这不起眼的博客皮肤居然用到20个多平均不到1kb的小图,作者够懒的。当然这皮肤不是我写的哈,看最底部的版权就知道。

既然是玩自己的博客程序,当然要发挥可以随意折腾的优势。除了拼大图之外,一个可行的方案是把图片弄成DataURI/MHTML放进css里,大家很早就开始这样玩了。前段时间我也写过一个py脚本来实现这个功能,因为有风险还没在项目中采用,正好拿来试试。跑完脚本后,背景图片都替换成了下面这样的:

.comments-list div.alt { background: #e1f4fc url(../img/comments-list-alt-bkg.png) no-repeat left top; padding-top: 40px; border: none; margin-bottom: 25px;}
=>
.comments-list div.alt { background: #e1f4fc url(data:image/png;base64,iVBORw乱七八糟一堆乱码SuQmCC) no-repeat left top; padding-top: 40px; border: none; margin-bottom: 25px;*background-image:url(mhtml:http://www.imququ.com/static/blogs/css/style.min.css!13);}

原理和具体怎么实现就不贴了,网上一大堆。需要注意的几点:1、不要忘记最后一个分隔符后的“--”;2、引用mhtml文件一定要用绝对路径;3、要先yui压缩再编图片别弄反了,为什么呢自己想。

搞定资源连接数后,还有一点极其不爽。Ctrl+U看下,源码里大段的换行和tab,非常的不美观。这问题在模板输出页面时很普遍,smarty提供了strip去多余的空白,django有类似的spaceless。问题是这些标记要自己找合适的位置去添加,strip范围太大容易出问题,我这么懒当然不想一个个加。于是,就有了下面的方案。

统一拦截response,对content做html语法分析,去掉不想要的内容,再拼装起来输出,这就一劳永逸了。除了空白之外还有一些属性什么的也可以去掉,详情可以看Miller同学这篇HTML优化(链接已失效),非常全面,而且按推荐与否做了归类。

得益于django高端的中间件思想,这个过程实现出来差不多就下面几行:

class CompressHtmlMiddleware(object):
    def process_response(self, request, response):
        if request.GET.get('compress_html', '') == '1': #根据url参数判断是否开启压缩
            parser = HtmlParser()
            parser.feed(response.content)
            response.content = parser.output()
        return response

这里用到的HtmlParser是我之前基于SGMLParser写的一段代码,除了去空白换行,还有几个额外功能。写得实在是烂就不献丑了。贴几个配置项,大概就明白了:

#可以删除的闭合标签
remove_endtag = ["html", "body", "colgroup", "thead", "tr", "tbody", "td", "p", "dt", "dd", "li", "option", "tfoot"] 

#可以删除属性值的属性
token_only_name = ['disabled','selected','checked', 'readonly', 'multiple']

#可以删除的标签默认属性(空属性全部去掉)
token_def_val = { 
    'link' : { 'media' : 'screen' },
    'input' : { 'type' : 'text' },
    'form' : { 'method' : 'get' },
    'script' : { 'type' : 'text/javascript' }
}

可以看出,li、body、html什么的结束符都被干掉了;属性值只要没有特殊符号,两端的引号也不要了。这是一个要速度不要标准的方案。

总结下,DataURI/MHTML的方案,追求最少的连接数,却导致css文件变大不少;HTML激进压缩为了使代码内容最少,放弃标准并增加了客户端解析的难度。自己的博客怎么玩都可以,实际项目中值不值得这样去做,就要具体问题具体分析了。

本文链接:参与评论 »

--EOF--

提醒:本文最后更新于 2092 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments