西风坊

纪念512

犷野西风 — Tue, 12 May 2009 09:31:06 +0800

国殇~~

默哀中

阿里系的网站全部去色默哀（除alisoft外其他都改图片和css了，看来对于客户体验上大家还是很有共识的！！不过中文站有一块“猜您喜欢”是根据每个用户不同动态调用的，这里的图片没法改，只能IE only的用滤镜滤掉）

blog也跟着用滤镜灰一天吧…

看到的alibaba和听到的Google

犷野西风 — Tue, 05 May 2009 21:20:47 +0800

今天有幸听了“谭校长”的分享，有些观点感觉非常有意思：

1、没有流程 - “自上而下”与“自下而上”

非常有意思的一个话题。据说在Google的项目的“流程”多是自发性的“自上而下”发生的，员工的一个idea，只要能找到志同道合的朋友，几个人就可以简单地开干了。所以一个产品从idea到上线最短的时间可能只需要一天的时间！并且，任何人都可以发起项目，只要能有1%的数据的证明和通过每个项目5分钟的产品会议就可以上线。而在阿里巴巴，这个过程却是自上而下的，产品要上线必须有PD来做规划，然后是kickoff，FRD，产品会议，交互设计稿，视觉设计稿，前端Demo，UC，TC……中间必须流经pd，用户研究员，交互设计师，视觉设计师，前端开发工程师，后台工程师，测试工程师等多个角色，还有那个漫长的众多专家和老大的资源抢夺战……诚然，Google的模式并不一定适合alibaba，开发和设计人员的能力以及资源的情况是完全不一样的。但Google的模式却告诉我们了一个以前几乎没有想过的事: 快速迭代的互联网领域可以没有开发流程 。idea-找人付诸实践-产品会议-上线，需要流程吗？唯一一个在可以归在阿里巴巴流程中的就是产品会议了吧。

突然又想到了博鳌论坛上康辉在David和李开复在博鳌上的访谈，David谈到创新的时候说Google的创新是“自上而下”的，由精英工程师主导推给用户，而alibaba的创新是“自下而上”的，从用户的需求出发来创新。两家公司在创新的源头上不经相同，而换了个角度，而在实施过程中确有倒了个个儿，呵呵，有点意思……

2、教育者 - 设计师的角色

Google中国的UX团队一共只有13个人2种角色（设计师和研究员），相比于阿里巴巴中文站UED30多人4种角色（用研，视觉，交互，前端）的团队显然是“少的可怜”。但不可否认Google的产品在体验上非常地不错，简单、易用。据了解Google设计师在工作中还需要扮演了一个教育者的角色。带着工程师去市场直接感受用户的行为，让工程师参与用研测试……让工程师本身就有用户体验的意识，这样很多时候一些产品都不需要设计师的参与。而在alibaba，ued的同学似乎往往是站在PD或是运营对立的方面，去接受一个又一个挑战，我想这也不能简单地归于Kpi的原因吧？

或许我们真得可以换个思路，想想怎么让需求方更好地了解ued方面的专业知识，这样才能更彻底地解决问题。

3、快速解决问题 -设计效率

互联网开发周期短，迭代时间快，早一步可能就占尽了先机。所以如何提升设计和开发效率是一个很现实的问题。这方面Google的一些做法还是挺值得学习的。一个是Google在做用户调研的时候一定会叫上工程师，在得到反馈意见的时候立马作出修改然后马上再推给用户再反馈，甚至工程师不参加就不开展调研了。而在阿里巴巴，这个流程基本上是用户测试-研究员的反馈报告-开会讨论解决方案-再修改-再测试……无形中增加了很多沟通和时间成本。另一点，Google也认同经验，设计师或是研究员的经验有时候就是答案。而我们在对外推我们思想的时候，却总是受到这样的质疑，“你们的想法就代表用户了吗？作为用户我就认为……” 不可否认的一方面Google工程师的能力确实很强，能在极短的时间里迅速完成产品的修改，这一点我们自叹不如；也不可否认Google设计人员庞大的数据支持很很强的业务能力也是现阶段我们还不能完全达到的，但如果ued每一个决策都必须有足够的依据和论证的话，这个成本有多大？大家可以想一下。

……

这样的区别还有很多，黑格尔说过“存在即合理”，对应于各自公司不同情况不可能简单地评判哪个更好。不过正如“谭校长”所说，互联网的交互设计方面起步比较晚，大家都还在探索，或许更好地方式会在明天自己长出来！

我要评论

2009年05月7日, iamsujie writes: G家和阿里的区别太大了，各自也太有特点了，和市场、用户等等都有关系吧，实用的适用的就是好的，反正我们也找不出最优方案，可行的方案就ok了。
2009年05月7日, 无忌 writes: 今年接连参加了两三场DEMO确认讨论，感觉UED有点过于弱势——当然强势也要有强势的道理
2009年05月7日, 犷野西风 writes: UED弱势的很重要一个原因在于缺少可量化的设计成果。需求方的商业指标很明显，“加这个可以增加300万收入……”vs “这样做符合设计规范 || 这样做影响用户体验……” 老板更愿意听哪个很容易看出来。
2009年05月7日, jary writes: 还是你理解流程不太准确， "快速迭代的互联网领域可以没有开发流程" 这句，我想你想表达的是：“快速迭代的互联网领域需要快速、简洁、高效的流程，你看，idea-找人付诸实践-产品会议-上线，这也不是流程么，只是没那么多的看上去很强大的过程而已。” 做事情的过程自然形成流程，农民种田都有流程。
2009年05月7日, froons writes: Google的项目是自下而上的吧。google的环境更适合有想法的工程师，创新的动力也更足一些
2009年05月7日, 行云流水泵 writes: 国内UED不够强势，起步晚是个绝对原因，5年编程经验的开发人员，与2年UCD设计经验的设计师，谁更有说服力，不言而喻啊。空手道的段位考核，其中一项指标就是修练时间，哪怕一年只练一天，20年这个数字也有足够的震慑力。
2009年05月7日, 孙波 writes: Google那种，做出来的产品，垃圾的也占相当多的比例。不能因为Google成功就认可这种方式。
2009年05月7日, taine writes: 最重要的是盈利方式完全不同，流程不同不足为奇。
2009年05月7日, Ray writes: 丫的你要把google和谷歌区分开来.

js跨域问题小结

犷野西风 — Wed, 22 Apr 2009 18:36:52 +0800

javascript出于安全方面的考虑，是不允许跨域调用其他页面的对象的。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。没有记错的话前三届D2论坛上每次都有人提这个东西，这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为javascript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

URL	说明	是否允许通信
http://www.f2e.me/lab/a.js http://www.f2e.me/script/b.js	同一域名下不同文件夹	允许
http://www.f2e.me/a.js http://www.f2e.me/b.js	同一域名下	允许
http://www.f2e.me:8000/a.js http://www.f2e.me/b.js	同一域名，不同端口	不允许
http://www.f2e.me/a.js https://www.f2e.me/b.js	同一域名，不同协议	不允许
http://www.f2e.me/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.f2e.me/a.js http://script.f2e.me/b.js	主域相同，子域不同	不允许
http://www.space007.com/a.js http://www.f2e.me/b.js	不同域名	不允许

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过URL的首部来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

接下来简单地总结一下在“前台”一般处理跨域的办法，后台proxy这种方案牵涉到后台的配置，这里就不阐述了,有兴趣的可以看看YAHOO的这篇文章：
JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls。

1、document.domain+iframe的设置
对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.f2e.me/a.html和http://script.f2e.me/b.html两个文件中分别加上document.domain = ‘f2e.me’；然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.f2e.me的domian设为alibaba.com那显然是会报错地！代码如下：
www.f2e.me上的a.html

        document.domain = 'f2e.me';
	var ifr = document.createElement('iframe');
	ifr.src = 'http://script.f2e.me/b.html';
	ifr.style.display = 'none';
	document.body.appendChild(ifr);
	ifr.onload = function(){
		var x = ifr.contentDocument;
		alert(x.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
	}

script.f2e.me上的b.html

 document.domain = 'f2e.me';

2、动态创建script
虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function，根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考yui的 Get Utility

这里判断script节点加载完毕还是蛮有意思的：ie只能通过script的readystatechange属性,Safari 3.x以上支持的是script的load事件，而firefox和oprea则要通过onload来解决。另外这种办法只能传递js类型的数据，不是很方便。以下是部分判断script加载完毕的方法。

……
 
// ie支持script的readystatechange属性
// IE supports the readystatechange event for script and css nodes
if (ua.ie) {
n.onreadystatechange = function() {
var rs = this.readyState;
if ("loaded" === rs || "complete" === rs) {
n.onreadystatechange = null;
f(id, url);
}
};
 
……
 
// // Safari 3.x supports the load event for script nodes (DOM2)
 
……
 
n.addEventListener("load", function() {
f(id, url);
});
 
……
 
// FireFox and Opera support onload (but not DOM2 in FF) handlers for
// script nodes.  Opera, but not FF, supports the onload event for link
// nodes.
} else {
n.onload = function() {
f(id, url);
};
}

3、利用iframe和location.hash
这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url： http://f2e.me#helloword中的‘#helloworld’就是location.hash,改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名f2e.me下的文件cs1.html要和space007.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向space007.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据。（因为ie不允许修改parent.location.hash的值，所以要借助于f2e.me域名下的一个代理iframe）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。代码如下：
先是f2e.me下的文件cs1.html文件：

	function startRequest(){
		var ifr = document.createElement('iframe');
		ifr.style.display = 'none';
		ifr.src = 'http://www.space007.com/lab/cscript/cs2.html#paramdo';
		document.body.appendChild(ifr);
	}
 
	function checkHash() {
		try {
			var data = location.hash ? location.hash.substring(1):'';
			if(console.log){
				console.log('Now the data is '+data);
			}
		}catch(e){};
	}
	setInterval(checkHash, 2000);

space007.com域名下的cs2.html:

(function(){
	//模拟一个简单的参数处理操作
	switch(location.hash){
		case '#paramdo':
			callBack();
			break;
		case '#paramset':
			//do something……
			break;
	}
 
	function callBack(){
		try {
            parent.location.hash = 'somedata';
        } catch (e) {
        	//ie的安全机制无法修改parent.location.hash,所以要利用一个中间在space007域下的代理iframe
        	var ifrproxy = document.createElement('iframe');
        	ifrproxy.style.display = 'none';
        	ifrproxy.src = 'http://f2e.me/test/cscript/cs3.html#somedata';
        	document.body.appendChild(ifrproxy);
        }
	}
})();

f2e.me下的域名cs3.html

	//因为parent.parent和自身属于同一个域，所以ie下可以改变其location.hash的值
	parent.parent.location.hash = self.location.hash.substring(1);

实例请点击 hash实现完全跨域
当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等……

4、利用flash
这是从YUI3的IO组件中看到的办法,具体可见：http://developer.yahoo.com/yui/3/io/
flash这个方案不是很明白，各位自己慢慢琢磨了，呵呵。你可以看在Adobe Developer Connection看到更多的跨域代理文件规范：
ross-Domain Policy File Specifications.
HTTP Headers Blacklist.

我要评论

2009年04月24日, kako writes: “基于8px的中文站页面布局系统实现”这篇文章打不开了!
2009年05月4日, 孙波 writes: 你把原来那个博客文章导入进来，做个301跳转就好了啊...还让我曲线来这个新博客

input.click

犷野西风 — Tue, 21 Apr 2009 22:18:36 +0800

早上发现一个情况，点击suggestion出来item提交form。问题就处在这里，自以为是的“马桶”把下面那句话当作广告拦截了：

document.formes['formname'].submit()；

汗……鄙视一下“马桶”，这个自以为很为用户着想的广告屏蔽功能，似乎只要是用js模拟出来的新窗口打开全当广告给干掉了……不得以换个思路，既然是因为js打开的窗口有问题，那就只能模拟用户的行为来提交，所以把提交form的<input id=”form-submit” type=”submit” />按钮了：

document.getElementById('form-submit').click();

其实利用input.click的办法，不仅可以解决屏蔽广告的问题，同时也会触发原先绑定的onsubmit事件，诸如打点统计之类的办法，应该是一个不错的主意！

顺便在吐槽一下，发现是在ietester里面模拟ie6进行suggestion操作时浏览器会报一个错。经检查，问题出现在这里：

   onSuccuess:function(o){
      ……
     o.purge();
  }

o.purge() 本意是利用YUI的get办法在获取数据以后把这个产生的script节点删除，可一删除就会报错。很郁闷的ie6 tester……

我要评论

2009年04月21日, 明城 writes: 几句废话下哈 1，点击弹出这样其实也是个折中的办法，如果用户敲回车提交就没法了（这得看具体的情况） 2，如果光是在新窗口提交（或者提交到其他窗口），可以使用这样
2009年04月22日, bigCat writes: 呃,要绑定回车这个键么...?弱弱问下

css-selector备忘录

犷野西风 — Sat, 18 Apr 2009 20:06:32 +0800

老是记不住，保存下来做个存档吧。虽然写css的时候还有很多是否支持的问题，不过对于js库中类似的$$里还是非常有用滴！

level 1：

择符	含义
E	标签选择符，匹配所有使用E标签的元素
E:link E:visited	链接伪类选择符，匹配链接未点击(:link)或已点击(:visited)
E:active E:hover E:focus	动态伪装选择符(匹配用户行为)
E:first-line	匹配E元素的第一行
E:first-letter	匹配E元素的第一个字母
E.myclass	类选择符，匹配所有class中包含“myclass”属性的元素
E#myid	id选择符，匹配id为myid的元素
E F	后代选择符，匹配所有属于E元素后代的F元素

level 2：

选择符	含义
*	通用选择符，匹配所有元素
E[foo]	匹配所有具有foo属性的E元素
E[foo="bar"]	匹配所有具有foo属性等于”bar”的E元素
E[foo~="bar"]	匹配所有具有foo属性，且foo属性中含有多个以空格分隔的值，其中包含bar的E元素
E[foo\|="en"]	匹配所有具有foo属性，且foo属性中包含以“-”字符且有一个“-”字符前面（左边）是“en”开头的E元素
E:first-child	匹配E元素的第一个子元素
E:lang(fr)	匹配lang属性等于c的E元素
E:before	在E元素之前插入生成的内容
E:after	在E元素之后插入生成的内容
E > F	匹配E元素的直接子F元素
E + F	匹配紧挨着E后面的F 元素

level 3：

选择符	含义
E[foo^="bar"]	匹配所有foo属性以“bar”开头的E元素
E[foo$="bar"]	匹配所有foo属性以“bar”结尾的E元素
E[foo*="bar"]	匹配所有foo属性含有“bar”的E元素
E:root	匹配文档的根元素（html）
E:nth-child(n)	匹配其父元素的第n个子元素，n从1开始
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，n从1开始
E:nth-of-type(n)	匹配其父元素下使用同种标签的第n个元素，n从1开始
E:nth-last-of-type(n)	匹配其父元素下使用同种标签的倒数第n个元素，n从1开始
E:first-of-type	匹配其父元素下使用同种标签的第1个元素
E:last-of-type	匹配其父元素下使用同种标签的最后1个元素
E:only-child	匹配其父元素下仅有的一个子元素
E:only-of-type	匹配其父元素下使用同种标签的唯一1个子元素
E:empty	匹配一个不包含任何子元素的E元素
E:target	匹配相关url的目标E元素
E:enabled E:disabled	匹配表单中激活(:enable)或未激活(:disable)的E元素
E:checked	匹配表单中被选中的E元素(radio或checkbox)
E:not(s)	匹配不符合当前选择器的任何元素
E ~ F	匹配在E元素之后的同级F元素

ps: E:nth-child(n)只类的n可以接受an+b之类的表达式，如E:nth-child(2n+1)之类，此时n从0开始。同时也支持odd和even表示奇数或偶数，如nth-child(even)。

最后，你可以在这里测试下你浏览器对于css选择器的支持情况。

设计标准与像素级误差

犷野西风 — Fri, 17 Apr 2009 22:59:41 +0800

从gr上读到的这篇《将设计执行到底—记Qzone项目组视觉设计标注的前前后后》，很赞成其中对于所谓“像素误差”的描述-

看自己设计好上线的网站，偶尔会发觉像素行间出现了弹性空间，总在不经意间蹦出一定的差距。有些页面很难发现，比如活动类页面，这类页面多呈不规则造型，在设计上也更加灵活多变。但在portal类的页面设计上，像导航、登录框、行距等，几个像素的误差可能就会影响到用户的感受。这时，像素误差问题就很直观了。

但与对接下来的有些设计规范却很是疑惑！：

如果没有猜错这样的标注应该是视觉设计定出来的，诚如下面的评论一般，是极不现实的。比如两个区块见的间距是以这两张图片见的21px来区分的？还有比上图中的“赚礼品”到底边框是42px，在写css的时候又该怎么定义呢？（不知道有没有漏掉标注）按上述要求怕是要出效果哦后拿着“尺子”慢慢量啦，不知大家对这个42px的像素是怎么做的。

实际上，前端在实现页面文本的时候并不是想ps里拖组件那么实现的，举两个最简单的例子：

1、12px的中文宋体字显示有多高？11px,可如果加上可能的下划线呢？13px-下面空1px后再加1px的线宽，这也是12px字号用12px行高会被截断的原因。不知道制定上图标准的设计师有没有考虑过这条下划线的问题。

2、12px的中文宋体字有多宽？答案是11px+1px的空白间距。所以n个文字的文本的段落宽带应该是取 12*n-1，这个数值是设计师在定宽度是得一个参考标准，否则如52px这样的宽带就会浪费5px的文本空间，同时所谓的像素误差也产生了。

个人觉得，设计标准在指定的时候一定要考虑到前端的实现。其实很多时候，我们并不需要这样的像素标准，好的标准下这些应该是自然而成的。比如去年大家讨论得很火热的栅格（网格）系统，就是在横向上处理区块间像素误差的一个很好的办法。当我们有了基于这样的栅格（网格）系统后，我们就不需要去考虑怎么实现区块间这些间距了。还有这篇《垂直栅格与渐进式行距(上)》也很有参考价值。字体×1.5倍行高的单位，段落的18px的margin也是计算所得而不是ps里拖着觉得好看而已。

当然，绝不是否认这样的设计标注，只是，在设计师在拖组件的时候也考虑下写代码时的实现方式！

关于“眼动仪”

犷野西风 — Fri, 17 Apr 2009 17:14:31 +0800

上周在大猫的窝里看到D4上分享的眼动仪测试结果，发现与这个被测者相比，我年前在浙大当小白鼠的结果明显“正经”很多！哈哈。

今天小孩在部门里也做了一次测试，把测试结果也秀一下：

这是张图文混排的情况，三张图片分别为注视点图、热区图、兴趣区图。它们的含义分别是：

1. 注视点图中，不同的颜色表示不同的人的注释点，圆点上的数字表示用户注视顺序：

2. 热区图中，某区域颜色越红，表示该区域注视的人越多：

3. 兴趣区图中，彩色区域代表用户的主要注视区：

再上一组美女的：

当然我们这些是在设计领域对眼动仪的应用，想想在军事领域，残疾人应用方面眼动仪应该有更大的应用前景。或许哪天只要动动眼睛就能开飞机了……

最后附上我年前自己的测试结果：

很明显，我对美女的“脸”更感兴趣，哈哈！

我要评论

2009年04月18日, bigCat writes: - - 看沟沟的比较多吧因为是正儿八经的测试,所以又不好意思... 第一个兔子是happy tree friends里面的兔子哈,动画很赞的
2009年04月19日, 老石 writes: 第二组,美女的胸部显然被冷落了.换我肯定不会那样看.呵呵
2009年04月20日, sanso writes: 我觉得,如果胸部的数据不是最多的话, 就有问题了.
2009年04月20日, iamsujie writes: 啊，有沟，会火。。。很像玩玩眼动仪啊
2009年04月20日, 犷野西风 writes: 哈哈，其实这的确是一个问题，眼动仪实验的时候被测者肯定不会完全自然地忘掉自己在测试。这也是目前这类实验暂时无法解决的一个问题。
2009年04月21日, OutC writes: 眼动仪如果应用在将来的飞机上，要是有一天飞机在飞行途中，驾驶员的眼睛痒……
2009年04月23日, 兜兜鱼 writes: 请教：兴趣区图的颜色有什么含义吗？
2009年04月27日, cranelet writes: 眼动说来说去是个时髦的东西，对于设计平面广告的指导作用貌似超过web/soft based产品
2009年05月7日, joeey writes: 嗯，这就是传说中的“测不准原理”

SmartSuggestion发布

犷野西风 — Tue, 14 Apr 2009 11:32:40 +0800

SmartSuggestion终于也如期发布了，首先感谢一下后台工程师为其赋予的三项全新的“smart”功能：

1、双项匹配推荐逻辑：

2、首字母识别功能：

3、拼音纠错功能

对比一下Google和百度

完了之后再来说说前台：

前台逻辑上利用YUI提供的get的办法，在输入框获取焦点后再把对应的js功能文件请求过来，然后响应用户的onkeyress事件去查询。当然不能不承认，由于种种原因，这次前端的实现细节上还存在着很多很多不尽如人意的地方：

1、复制/粘帖失效

2、输入法开启的情况下相应按回车输入的英文字母

3、按“上/下”键盘和鼠标移动时的差异

对于这些细节，Google貌似是通过每10 毫秒执行一次回调函数来实现的……（这都行!）。不过对于这样的计时器对页面的性能影响着实有些担心，下次准备用oninpu（onpropertychange）来试一下。

我要评论

2009年04月14日, lesol writes: “基于8px的中文站页面布局系统实现” 这篇文章打不开了，什么时候再发出来学习学习。
2009年04月16日, bigCat writes: 貌似一次keyup就一个http request 会不会有性能问题? 搞个setTimeout,输入间隔超过比如200ms的时候才去请求? 刚测试了一下.. google.com是有计时器的,如果快速按键,只会发一次请求 google.cn会发n次请求...
2009年04月16日, 犷野西风 writes: 也不完全是一次keyup就一个request 首先会判断两次keyup之间的值有没有变还有曾经keyup过的键值都会被缓存起来，下次如果还是同样的值就从缓存中读取而不去request
2009年04月17日, 孙波 writes: 这个不错的~

让首屏少一些loading图

犷野西风 — Sat, 11 Apr 2009 21:55:37 +0800

在学习了YAHOO的14条军规后，大家都习惯于将js放在页面底部加载了。页面的整体加载速度的确提高了，比如alibaba中文站首页，在将广告和js放在底部加载后依据第三方的监控结果速度提升了5秒左右，数据上看的确很不错，但是在放在页面底部的js加载完毕之前需要js判断的内容和广告怎么办？loading图呗，网上可以找到一大堆的loading素材，可如果需要loading的图片太多了，特别是首屏上太多了怎么办？

中文站这次改版就碰到了这个问题。一方面因为目前中文站的首页是一个纯粹的静态页面，所有的需要根据用户个性展现的部分都需要用cookie来判断，这些要不就用iframe，要不就只能依前台的js来做。另一方面首屏正中央又多了个三个iframe轮播的广告……如果这些都做成loading图片延后加载的话，首屏会有将近50%左右的区域显示loading图，这样的用户体验实在太糟糕了。

对于广告，目前采用了一个比较折中的办法，页面加载的时候首先加载第一个广告,Dom构建完毕执行js后再动态生成剩下的2个广告并初始化动画效果。

js和其他广告加载前：

加载后：

虽然比原先的一个loading图片多了一个广告，速度上稍微慢了一些，但在用户感觉上却比原先无趣的loading图好了很多。

另一个可以改进的地方是引导区，其逻辑很简单，根据cookie判断为未注册用户和注册用户展现不同的内容。

未注册用户看到的是：（图2）

YUI的element组件组件倒是提供了一个提前绑定元素事件的方法，还没研究过。但显然把那么大的yui放在页面加载前实在是太大了，于是想到了一个简单的addCss的办法，在页面加载之前利用javascript根据cookie的判断结果生成一个css。（因为页面加载到脚本的时候会停止并行加载，等待脚本加载完毕之后再加载剩下的内容，所以可以保证该css在html元素加载前加载而防止页面突变的情况。

	addCSS: function(cssText, doc) {
		doc = doc || document;
		var styleEl = doc.createElement('style');
		styleEl.type = "text/css";
		doc.getElementsByTagName('head')[0].appendChild(styleEl);
		if (styleEl.styleSheet) {
			styleEl.styleSheet.cssText = cssText;
		} else {
			styleEl.appendChild(doc.createTextNode(cssText));
		}
	}

在页面加载过程中会首先执行这个方法生成类似于: #id1{display:none;}#id2{display:block}这样的css，然后当页面继续加载到对应id元素的时候就会直接按最后定义的css样式来渲染了（在页面头顶部执行少量js应该是可以接受的，做事不能太教条化），用户不会看到显示内容可能的变化，也就根本不需要loading图片的存在了

可以特殊处理的问题还有很多，关键在于怎么去平衡加载速度和内容之间的关系了。

我要评论

2009年04月12日, 备考网 writes: 能学习到这样的东西很好
2009年04月13日, lesol writes: "基于8px的中文站页面布局系统实现" 这篇文章打不开了，什么时候再发出来学习学习。
2009年05月3日, kent.zhu writes: 好像阿里巴巴之前的首页加载的东西比这个还多，可惜没截图

css 裸奔日，新版首页上线

犷野西风 — Thu, 09 Apr 2009 15:14:20 +0800

新版首页终于发布了，忙了我半个月几乎啥都不能干……
由于在做ABtest，目前只有在IE7内核的浏览器下直接输入http://china.alibaba.com 才能看到新版首页。

其他浏览器访问：http://page.china.alibaba.com/index_n.html

恰逢今天是一年一度的css Nated Day（http://naked.dustindiaz.com/ ），为了配合一下这活动，开了个小彩蛋：按键盘 “上上下下左左右右 “，即可看到页面“裸奔”的效果。

休息一下，把这段时间的问题好好总结下。

我要评论

2009年04月16日, bigCat writes: 要是按出来个裸女就好玩了...

西风坊

纪念512

看到的alibaba和听到的Google

我要评论

相关日志:

js跨域问题小结

我要评论

input.click

我要评论

css-selector备忘录

level 1：

level 2：

level 3：

设计标准与像素级误差

关于“眼动仪”

我要评论

SmartSuggestion发布

我要评论

让首屏少一些loading图

我要评论

css 裸奔日，新版首页上线

我要评论