Yahoo!曾经针对网站速度体验提出了34条宝贵的准则《Best Practices for Speeding Up Your Web Site》，而Yslow正是按照这些准则，评测一个网站在速度体验上的优化程度的Firefox插件，将34条精简为更加直观的13条，并针对每一条给出从F~A的评分以及最终的总分。

当然从评测得到的只能是一个分数以及建议，如何改进还是要靠自己，这里要谈的就是实实在在的如何针对每一条进行优化：

1. Make fewer HTTP requests / 减少Http请求数

一个网页不可避免的要引入大量的外部文件：Javascript、css、背景图片……由于Http协议的无状态性，用户的每一次访问，都会重新向服务器请求所有文件，而大量Http请求的累加，正是影响网站速度的最主要原因。

所以这里的解决方法只有一个：合并。最理想的情况莫过于一个网页只包含一个css，一个js，一张背景图。

合并Js和Css文件很好理解，背景图片要怎么合并？这里采用的主要方法是CSS Sprites，简单说就是把所有的图片拼接成一张大图，在不同的Css里指定背景图坐标来显示不同图片。具体可以参考Dave Shea的Image Slicing’s Kiss of Death一文，还有网站提供了在线的CSS Sprites服务，只需要上传小图片，就可以获得拼接后的大图以及相应坐标。

不过在当前越来越多动辄包含10余个文件的开发框架面前，减少Http请求数也变得越来越难。一直都认为所谓框架，给出的应该是一整套完善的开发思想，从服务器配置到数据库设计甚至是到UI体验乃至SEO，但现在很多Framework总是各自为战，后台与前端脱节，只在自己的一片领域里提供一定程度上的方便，没有考虑到最终产品的统合，甚至连基本的代码侵入性问题没有处理好（这里点名批评dojo，恨不得在所有的html标签上印上dojo的章子），不能不说是一种遗憾。

所以如果网站中采用框架的话，在框架的选择面前，建议多采用轻量级，侵入性低的框架，也是为了日后产品的优化维护着想。

2. Use a CDN / 使用CDN

CDN(Content delivery network)内容分发网络，能够智能根据网络节点情况选择服务节点，大型网站部署时尤为重要。不过这属于硬件级别的解决方案，我们没有条件配置CDN的时候，可以自行设置忽略这一项评测。

在Firefox地址栏键入about:config，然后新建一个字符串，名称为extensions.firebug.yslow.cdnHostnames，值为所要评测网站的域名，多个设置用逗号分隔。例如我的设置就是allo.ave7.net,localhost

3. Add an Expires header / 为文件头指定Expires

Expires是浏览器Cache机制的一部分，浏览器的缓存取决于Header中的四个值： Cache-Control， Expires， Last-Modified， ETag。这个项目的考评主要针对Cache-Control和Expires。

具体的Cache原理不是本文所涉及的，有兴趣的同学可以看看Caching Tutorial一文。为了优化这个选项，我们所要做的是对站内所有的文件有针对性的设置Cache-Control和Expires，这里基于Apache主机举例：

首先开启mod_header模块，在httpd.conf中取消

LoadModule headers_module modules/mod_headers.so

一行的注释。然后对于图片，文件等不会经常更新的文件设置一个比较长的过期时间

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

对于Cache-Control可以设置的更加细致一些，这里我对图片，文件设置了1周，对XML，TXT设置了5小时，对html和php文件只设置了1小时。

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=18000, public, must-revalidate"
</FilesMatch>

<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=3600, must-revalidate"
</FilesMatch>

另外Expires也可以通过开启mod_expires来实现，这里不再举例。

4. Gzip components / 启用Gzip压缩

HTTP/1.1支持接收服务器端经过Gzip压缩的数据，在Apache2中，可以开启mod_deflate实现。

同样去掉注释

LoadModule deflate_module modules/mod_deflate.so

然后对所有文本类文件添加Gzip处理

DeflateCompressionLevel 3
<FilesMatch "\.(php|htm|html|js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>

5. Put CSS at the top / 将Css文件放在头部

很好理解的一条，主要是为了避免最后加载Css引起的浏览器白屏，改善用户体验。

6. Put JS at the bottom / 将Js文件放在底部

同样很容易理解，为了让DOM先行加载。

7. Avoid CSS expressions / 避免CSS expressions

CSS expressions可以轻易的引起浏览器假死，也不在W3C规范内，不只是避免，最好完全不要用。

8. Make JS and CSS external / 将Js和Css文件独立

将Js和Css文件单独做成外部文件加载，一则可以功能复用，二则可以生成缓存，当然这一条和第一条要互相参照找出最好的解决方案才是。

9. Reduce DNS lookups / 减少DNS查询

外部文件分散于多个服务器，连接每台服务器都会做一次DNS查询，这一条是针对多服务器的部署。

10. Minify JS / 压缩Js文件

压缩Js文件，Yahoo!官方推荐的工具是JSMin和YUI Compressor。

11. Avoid redirects / 避免重定向

每一次的重定向都会重新发送Header请求。所以在Apache下，无比强大的mod_rewrite是必须要学的。

12. Remove duplicate scripts / 移除重复的脚本

开发中没有规划好，会出现页面中重复引用一个文件的情况，IE中即便是重复引用也会重新向服务器发送一次请求。

13. Configure ETags / 配置ETags

在第三条中已经对浏览器缓存机制中的Cache-Control和Expires进行了配置，这一条评测的是另外两个：Last-Modified和ETag

简单的说，即使设置了文件的期限，浏览器在访问资源时往往会因为Last-Modified和ETag而重新下载整个资源，所以简单的做法是关闭Last-Modified和ETag

在Apache中做如下配置

FileETag None

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
</FilesMatch>

最后看看优化后的成果

利用Google AJAX Search可以很快的建立起一个本地搜索，关于构建的方法，Google docs里已经有详细的讲述，也并非本文的重点。

利用Google的函数库，不可避免的要嵌入远端文件，数据样式也是经过处理後的。有些时候，由于种种条件限制，我们需要更加灵活轻便的解决方案，这时候就需要借助Google Ajax Search中的Jsonp协议。

最简单的Google Jsonp搜索

在Flash and other Non-Javascript Environments一节中，可以了解到，如果对

http://ajax.googleapis.com/ajax/services/search/web?v=1.0

发送Get请求，就能返回相应的Jsonp格式数据，比起标准API来，这里的数据不携带任何冗余信息，可以很方便的处理和调用。例如使用JQuery，短短几行代码就可以实现Ajax的搜索引擎。

首先当然要有一个搜索表单

<form class="googlesearch" action="http://www.google.com/search" onsubmit="search(this);return false;">
	<div id="search_box">
			<input id="searchvalue" value="" name="q" />
			<input id="searchsubmit" type="submit" value="搜索" />
	</div>
</form>

然后是表单提交时调用的Js函数

function search(form){
	$.ajax({
		url:'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=' + encodeURIComponent(form.q.value),
		dataType : 'jsonp',
		success: function(json){
			var res = '';
			for(var i in json.responseData.results){
				for(var j in json.responseData.results[i]){
					res = res + j + ':' + json.responseData.results[i][j] + "\n";
				}
			}
			alert(res);
		}
	});
}

可以查看做好的Demo，点击搜索，会弹出google的返回的搜索结果。

最简单的Google Jsonp本地搜索

仅仅这些，还不能满足一个构成本地搜索的条件。在标准API中，可以通过

var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("allo.ave7.net");
siteSearch.setUserDefinedClassSuffix("siteSearch");

来实现对特定域名"allo.ave7.net"的检索，jsonp中怎么实现相同的功能？只能通过增加查询关键词"site:allo.ave7.net"来达到目的。即在上文的url部分改为

url:'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=' + encodeURIComponent(form.q.value) + '+site%3Aallo.ave7.net',

来看看最简单的本地搜索：Demo。在这个Demo里，所有检索出的数据都限定在域名allo.ave7.net里。

更多问题

就像前面的本地搜索一样，开发往往要需要很多可以设置的参数，比起标准API来，Jsonp只能通过url传达设定，能预设的参数不够丰富。具体的参数可以参看Flash and other Non-Javascript Environments一节，需要注意的一些问题有：

• 分页的实现：Jsonp只返回前4页以及总记录数，事实上如果发送第四页以后的请求，仍然能够获得正确的回应，只是分页函数要自己写了。
• 每页的条目数：这个设定比较苛刻，只能通过rsz=small/large来获得每页4条/8条的数据，可能是Jsonp最不方便之处了。
• 结果的过滤：Google Web搜索会自动过滤一些可能重复的项目，留意观察一下google的搜索参数，是通过filter=0/1开关的。但在Jsonp的响应中，对第一页的请求，过滤是关闭的，第二页以后则又自动打开了。不算是大问题，但会让分页的现实变得很奇怪。虽然文档中提到可以通过safe=active/moderate/off来改变过滤，但写入这个参数后并没有影响到检索结果。希望知情人士告知问题所在。

最后将allo.ave7.net的本地搜索单独抽出做成Demo，也可以下载本次的全部源代码。

为什么要有七街？

当初也曾妄想过借这一块地方挖挖金子，或许也能像疼逊性浪那样一飞冲天，功成名就。但事实上我们做不到，高访问量伴随而来的就是乌烟瘴气的环境。

我是个很恋旧的人，直至现在，也仍然在怀念网络刚刚兴起时的互联网环境，那个时候很多小白，很多菜鸟，当然我也是其中之一，但大家至少都会心存感激，互相尊重。

而如今网络几乎就是我生活的一部分，在这个脑残体、DDD横飞的年代，我无力改变大环境，也无力改变人心。但至少，能自己开垦出一亩三分地，土地平旷，屋舍俨然，阡陌交通，鸡犬相闻。开辟一块干净舒适的地方，让自己和朋友每天能心情愉快的交流，此为七街关闭注册以来的唯一初衷。

现在的七街有什么？

1. 品味和个性。末日扉页、每日一歌、同人音乐、七街志……都能说明七街有自己独特的品味和受众群体，我们无需迎合大众，而是要更加张扬自己的个性。
2. 研发实力。有强大程序员葛阁坐镇，不需要借用任何现有的程序，不受任何制约，只要是好的Idea都可以转换为实实在在的程序。
3. 团队和TeamWork。某年某月某日某人灵光一现，20天之后一本100页从零开始完全原创的网络杂志就已经摆在了面前，没有任何约束，也没有任何金钱和荣誉作为报酬，但每个人都尽己所能的贡献了力量，没有听到一声不情愿或者抱怨。七街有自己的团队，只要我们想做，就一定能做到。

我想把七街建设成什么样？

1.包容性。与现有的各种网络流行服务相整合。例如我来七街之前，已经有了自己的Blog，自己的网络硬盘，聊天工具等等，可以通过简单输入用户ID，将自己已有的网络生活与七街想结合，并可以无缝过渡到七街提供的更优秀的服务。

这些服务可能包括：

• 一个经过改造的Wordpress Blog托管（用户单点登录，简单聚合，自动升级更新，附送七街二级域名），或者是一个可高度自定义的个人主页
• 一个兼容饭否、twitter等微博客并具备聊天吐槽功能的服务
• 一个与Lastfm交互，记录用户音乐喜好，能从freedb自动获得歌曲CD信息，以及歌词信息，用户间可以交流下载的音乐社区系统
• 一个与各大书站、豆瓣等交互，能自动采集信息，wiki方式的图书交流社区
• 一个用于专题建设以及资料整理的网站构建系统

2.以人为本。而是通过程序本身对用户的行为进行引导，避免繁琐的规章制度。用户所有的数据精简为两个参数：贡献度和索取度，并由此赋予用户相应的权限。

口 订了志方あきこ的新作PCゲーム「うみねこのなく頃に」テーマソング

• 
• 2008/8/15 （コミケ初日先行発売）
• 品番：KNIL-0003
• 定価（税込） 1,500円

想不到志方あきこ会参与寒蝉的相关物，清冷妖异的试听与寒蝉诡异的世界观确实是相得益彰，大期待。

× 还以为只有央视会拍主旋律，没想到「利家と松」比之是丝毫不弱啊，本剧详细讲述了与历史形象谬之千里的高大全主角前田利家的光辉一生。其实想想也明白，能在几大势力中左右逢源并渔翁得利，最终攀到权利顶峰的人，又怎么可能为了坚持原则不惜牺牲一切。更不用说非但没提历史上利家娶了五个侧室，反而大谈其对爱情的忠贞。

不过反町隆史的織田信長还是很出彩的，对照正在播放的「ロト6で3億2千万当てた男」里唯唯诺诺的形象尤其欢乐。

△ 貌似已经很久没有写过轻松点的东西了，整天迷惘的纠结于那些有所谓的和无所谓的，或者YY一些有意义和没意义的，忽然觉得自己也有些不认识自己了。

恩，应该改变些什么了。

回到正题，之前的简单REST实现只能算是一个模型，很难实用到真正的开发中去，瓶颈在于模型中所有远端服务器的数据都先读入到Web服务器，通过PHP脚本处理后再返回客户端。这是一个常规的也是通用的解决方案，因为远端服务器有可能做各种各样的功能限制：检测用户身份，限制访问来源等等，而这些限制都可以通过强大的Curl进行破解。

但终究考虑到服务器资源的占用，这样的实现是不切实际的，既然Picasa已经提供了足够丰富的接口，那么用纯Javascript也能实现近似的效果。当然这样一来作为完全客户端的实现，也就和REST没有任何关系了，所以作为番外篇，仅供参考。

说了这么多，看看完全客户端的实现能做出什么东西来：点击查看DEMO

Demo中首先显示图片未加载的loading，当图片数据从Picasa加载之后，Loading画面被替换为实际图像的缩略图，并且点击会有Lightbox的特效。

首先通过Url_Rewrite将所有的请求转发到loading图片

RewriteEngine On
RewriteRule   ^photo\/picasa\/.* loading.gif

而完成所有页面效果的，只需要14行代码：

$("img").each(function(){
	var src = $(this).attr("src").split("/");
	var aim = $(this);
	$.ajax({
		url:  "http://picasaweb.google.com/data/entry/api/user/" + src[0] + '/albumid/' + src[1] + '/photoid/' + src[2] + '?alt=json',
		dataType : 'jsonp',
		success: function(json){
			var id = 'photo' + src[1] + src[2];
			var title = json.entry.summary.$t ? json.entry.summary.$t : json.entry.title.$t;
			aim.attr("alt",title).attr("src",json.entry.media$group.media$thumbnail[1].url).wrap('<a class="thickbox" id="' + id + '" href="'+ json.entry.media$group.media$content[0].url + '?imgmax=800' + '" rel="album_' + src[1] + '" title="' + title + '"></a>');
			tb_init('#'+ id); //apply thickbox effact to this photo
		}
	});
});

大致的实现与完结篇里的代码区别不大，但这里却是完全依赖于Picasa强大API的：

• Picasa支持Jsonp！通过向API设置alt=json可以取得Json格式数据，尽管没有在文档中找到关于可以返回Json数据的描述，但这确确实实是可行的。
• Picasa支持外链！准确的说Picasa对于缩略图的外链是没有限制的，而这里所谓的缩略图，事实上能支持最高达800像素规格的图片（参看Picasa Web Albums query parameters reference），对于网页图片浏览来说，已经足够了。

基于以上两点，可以简单通过Js，就能搭建起各种Picasa的扩展应用，同理也可以适用到Flickr以及其他提供Jsonp接口的网络相册。不过这个基于Js的方案也有很大缺点，如果用户禁用了Javascript，就什么也看不到了。

最后仍然是本次实现的Code Download

• 基于Picasa、PHP、AJAX的图片REST架构的简单实现(1)
• 基于Picasa、PHP、AJAX的图片REST架构的简单实现(2)
• 基于Picasa、PHP、AJAX的图片REST架构的简单实现(3)

现在，服务器端的架设终于全部结束了，我们可以向服务器端同一个URL发送不同的Header请求，从而得到不同的反馈，REST简单说来也就是这么一回事。但很遗憾，URL只有一个，而且现在的浏览器并没有智能到可以通过超链接携带Header信息。我们只能通过附加手段达到目的，这个附加手段毫无疑问就是最后一位主角：Ajax。

Step.3 客户端通过Ajax发送不同的Header请求

准确的说我们利用的是XMLHttpRequest对象，来对服务器发送不同的header请求。在W3C的定义中，不仅能够找到GET、POST，XMLHttpRequest支持的header类型一共包括

• GET
• POST
• HEAD
• PUT
• DELETE
• OPTIONS

这些Methods早在1999年就被定义于RFC2616里，到今天终于有了用武之地，真是可喜可贺。

var client = new XMLHttpRequest();
client.open("GET", "test.txt", true);
client.send();

这就是一个最简单的通过XMLHttpRequest发送请求的例子，同理可以将GET替换为其他Method。如果再加上监听状态变化的readystatechange，以及获得反馈的responseXXX，你会发现Ajax原来就是这么一回事。

这里为了使演示更加简单，使用JQuery的Ajax应用，以下是客户端代码:

	$("img").each(function(){
		var src = $(this).attr("src");
		var aim = $(this);
		$.ajax({
			type: "GET",
			url: src,
			dataType : 'json',
			success: function(json){
				var title= "<p>这是一张名为「" + json.title + "」的相片<br />拍摄于：" + json.date + "<br />你可以访问：" + json.full + "来获得这张照片的全图。</p>";
				aim.after(title);
				aim.attr("alt",json.title);
			}
		});
		return false;
	});

这段代码遍历页面的所有图片，然后对这张图片的URL发送Get请求。发送的请求被我们编写的服务器端接收并取得对应的Json数据并返回，最终在客户端显示出来。

至此，这个最简单的图片REST架构便完成了，或许花这么大功夫最终只显示出一张图片来，还称之为构架，实在是小题大作。但最终能剔除所有冗余信息并实现HTML代码的最简化，我自己是玩的不亦乐乎的。

最后附上全部代码下载，也可以在线查看。

付录：HTTP-Header最高绝技之翻墙术

其实在国内有很多AV国的网站上不了，并不是GFW的功劳，而网站为了避免拦截正常的访问，也很少会去封IP段。那么究竟为什么很多XX站不能访问呢，在HTTP-Header中，有一个叫Accept-Language的字段负责描述用户的系统语言，国内的Accept-Language值一般都是zh-cn,zh，AV国的很多网站都是通过识别这个值来区别用户。

那么很简单，更改Accept-Language伪装成AV国用户就可以了。

• Firefox下，地址栏访问about:config，然后搜索intl.accept_languages，将值由zh-cn,zh改为ja即可。
• IE下，工具——Internet选项——语言——将列表里的语言全部删除即可。

恩恩，这也只是一个技术问题，大家回去自行研究吧。

之前我们从远端获得了图片信息，但是这些和REST还是不沾边的。访问同一个URL，要想获得不同的信息，以目前的软硬件条件，最好的实现方法还是对HTTP Headers进行处理。所以这次的话题是——

Step.2 服务器端接受不同的HTTP Headers返回不同的信息

既然是服务器端，我们仍然采用PHP实现。

PHP对于Header信息的处理是很丰富的，常见的Header都已经存放在预定义变量$_SERVER中了。如果你对什么是Header还没有概念，可以在Firefox中安装一个Live HTTP Headers自行体验一下。

现在问题是：如此之多的Header，到底选择哪个或者哪几个来进行分析？用户的客户端语言，浏览器，IP等等，都是可以进行发挥的。这里为了简单说明问题，选择REQUEST_METHOD，HTTP_REFERER以及HTTP_X_REQUESTED_WITH来进行演示。

简单说明这三个参数：

• REQUEST_METHOD是页面的请求方法，也是目前REST实现的核心。
• HTTP_REFERER包含了用户的访问来源，一般是用户前一个访问的URL
• HTTP_X_REQUESTED_WITH则代表这是一个Xmlhttprequest请求，可以简单的看成是Ajax请求。

以下就是个人的随意发挥了，我所约定的有效服务器反馈包括：

• 因为不涉及更新等操作，页面的请求方法只限于GET
• 如果HTTP_REFERER存在，即说明用户在网页中或者通过链接点击访问照片，服务器返回照片的缩略图。
• 如果HTTP_REFERER不存在，说明用户直接通过URL访问图片，服务器返回照片的全图。
• 如果HTTP_X_REQUESTED_WITH存在，则说明用户在通过Ajax访问图片，这时返回一个Json格式的照片信息

形象一点用实例说明的话：

点击链接会看到照片的缩略图，将这张照片的地址粘贴到浏览器地址栏直接访问的话，会看到照片的大图。而在Demo中，点击下面的按钮，则可以看到发送Ajax请求到同一个地址时的反馈。

最后还是附上服务器端的代码

require_once 'XML/Unserializer.php';

$Unserializer = &new XML_Unserializer();
$options = array('parseAttributes'   => true);
$Unserializer->setOptions($options);

if($userid && $albumid && $photoid) {
	$xml = "http://picasaweb.google.com/data/feed/api/user/".$_GET['userid']."/albumid/".$_GET['albumid']."/photoid/".$_GET['photoid'];
	$status = $Unserializer->unserialize($xml,true);
	//XML文件解析出错, 报错并退出
	if (PEAR::isError($status)) {
	   die($status->getMessage());
	   exit;
	}
	//如果是一个AJAX访问，返回JSON描述
	elseif($_SERVER['REQUEST_METHOD'] == 'GET' && $_SERVER['HTTP_X_REQUESTED_WITH']){
		$pic = $Unserializer->getUnserializedData();
		$part = explode('.',$pic['media:group']['media:content']['url']);
		$json = json_encode(array(
			'title' => $pic['media:group']['media:description']['_content'] ? $pic['media:group']['media:description']['_content'] : $pic['title']['_content'],
			'date' => gmdate("F d Y H:i:s",strtotime($pic['updated'])),
			'ext' => $part[count($part) -1],
			'full' => $pic['media:group']['media:content']['url']
		));
		echo "($json)";
	}
	//HTTP_REFERER有无的区分
	elseif($_SERVER['REQUEST_METHOD'] == 'GET' && $_SERVER['HTTP_REFERER']) {
		$pic = $Unserializer->getUnserializedData();
		header("Content-Type: image/jpeg");
		curl_exec(curl_init($pic['icon']));
	}
	elseif($_SERVER['REQUEST_METHOD'] == 'GET' && !$_SERVER['HTTP_REFERER']) {
		$pic = $Unserializer->getUnserializedData();
		header("Content-Type: ".$pic['media:group']['media:content']['type']);
		curl_exec(curl_init($pic['media:group']['media:content']['url']));
	}
}

1. 语法上综合了wikipedia和puki wiki。
2. 支持html标记插入。
3. 生成的代码通过W3C Strict验证。
4. 即使不做解析，也是一篇表意良好，格式工整的text文档，而不像很多乍看上去如天书一般的Wiki语法
5. 解析速度比Text_wiki快
6. 加入了很多方便的特殊标记。

目前只是发布前的演示，正式版将附加在Framework中发布，有兴趣的同学可以索取源代码。那么，实验开始：

Title Test

Wiki代码：

=h1=
==h2==
===h3===
====h4====
=====h5=====
======h6======
=======h7=======

转换结果：

h1

h2

h3

h4

h5

h6

=h7=

Table Test

Wiki代码：

! 1 ! 2 ! 3 ! 4 ! 5 !
! 1 | 2 | 3 | 4 | 5 |
! 1  2 !| 3 | 4 | 5 |
! 1  2 || 3 | 4 | 5 |
! 1 | 2  3 || 4 | 5 |
! 1 | 2 | 3  4 || 5 |
! 1 | 2 | 3 | 4  5 ||
! 1  2  3 !!| 4 | 5 |
! 1 | 2  3  4 ||| 5 |
! 1 | 2 | 3  4  5 |||
! 1  2  3  4 !!!| 5 |
! 1 | 2  3  4  5 ||||
! 1  2  3  4  5 |||||

! ---------- ! ----------- ! ---------- !
!left        |        right|   middle   |

转换结果：

Paragraph Test

Wiki代码：

//Remark will not be parse
This is a normal paragraph.

This is another normal paragraph.

This is a paragraph with newline of br mark.
This is a paragraph with newline of br mark.
This is a paragraph with newline of br mark.

转换结果：

This is a normal paragraph.

This is another normal paragraph.

This is a paragraph with newline of br mark.
This is a paragraph with newline of br mark.
This is a paragraph with newline of br mark.

Blockquote Test

Wiki代码：

> Blockquote Level1
>> Blockquote Level2
>> Blockquote Level2
>>> Blockquote Level3
>>> Blockquote Level3

转换结果：

Blockquote Level1

Blockquote Level2

Blockquote Level2

Blockquote Level3

Blockquote Level3

List Test

Wiki代码：

* ul list level1
** ul list level2
** ul list level2
*** ul list level3
**** ul list level4
**** ul list level4
* ul list level1
** ul list level2
* ul list level1

# ol list level1
## ol list level2
## ol list level2
### ol list level3
#### ol list level4
#### ol list level4
# ol list level1
## ol list level2
# ol list level1

转换结果：

• ul list level1
  • ul list level2
  • ul list level2
    • ul list level3
      • ul list level4
      • ul list level4
• ul list level1
  • ul list level2
• ul list level1

1. ol list level1
   1. ol list level2
   2. ol list level2
      1. ol list level3
         1. ol list level4
         2. ol list level4
2. ol list level1
   1. ol list level2
3. ol list level1

Advance Test

Wiki代码：

Wiki Parser can identify a url [http://allo.ave7.net/] or an image [http://www.ave7.net/logo.gif] with [http://allo.ave7.net/|account].
You can also use <i><b>Html Marks</b></i> inline.
How forcibly specify this is a url [link:http://www.ave7.net/logo.gif] or an image 
[img:http://allo.ave7.net/photo/picasa/allovince/5220926002522558673/5220926248939178194|photo].

转换结果：

Wiki Parser can identify a url http://allo.ave7.net/ or an image with account.
You can also use Html Marks inline.
How forcibly specify this is a url http://www.ave7.net/logo.gif or an image
.

Vim不愧是地球上最强的文本编辑器之一（不加之一恐怕Emacs用户会有意见- -），用Vim就像用Foobar一样，必须先调教一番，使之很好的符合自己的习惯才能达到最高的效率。

之前（前情提要：非中文系统下Gvim中文化解决方法）提到了Vim在其他语言Win32平台下的中文化实现，这里再做一些补充修订：

多语言平台下的中文化实现

首先是编码设置

"设置内核为UTF-8
set enc=utf-8
"设置解码顺序,这个顺序经测试可以很好的识别UTF-8,JIS,GBK
set fencs=utf-8,ucs-bom,shift-jis,gb18030,gbk,gb2312,cp936

然后设置界面

"语言设置
set langmenu=zh_CN.UTF-8
language message zh_CN.UTF-8
set guifont=NSimSun:h10
set helplang=cn
source $VIMRUNTIME/delmenu.vim
source $VIMRUNTIME/menu.vim

注意这里需要下载Vim的中文文档

IME输入法切换设置

在Win32环境下，Vim总是会自作聪明的自动切换到IME输入法。如果想要关闭自动切换，只需要设置

set iminsert=0 imsearch=0

即可，但由于Vim提供了判断IME输入是否打开的multi_byte_ime，我们就可以更加智能的加一些处理

if has('multi_byte_ime')
	"未开启IME时光标背景色
	hi Cursor guifg=bg guibg=Orange gui=NONE
	"开启IME时光标背景色
	hi CursorIM guifg=NONE guibg=Skyblue gui=NONE
	" 关闭Vim的自动切换IME输入法(插入模式和检索模式)
	set iminsert=0 imsearch=0
	" 插入模式输入法状态未被记录时，默认关闭IME
	"inoremap <silent> <ESC> <ESC>:set iminsert=0<CR>
endif

以上设置可以记忆IME开启状态，并用不同的光标颜色提示当前输入法

代码自动补全

实现代码补全需要插件Ctags,将下载的Ctags解压到任意文件夹，然后将Ctags目录追加到环境变量里，之后我们进入项目所在根目录，运行Ctags -R，Ctags会解析所有项目文件并生成一个类似索引的tags文件，然后Vim运行补全时会从tags文件中取得数据。

当然如果更新了类函数定义，也要再次运行Ctags重新生成一次索引，这没有Eclipse那样华丽而且智能，但相比较那些专用IDE的体积和启动速度，Vim的表现仍然非常出色。

默认的代码补全快捷键是Ctrl+X Ctrl+O，可以使用插件SuperTab将快捷键与Tab键合并

自定义快捷键

Normal模式下可以很方便的用nmap设定自定义快捷键，不过可惜的是键盘上的键位也已经被占用的七七八八了。仅列举自己常用的两个作为例子：

nmap mm :%s/\r//g<cr>

双击m键可以删除Win下生成的多余换行符CR（在Vim中可以看到蓝色的^M）

nmap tt :%s/^\([\s　]\+\)/    /g<cr>:%s/^更新时间.*\d$//g<cr>:%s/<a href.*<\/a>$//g<cr>:%s/\([\s　]*\n\)\+/\r\r/<cr>

这个就比较复杂一点，双击t键实现对在起点下载的TXT文本进行排版并删除里面多余的广告等。

最终效果截图

至懒人

好吧，贴出自己的配置，如果只想复制粘贴的同学可以各取所需，不过注意配置对应的插件

set nocompatible
source $VIMRUNTIME/vimrc_example.vim
source $VIMRUNTIME/mswin.vim
behave mswin

"设置工作目录为当前编辑文件的目录
set bsdir=buffer
set autochdir

"编码设置
set enc=utf-8
set fencs=utf-8,ucs-bom,shift-jis,gb18030,gbk,gb2312,cp936

"语言设置
set langmenu=zh_CN.UTF-8
language message zh_CN.UTF-8
set guifont=NSimSun:h10
set helplang=cn
source $VIMRUNTIME/delmenu.vim
source $VIMRUNTIME/menu.vim

"禁止生成临时文件
set nobackup

"搜索忽略大小写
set ignorecase 

"搜索逐字符高亮
set incsearch

"行内替换
set gdefault

"始终显示行号
set nu!

"Tab键的宽度
set shiftwidth=4
set tabstop=4

"配色方案
colorscheme rainbow_fruit

"输入法设置
if has('multi_byte_ime')
	"未开启IME时光标背景色
	hi Cursor guifg=bg guibg=Orange gui=NONE
	"开启IME时光标背景色
	hi CursorIM guifg=NONE guibg=Skyblue gui=NONE
	" 关闭Vim的自动切换IME输入法(插入模式和检索模式)
	set iminsert=0 imsearch=0
	" 插入模式输入法状态未被记录时，默认关闭IME
	"inoremap <silent> <ESC> <ESC>:set iminsert=0<CR>
endif

"自动缩进
set ai!

"与Windows共享剪贴板
set clipboard+=unnamed

"Ctags的默认索引(需要插件Ctags)
set tags=$VIMRUNTIME/tags
"添加类型检测
filetype plugin indent on
"智能补全
"set completeopt=longest,menu


"快捷键调用WinManager(需要插件WinManager)
let g:winManagerWindowLayout='FileExplorer'
nmap ff :WMToggle<cr>
nmap mm :%s/\r//g<cr>
"规范行首空格<cr>去除多余字符<cr>删除空白行<cr>规范行数
nmap tt :%s/^\([\s　]\+\)/    /g<cr>:%s/^更新时间.*\d$//g<cr>:%s/<a href.*<\/a>$//g<cr>:%s/\([\s　]*\n\)\+/\r\r/<cr>

"通过ctrl+方向键切换窗口(需要插件MiniBufExplorer)
let g:miniBufExplMapCTabSwitchBufs = 1
let g:miniBufExplMapWindowNavArrows = 1

至更懒的人

好吧，我放下载就是了…… 点击我试试本Blog新增的下载功能吧，下载后解压到D:根目录，将Ctags目录（D:\Vim\vim71\plugin\ctags）加入环境变量即可

安装，重启，试用……一个小时后我对Weave0.2的表现只有四个字可以形容：“惨不忍睹”。

首先是不友好，账户注册完毕到数据上传是完全没有问题的，但如果要下载同步数据，需要从邮件激活Weave服务，否则会一直提示连接服务器超时。基本的提示信息都起不到相应的向导作用，很难相信这是面向普通用户的产品。

然后是速度，Weave的同步不是像Google Browser Sync那样即时通信，而是退出FF后执行，而服务器又慢到不能忍，每次退出都要停顿30秒至数分钟，最可怕的是如果强行中断同步则会驻留一个 Firefox进程在内存中，真怀疑这不是官方插件，而是官方病毒- -|||

对于真正的同步功能也很难让人满意，用作测试的数据是1000个左右的书签，但同步过程中浏览器却严重拖慢，连正常的浏览都无法进行。不知道是服务器速度影响还是插件本身缺陷。

虽然Weave的野心很大，在预定开发的功能里还能看到插件同步等等让人浮想联翩的词汇，但在一个勉强能用的版本出现之前，需要同步功能的同学还是老老实实用FF2.0+Google Browser Sync吧

另外补充一个Firefox3 css hack之JQuery版

$.browser.mozilla && parseFloat($.browser.version) > 1.8

用js获得的FF3的版本并不是软件开发版本3.0，而是Gecko内核版本1.9，很有意思