两个激进的前端优化手段

❗ 本文最后更新于 4999 天前，文中所描述的信息可能已发生改变，请谨慎使用。

连续发了几篇纯后端的文章，来点老本行有关的东东。昨天实现了本博客的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激进压缩为了使代码内容最少，放弃标准并增加了客户端解析的难度。自己的博客怎么玩都可以，实际项目中值不值得这样去做，就要具体问题具体分析了。

本文链接：https://imququ.com/post/wpo.html，参与评论 »

--EOF--

发表于 2011-03-16 01:12:48，并被添加「性能优化」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »

JerryQu 的博客

两个激进的前端优化手段

Comments