2009-6
26

新版本Yslow 22项评分标准

类别: Xhtml/Css | 3,105 Views | 没有评论

对于一个WEB前端工作者来说，Yslow绝对是一款必不可少的性能优化工具，可以方便地查出是哪些因素影响了你的网页性能。
yshow

新版本的Yslow共有22条指标，比原来的多了9条。还可以自定义规则，新版本Yslow有三个内置的规则：V2、V1、小型站和博客，V2的指标最多，包括所有22项指标，而V1则只包括上一个版本的13条指标。你可以完全设置自己的规则，这样就可以比较灵活，也更客观实际的分析自己的网站。另外，还增加了一些网站的优化工具，比如Smush.it、JS Minified、 JS Beautified等等。

在这里我只列举一下新增的那9条指标了，其它的可以看另一篇网站优化——Yslow评分标准。由于是本人自行翻译的，如有错漏还请达人指出。

Make AJAX cacheable
设置AJAX的缓存。当前AJAX的应用越来越广泛，AJAX的信息读取是异步的，这也表示用户不一定会等待这异步的响应，为避免重复的AJAX请求，设置缓存是优化性能的一个好方法。

Use GET for AJAX requests
用GET获取AJAX请求。又是一条有关AJAX的。AJAX的传值可用GET跟POST，在这里建议使用的是GET。

Reduce the number of DOM elements
减少页面DOM节点。也就是讲究页面代码的简洁，一个复杂的页面不仅增大页面的体积，也会对JavaScript访问DOM元素产生影响。

Avoid HTTP 404 (Not Found) error
避免404错误页面的出现。这个应该不用怎么解释了，不管从服务器资源还是用户体验上来说，都是不好的。

Reduce cookie size
减少cookie的大小。cookie一般用于身份验证等用途，一般说来cookie被限制在4K以内，尽量控制 Cookie 的大小，不要塞入一些无用的信息。

Use cookie-free domains
使用域名无关性的Cookie。这里是有关静态服务器的问题，主要是指一些静态文件比如说图片、CSS等等，比如说YAHOO，他的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

Avoid AlphaImageLoader filter
避免AlphaImageLoader滤镜的使用。这个几乎都是用在IE6下解决PNG透明的问题上的。而为了实现此效果而牺牲的性能来说，是很不合算的。

Do not scale images in HTML
不要对图片进行缩放。也就是图片的实际大小大于他的显示必要，比如一个800*600的图片，而我们在页面上只显示的是400*300的大小，那么这便是一种服务器资源的浪费。

Make favicon small and cacheable
使图标尽可能小，并使用缓存。这里指的是favicon.ico了，设置favicon.ico缓存可以避免频繁的页面请求。

2009-6
15

简明的拼图游戏教程

类别: Flash/AS3 | 5,211 Views | 24条评论

想来想去，还是稍微写点东西吧，一来是想把自己的一些制作的思路与大家分享，二来也想请高手们点评一下。在这里把一些重点的部分详细说明一下，相信有点基础的朋友都能很快理解，心急点的朋友呢就直接跳到最后去看源码吧，呵呵。观看演示。

大体思路：载入图片、把图片分割、随机排列图片、鼠标点击事件、序列的比较判断是否结束。在这里只把一些关键的代码帖出来了，但不影响理解。
首先是加载图片，我们这里用的是外部载入，当然你也可以扩展一下做成可以多张图片选择的：

1
2
3
4
5

private function loadpic() {
	_loader = new Loader();
	_loader.load(new URLRequest("myphoto.jpg"));
	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoad);
}

接下来到了一个重点了，分割图片，这里应该会有很多种处理方法，我这里用的是Matrix控制背景图填充的方法来实现的。有更好的方法还望大家指出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

private function onImageLoad(event:Event):void {
	var bitmap:BitmapData = new BitmapData(_loader.width, _loader.height);
	var x_num:int=480/x_p;//每小块的宽
	var y_num:int=360/y_p;//每小块的高
	bitmap.draw(_loader);
	pic_box=new box_bg();
	pic_box.x=10;
	pic_box.y=10;
	addChild(pic_box);
	d_arr=new Array();//初始数组
	for (var i:int=0; i<x_p; i++) {
		for (var j:int=0; j<y_p; j++) {
		var matrix:Matrix = new Matrix();
		matrix.translate(-x_num * i,-y_num * j);//背景定位
		var block:Sprite = new Sprite();
		block.x=x_num * i;
		block.y=y_num * j;
		var temp_obj:Object={obj:block,b_x:block.x,b_y:block.y};
		d_arr.push(temp_obj);//存入初始数组，在这里把obj也存入，方便后面的比较。
		block.buttonMode=true;
		block.graphics.lineStyle();
		block.graphics.beginBitmapFill(bitmap, matrix);
		block.graphics.drawRect(0,0,x_num-1, y_num-1);//通过背景图填充的方式分割图片
		block.graphics.endFill();
		pic_box.addChild(block);
		}
	}
}

图片分割好了，接下来就是要把它打散，也就是随机排列。我们刚才已经把正确的顺序存入了d_arr数组，那么现在要做的就是把这个数组复制一个出来，然后随机排列，用sort()加一个比较函数就可以实现。d_arr是初始的数组，c_arr是随机化了的数组，都包含了[obj,x,y]，把d_arr中的obj取值c_arr中的x,y，那么就实现了图片的随机排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private function block_pic(e:MouseEvent) {
	var fooba:ByteArray=new ByteArray();//深度复制数组。
	fooba.writeObject(d_arr);
	fooba.position=0;
	c_arr=fooba.readObject() as Array;
	c_arr.sort(randomsort);//随机排列
	for (var i=0; i<c_arr.length; i++) {
		d_arr[i].obj.addEventListener(MouseEvent.CLICK,block_click)//在这里加上鼠标点击事件。
		d_arr[i].obj.x=c_arr[i].b_x;
		d_arr[i].obj.y=c_arr[i].b_y;
	}
}
//随机排列比较函数
private function randomsort(obj_A:String,obg_B:String):int {
	return Math.floor(Math.random() * 3 - 1);//这里只能产生-1、0、1三种值。
}

接下来是鼠标点击事件，我们这里要的效果是点击两个不同的图片使之互换，这一步比较简单，给个变量来判断是第一次还是第二次点击，记录下坐标然后互换就可以了。当然还得记得把点击的对象深度置顶，不然移动的时候会被其它图片挡住的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

private function block_click(e:MouseEvent) {
//第一次点击
	if (d_choose) {
		click_x1=e.target.x;
		click_y1=e.target.y;
		var v_obj=e.target;
		c_obj=v_obj;
		pic_box.setChildIndex(v_obj,pic_box.numChildren-1);
		c_obj.alpha=0.7;
		d_choose=!d_choose;
	} else {
//第二次点击
		v_obj=e.target;
		pic_box.setChildIndex(v_obj,pic_box.numChildren-1);
		c_obj.alpha=1;
		TweenLite.to(c_obj,0.3,{x:e.target.x,y:e.target.y,onComplete:check_end});
		TweenLite.to(e.target,0.3,{x:click_x1,y:click_y1,onComplete:check_end});//两个都要写onComplete，要不然就让其中一个运动时间长一点。
		d_choose=!d_choose;
		step+=1;
		move_num_mc.m_num.text=step;
	}
}

最后是判断是否拼成功，这里没有用到两个数组是否相等的比较，因为两个数组的顺序不一样。这里是通过判断obj在两个数组中的x,y是否相同来判定的。

1
2
3
4
5
6
7
8
9
10

private function check_end() {
	end_test=0;//位置正确的个数，正确个数为数组长度时，拼图成功。
	for (var i=0; i<d_arr.length; i++) {
	(Math.floor(d_arr[i].obj.x)==d_arr[i].b_x)&&(Math.floor(d_arr[i].obj.y)==d_arr[i].b_y) ? end_test=end_test+1 : 0;
	}
	isend();
}
private function isend() {
	end_test==d_arr.length ? win() : 0;
}

源文件:puzzles.rar

2009-6
12

如何看待W3C标准

类别: Xhtml/Css | 1,270 Views | 一条评论

WEB标准化越来越受到重视了，像我经常逛蓝色理想的，在论坛里经常会看到有关W3C标准的疑问。但不少人还是不太理解所谓标准的含意，太过于执着于W3C标准验证。说起来WEB标准的确也蛮抽象点的，我也是经历了一段时间慢慢体会的，不过在这里我希望通过一个十分明了的比喻，让大家能快速地对W3C标准有个理性上的认识。

就好比我们写文章，在这里我们定下的标准是要用中文来写！那么，只要是用中文写出来的文章，而且没有错别字，语句也通顺，那么这一篇文章就算是通过标准的文章。当然你也可以夹杂一些英文或其他什么的鸟文，这样的结果只是会有些人看得懂有些人会看不懂而已。但是，这篇文章究竟写得好不好？文笔如何？写得过于冗长还是太过苍白？会不会引人入胜……这些都不是我们的标准能够判断的。想要写出好文章（写出好页面），标准是肉体，文笔是灵魂。没有灵魂的肉体只是行尸走肉，而伟大的灵魂就算肉体有所残缺依然掩盖不了其伟大。

相信这个比喻大家都能理解吧。

2009-6
9

解决IE8的兼容问题，X-UA-Compatible meta标签

类别: Xhtml/Css | 2,165 Views | 9条评论

IE8来了，于是不少的项目要求中都会增加了兼容IE8这一条，但当前IE8还很不完善，还算是测试版中，之前某些已经兼容的页面，放到IE8中却变得惨不忍睹，相信很多web desginer都有同感吧。还好IE8提供了一个新的标签X-UA-Compatible，它只能被IE8识别，用来设置IE8的兼容性，就好比现在的vista要去兼容一些旧版的程序一样。

网上找到的相关资料基本上都是同一篇译文，也不知最初的译者是谁了，我就直接转载过来啦。

英文原文：http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

前言

为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，此文章说明文件兼容性的必要性，列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。

了解文件兼容性的必要性

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。”Quirks mode”为预设，这会使页面以旧版本浏览器的视点显示，”Standards mode”(也称为”strict mode”)特点是支持业界标准最为完善。然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

认识文件兼容性模式

IE8支持几种文件兼容性模式，它们具有不同的特性并影响内容显示的方式。
•Emulate IE8 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode，Emulate IE8 mode重视<!DOCTYPE>指令。
•Emulate IE7 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode，Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
•IE5 mode 编译内容如同IE7的quirks mode之显示状况，和IE5中显示的非常类似。
•IE7 mode编译内容如同IE7的standards mode之显示状况，无论网页是否含有<!DOCTYPE>指令。
•IE8 mode提供对业界标准的最高支持，包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API，并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
•Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE，使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

由于edge mode使用该IE版本所能支持的最高模式来显示所浏览的网页内容，建议仅使用于测试页及其他非商用页面。

指定文件兼容性模式

要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。

1
2
3
4
5
6
7
8
9
10

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html>

其内容随著指定的页面模式而更改，当要模拟IE7时，指定IE=EmulateIE7，指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。

X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外，它必须出现在网页header节其它元素之前的位置。

设定网站服务器以指定预设兼容性模式

网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说，下列的web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

若你已于网站服务器指定了一个预设的文件兼容性模式，你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。

请查阅你的网站服务器关于指定自订标头的资讯，或看更多资料:
Implementing the META Switch on Apache
Implementing the META Switch on IIS

判定文件兼容性模式

要判定网页使用IE8浏览时的文件兼容性模式，使用document object(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。

javascript:alert(document.documentMode);

documentMode功能会回传一个数值对应目前页面的文件兼容性模式，举例来说，若网页指定为支持IE8模式，documentMode便会回传值”8″。

在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用，但它们必须更新为使用documentMode。

若你希望使用JavaScript判定一个文件的兼容性模式，引入下面范例的这段程式码可支持旧版本的IE。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
   }
   // the engine variable now contains the document compatibility mode.
}

认识内容属性值

内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说，你可以设定内容属性值为IE=7.5。当你这样做的时候，IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中，IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。

1
2
3
4
5
6
7
8

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a">   <!-- IE5 mode --> 
 
<!-- This header mimics Internet Explorer 7 and uses 
     <!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的文件兼容性模式，这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式，请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种，将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式，虽然并不推荐这样做。举例来说，下列标头即会排除IE7 mode。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

结论

兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站，有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。

使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。

选择支持某个特定版本的IE，你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。

2009-6
8

一个拼图游戏的DEMO

类别: My Demo | 1,887 Views | 3条评论

这游戏也很简单，也就是想自己练练算法了。这里只是个DEMO，但主要部分都包括了。主要是因为对界面设计实在头疼，再者做练习嘛，而且是被别人做得不爱做了的游戏，就没弄得那么完整了。

其实对于高手来说，拼图游戏只算是小菜了。我不是高手，也许我的方法不是最优的，但绝对是原创的，相信还是能给一些正在学习中的朋友一些帮助。过些天整理一个小教程出来吧，到时连源码一起发。

源码及教程

2009-6
5

解决FLASH中链接被当做弹窗拦截的问题

类别: Flash/AS3 | 2,132 Views | 6条评论

不知有没有朋友碰到过这类的问题，在某些浏览器中，点击FLASH中的链接会被当做弹窗给拦截屏蔽掉。而也许有些朋友一直都没碰到过这个问题。其实这只是一个小小的习惯性问题。

其实以前我也都没有注意到这点，在FLASH中做链接的时候，往往都用on(press){}来触发，而这正是造成这个问题的原因，改为on(release) {}就没事了。同样，在AS3中用CLICK事件来触发的话，也会碰到被拦截的问题，推荐采用MOUSE_DOWN或者MOUSE_UP。但还有的朋友说，已经这样做了但还是被拦截，那就没办法了，采用终极招式吧，在FLASH的上面浮动一个等大的A标签，当然还需要填充透明GIF在里面，这样才能在IE中触发点击区域，把链接直接写到这个A标签就好了，其实现在有蛮多大站也都采用这种方法的呢。