1、地点更改为先锋书店(五台山总店,广州路 173 号,地图);
2、时间推迟到 7 月的第 4 个周日(7 月 27 日)。
内部照片:



关于先锋书店:
被称为"大地上的异乡者"; 最引人注目的是巨大的十字架(见上图); 五台山总店是一个巨大的地下停车场; 书店自己设计、制作并销售记事本、便签、书签等小东西; 近期在升级空调,所以本周书友会延期至下周。]]>
上周收到两件T-Shirt,一件是Google的Junyu送的Blogger,这件只要穿着人家就知道是Blogger滴,另一件是Taobao UED的怿飞送的他们刚出炉的不知道叫什么名滴,上次打着一些非常奇怪的职位,可以让人一眼就看出是IT民工,挖哈哈,非常感谢他们。
晚上发现这两件放一起有着特别滴意义,因为这两件我会担心穿着上班会被打,挖哈哈。
悄悄的推荐本书《JavaScript王者归来》
]]>开发中,用setStyle给滚动条(ScrollBar)设定样式(皮肤)时,出现了一些小问题:
如果ScrollPane或List横滚动条和竖滚动条同在,给滚动条使用setStyle时,则两个滚动条的样式会发生冲突,如:
pane.setStyle("thumbUpSkin", upLoader); //upLoader为加载进来的图片或动画
仔细看看,如果用默认样式ScrollThumb_upSkin则并不会出现问题,且如果将所需图片导入flash,并将其为 ActionScript 导出创建类,使用其也不会出现问题
想想,他们的区别就在于一个是实例化的,一个是未实例化的,为什么实例化的会出现问题呢
且如果只有一个滚动条存在,则都不会出现问题,后来在BaseScrollPane看到:
protected function setStyles():void {
copyStylesToChild(_verticalScrollBar,SCROLL_BAR_STYLES);
copyStylesToChild(_horizontalScrollBar,SCROLL_BAR_STYLES);
}
AS3中addChild时,如果添加一个已将其它显示对象容器作为父项的子对象,则会从其它显示对象容器的子列表中删除该对象。故同一图片实例不能同时出现在横竖两个滚动条中。
目前如果使用List,只能把横滚动条禁用,只留竖滚动条,或将图片导入创建类
顺便提出,使用ScrollPane时,禁用一个滚动条也会出现此问题,比较ScrollPane与List的区别,发现configUI时,List先做了useFixedHorizontalScrolling = true;处理,这样自写类继承ScrollPane修正即可:
package fl.controls {
import fl.containers.*;
public class SP extends ScrollPane {
public function SP() {
super();
}
override protected function configUI():void {
//修正双滚动条皮肤设置的bug
useFixedHorizontalScrolling = true;
super.configUI();
}
}
}
useFixedHorizontalScrolling是干什么用的,还望知之者补充。
]]>同见:http://www.psyked.co.uk/adobe/flash/stop-using-mxtransitionstween.htm
推荐用tweener代之:http://code.google.com/p/tweener/
CS3自带部分组件或类存在些小问题:
http://www.cenfun.com/blog/article.asp?id=114
http://www.cenfun.com/blog/article.asp?id=110
http://www.cenfun.com/blog/article.asp?id=107
http://www.cenfun.com/blog/article.asp?id=106
相信CS4,Flash 10将其完善
]]>
Firefox still does not implement the proposed CSS3 text-overflow property. It does however provide a similar behaviour for the XUL description element. Furthermore, it does support XBL bindings through CSS. This leads to the following solution:
.ellipsis { text-overflow: ellipsis; -moz-binding: url(ellipsis.xml#ellipsis);
xul:description的crop原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。这个功能可是非常实用哦,不知道W3C虾米时候也给这样的CSS属性让我们简单搞定一大堆问题呢。
然后还不小心发现。hedger悄悄的也实现一样的功能Hacking text-overflow for Firefox,不过还是感觉用XBL简洁方便。。
在很久很久以前,我也在研究,能不能调用firefox处理title的点点点的东东来完成效果,不过一直没实现。之前提出的-moz-text-overflow: ellipsis;via这种不靠谱的说法也不行,看来人家是铁了心。
]]>因为其中的中文等字符成了乱码,不能正确读取XML结构,故解析错误
一般情况用记事本等编辑工具保存为utf-8编码时会自动在头加上BOM:
utf-8的BOM为:EF BB BF
用服务端语言生成utf-8编码的xml时,如asp,并没有自动添加BOM,导致flash不能加载动态xml数据
这里可在asp文档开头强制写入一个BOM:
<%
Response.BinaryWrite(ChrB(239))
Response.BinaryWrite(ChrB(187))
Response.BinaryWrite(ChrB(191))
%>
如果php或其他也出现类似情况,请做相应处理,或采用非Unicode,如gb2312
]]>
在手持设备中,Opera Mini是一个相当不错的浏览器,今天给大家介绍的是Opera Mini 的仿真器。先看下用Opera Mini访问我blog的实际效果(需要JAVA支持),

官方提供的这个其实跟手机里的是完全一样的(可能会有字体支持的不同),你可以通过http://www.operamini.com/demo/?url=[URL] 预览任意网页,官方还提供了个bookmarks Show in Opera Mini,把它拉到收藏夹里,突然想看什么网站时就点一下(^__^可以用它来穿墙,就是屏幕太少了)。
做为开发测试用时,每次跑它网站是比较不靠谱的,这时我们可以使用本地的模拟器。
下载个基于Applet的J2ME模拟器,比如MicroEmulator,Opera mini官方那个好像也是用他们的技术, 下载一个真的Opera mini ,可以在http://www.operamini.com/download/pc/找到,选个新一点的手机,把jad跟jar都下下来。 直接运行microemulator.jar,在菜单 file » Open JAD File … 选刚才下载的Opera mini的jad 其他的操作跟手机里是一样的。还有个问题Opera Mini请求的页面是走Opera服务器转的,所以不能访问不在公网上的东西,不知道谁有办法处理一下。
当然,你还可以换模拟换skin,官方的skin在这里,这里还有一份有几个大size的, 当下来后通过菜单Options » Select Device… 换一下就可以。
]]>如播放器控制按钮,窗口按钮等:
974;<8:X 021r 356 `qa这样还可以节省很多空间
]]>
有没有发现浏览器的地址栏里多了个奇怪的图标呢?这个东东可以解决大家满页面去找编辑按钮的问题,但同时又产生了另一个问题:浏览器不支持。=。= 如果你使用的是Firefox浏览器的话,可以装上这个插件来体验。不过我的网站是登录之后才会出现,可以到官方介绍,这里体验体验。
那它到底是什么呢?它是源于WIKI编辑滴,但是,我发现它实现原理却是可以适合任何网站,主要是在head里再加上:
其中的title是鼠标移上去的提示, href就是点击跳转到的地址,^_^,可以用javascript:来做坏事。不过它不像FEED那样用多条,只是第一个有效。我要是想搞个普通编辑跟高级编辑的要怎办。挖哈哈。
真希望浏览器能内置这个功能,实现技术不难,像RSS一样,但就是要看浏览器商做不做。。
]]>override protected function keyDownHandler(event:KeyboardEvent):void {
if (!selectable) { return; }
switch (event.keyCode) {
case Keyboard.UP:
case Keyboard.DOWN:
case Keyboard.END:
case Keyboard.HOME:
case Keyboard.PAGE_UP:
case Keyboard.PAGE_DOWN:
case Keyboard.LEFT:
case Keyboard.RIGHT:
case Keyboard.SPACE:
default:
}
}
但是,当你上下移动到列表某个选项,如第10个,然后再修改列表项(不是new List,如用dataProvider修改)到少于10个,则再用键盘移动选项时,依旧停留在10的位置并从其开始,即使用selectedIndex,selectedItem指定到0也没用。
后来发现是没有把caretIndex复原,那么适时按需修改你的caretIndex即可,如在selectedIndex时修改:
package fl.controls{
public class MyList extends List {
//修正键盘移动bug
override public function set selectedIndex(index:int):void {
super.selectedIndex = index;
super.caretIndex = index;
}
}
}
先到coop定制一个搜索,然后把它Ajax查询的地址拿来用,插件的主要功能就是把查询返回的内容转换显示出现。我把tag当成关键词来搜索,不过现在只有websearch,blogsearch还没有接口,搜索出来的结果并不理想,先凑合着用。
还有几大个问题要解决:
非法的用Google的api不知道会不会给封掉呢? 搜索的结果并不理想。 cache还没搞定,我现在用的是WordPress Object Cache,这个东东在wp2.5给干掉了。水煮鱼有提供一些WordPress 缓存插件,并建议用内存缓存,不过我还没研究怎样用。 Google还会返回一些奇怪的网站,在想办法干掉(new)现在这个插件还有很多小问题,所以暂时不提供下载。
推荐一个WordPress相关的站:我爱水煮鱼,是在中文领域中相当不错的一个站。
]]>另外一个问题就是监控的依据:
无论是基于服务商还是基于客户自身,都有一定问题。国内也不知道哪里有比较低成本的监控服务,而监控的细节就更成问题了,还有基于南北电信/网通部署不同的监控点等问题。
http://bbs.cenfun.com/forumdisplay.php?fid=10
介绍:
CMP是一款免费的在线音乐播放器,采用Flash开发。支持的音频视频格式主要有MP3,FLV,MP4,并可以通过网页JS接口实现WMP(Windows Media Player)所支持的格式播放,如wma,wmv,wav,mid等。主要功能特色有列表式播放(自定义音乐专辑和列表),MP3可视化效果(SoundMixer混音器),同步歌词,高清视频(h264),自定义皮肤,加载各种插件等等。
var total:Number = 10000000;
var num:Number = 1000;
var time:Number = getTimer();
for (var i:int = 0; i
}
trace(getTimer() - time);
////////////////////////////////////
num = 1000000;
time = getTimer();
for (var j:int = 0; j
}
trace(getTimer() - time);
运算10000000次后,除2用时221ms,而乘0.5用时109ms,不管多少次基本都差不多是2倍的关系,看来程序要优化下了,用/用习惯了
]]>这个的观念可以用下面的例子来解释:
一个软件公司要设计一款专门供财务人员使用的软件,产品的设计者会有很多想法,想象着用户会要XXX功能,如何如何的功能归类会很方便用户使用… 但是通过实际调查发现,真正的用户—财务人员,想要的原来根本不是这些,他们更需要的是快速的完成任务,让自己显得不那么笨(能顺利的操作此款软件)…
要想单纯的通过主观判断就能做出真正的财务人员满意的软件,需要设计者能按照财务人员的方式来使用这个软件。如果你真能按照一位财务人员那样来使用这个软件,那…那你基本上就得改行了,显然,同时作为一位合格的财务人员和一位交互设计师是不太现实的。
这个例子说明,产品的研发者不是产品的用户,要设计出好的产品,需要进行科学严谨的用户研究,于是才出现了“人物角色”、“情景描述”等等方法用于避免出现类似上面的错误。
(more…)
NetStatusEvent抛出的info.code是:
"NetStream.Play.FileStructureInvalid"
这些都正常,然后接下来再播放其他正常视频时,Flash会假死(默认15秒),有时立马假死,有时过一会才假死
尝试close或remove再new和add也是如此
用FLVPlayback和VideoPlayer组件试过了,也是如此
不知问题出在何处,还是bug。
]]>
则clear()方法不能清除平滑层,解决办法是clear()之前先smoothing=false;
]]>例如我的网站有提供Feed,但blog的某个分类却没提供,这时如果分类的页面能输出hatom的结构与数据的话,就可以能过工具(例如: hAtom transcoder , hatom2atom )把它转换成atom或者RSS,试着访问: http://tools.microformatic.com/transcode/atom/hatom/http://www.aoao.org.cn/blog/category/dev/ 看到的就是转换出来的atom,这样的话你甚至可以把搜索的结果转成atom(其实WP虾米feed都是可以输出),好像转把页面转成RSS或者atom也没什么特别的作用,介于这样,我们只研究不应用好了。
hAtom整体结构如下:
hfeed (hfeed). optional. feed category. optional. keywords or phrases, using rel-tag. hentry (hentry). entry-title. required. text. entry-content. optional (see field description). text. [*] entry-summary. optional. text. updated. required using datetime-design-pattern. [*] published. optional using datetime-design-pattern. author. required using hCard. [*] bookmark (permalink). optional, using rel-bookmark. tags. optional. keywords or phrases, using rel-tag.[*] Some required elements have defaults if missing, see below.
本来想全译成中文的,可是我发现我用了二十几年的语言都不知道怎样表达 Feed Entry及一些看起来很简单的东东,所以大家就将就着看,我也就不翻译了,抽出几个出来,详细完整的介绍看官方WIKI。
Feed : 标示一个feed元素,使用class hfeed,可选,如果没用则假设整个页面都是,hAtom可能包括有多个feed元素 Feed Category:必须在feed内但又不在entry内,使用rel标记。 Entry:在or里的微格式会给忽视。 Entry Title:如果没有的话会找entry里第一个Hx 或者页面的(在没有feed的情况下),或者把它当成空处理。 Entry Content:出现多个会按文档顺序连起来 Entry Permalink:如果没有的话会用网页的url,如果entry内有ID的话就是锚点, Entry Updated:如果没有就用Entry Published, Entry Author:要hCard,可以有多个。 如果你想在wordpress上使用hatom的话,可以参考一下这篇hAtom and Wordpress。
在官方有批examples ,上边有各种关于hatom奇奇怪怪的应用。 个人看法,现在对应的“硬件”不成熟,各种应用都比较极限,也许在以后,hAtom会有很好的发展。
]]>
在CSS规范中有一个渲染对象的概念,通常用一个盒子(box, rectangle)来表示。 mozilla通过一个叫frame的对象对盒子进行操作。frame主要的动作有三个:
构造frame, 以建立对象树(DOM树) reflow, 以确定对象位置,或者是调用mozilla的Layout(这里是指源码的实现) 绘制,以便对象能显示在屏幕上总的来说,reflow就是载入内容树(在HTML中就是DOM树)和创建或更新frame结构的响应的一种过程。
现在,我们能形象地看到这个reflow是怎样的一个过程了(via:What is a reflow?),先看一下Mozilla的首页;
阅读器看不到点这里看。
如果能了解渲染过程的话,自然就可以控制减少网页的开销,不过我还不知道这是怎样搞出来滴,谁知道跟我说一下,这里还有维基百科首页和跟google.co.jp的首页的。
扩展阅读:Notes on HTML Reflow
]]>我在做好排版并导出PDF后发现封面的图片好像蒙上了一层白雾,整个看起来就特别的差,印刷出来之后的效果也是一样,黑的地方不够黑,白蒙蒙的一片,我一直以为是图片的问题,于是就加强图片的色彩,结果还是不行。后来我留意到并不是所有页面里的图片都会出现这种现象,那我就想是不是页面中其它问题产生的。于是我用剥除法一点点去掉页面中的元素。后来发现原来是一个有透明背景的图片使得整个页面蒙上了一层白色。经过我反复的测试也证实了这一点,页面中泛白的问题来源于其中某一张图片的背景透明。
后来我发现除此之外有一些页面依然还是有这种泛白的情况,那么我去核查发现原来InDesign中的阴影效果同样不能用,虽然InDesign提供了这些特性但是并不表明这些效果是百分百可用的。
但是我们要背景透明也是为了使图片与其它图片或是文本、背景等有一个很好的设计效果。如果不能使用那又怎么办呢?阴影我们可以自己做一个灰色的底当作是阴影。但是不支持透明那就表明有很多效果实现不了。如何解决这一难题呢?其实很简单,用蒙板。这个我们在Photoshop或是Illustrator中都有接触过。如果你有在使用InDesign你一定会发现软件中并没有一个蒙板的词。就算我们辛苦勾出来的轮廓好像一样没办法把图片勾出来。因为根本没法把勾出来的路径与图片合并。事实上这里就需要用到“路径查找器”了。我们只要选择“减去”就可以了。不妨去试一试,不过要注意,你的路径一定是要把不需要的地方勾出来。
好了,下面我们汇总一下上面那些啰嗦的话:
导入的图片不要有透明的特性 不要使用软件自带的阴影效果 要抠出想要的图片就要先抠出不想要的部分,然后使用路径查找器减掉不需要的部分注:我不是InDesign的专家,请不要问我问题。这里只是把我遇到的问题标注出来让大家知道,如果有相关问题请在网上搜索或是自己研究。
]]>主题1:动态内容的CDN缓存
结论,目前CDN缓存仍然以静态内容为主,动态页面缓存过期/更新策略较复杂;而CDN有purge接口,但现在实际应用较少: 更多缓存服务是为内容永不更新的图片、视频等服务;此外,固态盘代替逐步内存的可能性近期还没有,固态硬盘的仍然价格非常高,I/O的速度也是问题;
主题2: Memcahce的使用
所有网站都用了Memcache,并通过避免对数据库的连接而大大提高了性能(命中率在90%以上);
关于:多memcahced的分布策略;
客齐集
规模: 在多台前端应用服务器上划出一定空间,
分布规则:使用的是memcached addserver方式由memcache自己进行缓存分布;
单点失败处理:遇到个别节点中断会retry;
博客大巴和VeryCD应用类似:
规模: 几十G(单个2G);
分布规则:都是自己应用设置设置缓存分布规则,对数据进行分布,
单点失败处理:如果遇到Memcached中断并不尝试其他服务器;
关于memcache的压缩:
PHP客户端可以设置压缩外, server端也有更详细的压缩配置选项(memcached的文档中有?);
关于memcached的扩展性: 最新版本有考虑consistent hash(在扩展服务节点后,旧内容仍然再旧服务器上,不用按重新按新的分布规则生成新缓存)
memcached: bin模式存储;
对于缓存对象:大的List列表页对象用memcache缓存对效率提升很重要;
主题3: Start up公司的招聘来源
客齐集的校园招聘成果还是让其他公司非常的眼红,另外说一句: 我们仍然在招前端应用开发人员(欢迎应届生):有优秀的开发人员,各个Startup公司之间都是可以推荐的(VeryCD的51job招聘广告就是托管在博客大巴的)。
以后还会不定期做一些交流: 更多讨论请加入实践讨论组。
]]>关于第一条可能对大家影响不大,不论怎么说MAC下用IE的人实在是太少了,好处是可以让我们针对IE8再写个专门的CSS样式表。如果还不知道IE5/MAC过滤器的朋友可以把下面这个代码复制到自己的CSS样式表中,然后再写个叫“ie5mac.css”的样式表。不过大家可以把这个IE5MAC改为IE8WIN。
/**//*/ @import "ie5mac.css"; /**/如果说第一条还算是个不好不坏的情况,那么第二条就明显很糟了。大家都知道不论怎么说text-overflow:ellipsis;也是CSS3中已经确定的,IE本来是支持这一特性的,为什么在IE8又放弃这个支持呢?关于截字省略的这个我一向主张应该由CSS来解决的,这样可以保持XHTML代码信息的完整性,又方便样式的变动,不过Firefox一直都没能支持这一特性让我十分的费解,即然是CSS3,并且是个很实用的效果为什么不尽早的支持呢?不过目前IE8还只是个BETA版,希望未来IE8能继续支持text-overflow:ellipsis;
]]>在没有讲CSS之前我们先去想一下什么样的段落才看起来才是最舒服的?如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一 浅谈文本排版》。不论如何至少我们的小学老师告诉我们每一段的第一行应该空两个字。这可能是我们接受到的第一个关于如何划分段落的方法。并且可能更多人已经产生了思维定式,认为段落必需要首行空两格。而我则认为区分段落的首要素同段距,其次才能是段落首行的处理。而首行的处理是否只有缩进两字呢?我个人认为不是,因为我们还可以用“首字下沉”、“首行突出两字”等来表现。有人会说:“首字下沉我就见过,比如作者的博客就用了这个效果,但是首行突出两字似乎有点奇怪。”然而事实上首行突出两字必不是作者发明的,在中国古代的奏本上就常采用这种格式,不同的是因为他们常需要在行首写上一些颂语,而要表达这种颂语就需要抬高其地位,比如“君”“圣上”等字眼,所以才会突出两字,久之则形成了一种特别的排版形式,这种形式现在的文体是用得少了,不过大家可以多多了解一下,方便以后表达不同的文体时可以用得着。

即然段距是段落区分的第一要素,那么我们就先来解决这个段距的的样式问题。即然是一段一段的那么我们每一段都是由一组
组合而成的,而我们的CSS只要通过对这个段落标签的描述就可以实现我们所需要的效果了。那么基本形式是: p {这里是样式描述内容}我们注意到了,在CSS中这个段落标签是不需要加尖括号的,只需要一个"p"即可以了。所有的标签都是如此处理。那么我们需要给每个段落设个段距,这里我们有两个描述属性,一个是padding,另一个是margin,这两个表现的效果看起来有点像,但是却有着本质上的区别,如果我们把段落表示成盒子,在这个盒子里装着一些东西,padding就是这些东西与盒子内侧边的距离,而margin则是盒子与盒子之间的距离。这里很显然,我们里应该是使用margin。写法是:margin:1em 0;这是一种简写的方法,如果写全了应该是:margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 这很明显太冗余了,所以一般我们通常是写成:margin:1em 0 1em 0; 这里的顺序是上右下左,由于上下的数值是一样的,左右的数值是一样的,那么就可以再缩写成:margin:1em 0; 这里的em是指相对长度单位,相对于当前对象内文本的字体尺寸。有关于单位的知识请查阅沈苏小雨编制的《CSS2.0中文手册》。那为什么要用em而不用px或是pt呢,这是因为我们现在的流览器大多都有字体放大的功能,这也是方便读者的能看得更清楚文字内容,那么如果我们用px来设定段距那么当字体放大时段距却不会变动,那么当放大到一定数值时这个段距的特性也就不存在了。所以我们使用em这个单位,也就是希望当字体变大时段距也跟着相应变大,方便识别。

这里值得注意的是,当我们使用margin的时候两个段落之间的margin会有重叠,那么看上图中右侧的图我们可以发现在两段之间的margin是被重叠了原本应该是两个高度相加的结果还是一个高度,但是上图中间的示意padding却没有重叠他们的高度是相加的,这点大家要注意到,这不是什么BUG,而是一种特性。那么我们就写一句CSS来设定我们的段落:
p {margin:1em 0;}说了段距自然就会说到行距,有看过《网页设计技巧系列之一 浅谈文本排版》的朋友就会明白行距的重要性,那么你是否有给自己的页面设置行距呢,是如何设置的? 设置行距有一个专门的属性:line-height,这个应该称之为行高。因为我们要设定的是一行的高度,而不是行与行之间的距离。这也就是为什么我们总发现Photoshop里设置行距的数据与做网页设置的数值不一样的原因了。但是行距依然是可以通过我们设定的行高最终产生,所以方法不同,但是目标是一致的。一般我们的行高一定是要超过字体高度的,否则行与行之间就会重叠,当然我们不排除使用这种式做一些特别的效果,但是至少在阅读文本上我们需要行行清楚。行距不宜太大,太大了阅读效率不高,如果太小了又容易读错行。所以一般行高不应超过两个字的高度。振之最常用的是1.6em~1.8em之间,如果宽度很大,我们就需要加大行距不然我们很容易读错行,如果宽度小的时候行距过大则失去了阅读的效率。那么我们把刚才的段落的CSS做一下增加,标注一下我们的行距:
p {margin:1em 0; line-height:1.6em; }这样对于一个基本的段落设置就已经完成了,如果需要给这个段落加个首行缩进,还可以为这个段落设置一下字体,字大小,字样式,色彩等等:
p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em "宋体"; color:#000; }这里关于字体的属性也是个缩写形式,顺序是:“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”,这些知识在沈苏小雨的CSS2.0中文手册中都有讲述。我这里就不重复了。这里的color是文字的色彩,#后面的数值应该是6位,可以直接复制Photoshop拾色板里的数值。但是我们也常常会缩写。缩写方式是,奇数位与偶数位的值相同时即可合并为3位的色值。比如:#4488cc,可以缩写为#48c,如果需要首突出,那么不光需要把text-indent的值设为负值,还需要修改padding的数值,因为突出去的也就是超出了内容区那么如果padding区没有空间那么这两个突出去的字就无法显示。那我们再给出一个首行突出两字的CSS
p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal 12px/1.6em "宋体"; color:#000; }有关美化段落文本的内容先讲到这里,下一篇讲解首字下沉的做法以及注意事项!
]]>此次:我不是塑料袋:环保袋设计大赛活动网站: zhuanti.blogbus.com/bag/
奖品:
评委会奖(1名):MacBook Air
独树一帜奖(2名):价值5000元奖品
不拘一格奖(2名):价值2000元奖品
*奖品涉及到的个人所得税由获奖人自理
所有参加投票的网友均有机会抽取100名参与奖:
BlogBus明信片一套*50套
触动传媒提供小礼品*50个
更神奇的地方是当定义到的英文字体不属于Serif的话,也会用华文细黑。
原因找出来了,解决的办法自己就有了,
顺便介绍一下网页上常见的字体族科:
Serif(如Times、Georgia、New Century Schoolbook等):不等宽,边角和笔画结尾处有衬线修饰; Sans-serif(如Helvetica、Geneva、Verdana、 Arial、Univers等):不等宽,边角和笔画结尾没有修饰; Monospace(如Courier、Courier New、Andale Mono等):等宽字体,可以有修饰也可以没有; Cursive(如Zapf Chancery、Author、Comic Sans等):花体字; Fantasy(如Western、Woodblock、Klingon等):其他类 ]]>效果:
测试了一下,对于博客大巴目前的应用来说,启用压缩后,相同的容量(2G)存储的对象数量增加了约一倍,缓存命中率从50%左右,提高到了60%左右。
前提1:MemCached已经用满
先用memcached-tool查看一下memcached的容量统计,看memcached是不是已经用满了。如果充分运行时MemCached的空间尚未用满,启用一下压缩是没有意义的;
前提2: 压缩率
缓存的数据的确有大于几百字节的,如果都是小于100字节的键值对,压缩可能反而带来膨胀。由于缓存对象的大小在Memcached中都是按照固定大小分块存储的,最小也要88 B。所以对于过小数据带来的压缩膨胀并不是太大的问题;
前台应用的CPU损耗:
对数据的额外压缩CPU损耗远远低于缓存命中率提升减少后台数据库访问带来的性能提升,和http的gzip/deflate压缩类似,压缩后数据一般为原数据大小的30%左右,节省的70%系统传输性能消耗会大于文件压缩带来的性能损耗;
问题是这样被发现的:最近使用Apache 2.2的内存缓存mod_mem_cache机制进行后台静态文件加速。但是总是发现命中率很低,几乎是缓而不存,而用了mod_disk_cache后,前端缓存目录空间增加非常快,以至于经常需要删除文件,而删除文件的I/O损失超过了直接访问后台访问的加速所得。后台明明只有几M模板图片和CSS文件,为什么缓存空间上G而且命中率那么低呢?查看了一下缓存目录下的文件,Apache的前端磁盘缓存就会根据浏览器除了针对内容的.data文件和.header文件外还有一个.vary目录:
Jqyw8OvBIlgaef7Zb8lQ.data
Jqyw8OvBIlgaef7Zb8lQ.header
Jqyw8OvBIlgaef7Zb8lQ.header.vary/
当遇到和原有Vary不同的Header时,会在 header.vary目录下生成更多的缓存;从Apache的讨论组上看原因就是IE的AcceptEncoding请求头信息里增加了一个空格;
IE : Accept-Encoding: gzip, deflate
Firefox: Accept-Encoding: gzip,deflate
于是按照Fernando的方法,将后台的Vary Header禁掉了。缓存空间立刻停止了增长,也不再有Vary AcceptEncode 头输出了,这个头信息可能是后台使用压缩模块造成的吧;
记录一个调试缓存缓存用命令行看Header输出的方法:
用curl -I 查看HTTP头信息;
查看缓存后输出结果:
curl -I http://www.example.com/foo.bar
查看缓存前的服务器输出:
curl -I -H "Host: www.example.com" http://ip.address.of.example/foo.bar
var html:String = html过滤测试;
var _textField:TextField = new TextField();
_textField.htmlText = html;
var str:String = _textField.text;
trace(str);//html过滤测试
对Flash不支持的标签也有效。
]]>function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
以后ExternalInterface将是主流,这个thisMovie便是通道的一把钥匙。
]]>