两个激进的前端优化手段

发表于 5年以前 | 总阅读数：1683 次

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

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

既然是玩自己的博客程序，当然要发挥可以随意折腾的优势。除了拼大图之外，一个可行的方案是把图片弄成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激进压缩为了使代码内容最少，放弃标准并增加了客户端解析的难度。自己的博客怎么玩都可以，实际项目中值不值得这样去做，就要具体问题具体分析了。