charies_蔡

[转载]2010新西兰最佳平面设计奖——识别设计类

charies — Thu, 17 Feb 2011 12:17:28 +0800

原文地址：2010新西兰最佳平面设计奖——识别设计类作者：陆俊毅

金奖

银奖

铜奖

Web Design Trends in 2011

charies — Sun, 09 Jan 2011 17:24:09 +0800

设计与开发之间本有一线界限，但当时代步入又一个十年，这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面，足矣？或许五年前是吧！现在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果你追求华而不实的设计，那么相信你很快会被时代遗弃。2011年不再属于单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计（responsive design）、持续联系（constant connection）和虚拟现实（virtual reality）。

作为设计师的你，2011年会作神马打算？真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。肤浅的赞赏易得肤浅的设计也易被遗忘。出色的设计师犹如造梦师，给用户创造一个梦境，让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素：优秀的配色，直观的设计，良好的交互性和快的响应速度。此外，永远不要低估简约的力量。2011年，你的设计不但要考虑笔记本、台式电脑，还要考虑智能手机、上网本和平板电脑等设备。你都准备好了吗？

2011年网页设计趋势有何变化？一起关注11个网页设计趋势热点：

1. 更多的CSS3 + HTML5

这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在2011年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之。2011年，Flash渐行渐远，魔术师 “HTML5”成为舞台的主角：

当然，说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此，2011年两者会各自保持属于自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计，他们会在一些可用的地方使用 HTML5替代Flash，使网站变得简单运行更快速。然而，目前HTML5还不能够取代Flash，Flash的某些效果HTML5暂时还不能够实现。

然而最值得人兴奋的是CSS3的应用越来越广，在某些地方甚至超越PS（Adobe表示有鸭梨），因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会，是时候去了解CSS3和HTML5。

2. 简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果。比如：

只是简单的绿色，通过调节透明度设计出如此美观的Twitter可视化工具。可要知道：这个网页只是用了XHTML/CSS和Javascript，给力吧！

红色绝对经典，如果配色做得好给人的视觉冲击就更……。上面的网站独特的红色和易友好的文字设计让人不得不为之折服

3. 移动互联网时代的到来

智能手机，ipad和上网本随处可见，OMG，2011年这个现在将会更加明显。这意味着你的设计需要考虑更多的设备。

创建适合移动设备的网站不是简单地在原有的设计去掉华丽的元素，那将会是没有灵魂的设计。尽管在原有的设计再设计一个支持移动设备网站是件痛苦的事情。幸运的是，新的技术让一切变得更简单。

在使用CSS3的情况下，设计移动网页方便多了。最重要的是你可以修改一个CSS文件完成整个网站修改以符合用户使用不同设备进行浏览网页。

你也可以设计一个移动设备专属的网站，但相信那个网站不久还是要改版的，以现在科技产品的发展速度来看。越来越多的移动网站包括原始网站的浏览选项。如果你不提供这个选项或者你的原始网站没有针对移动网络标准优化，那你并未准备好迎接移动互联网时代的到来。据相关预测，智能手机销量将会超越个人 PC。赶快准备好，迎接移动设备大军的来临。

4. Parallax Scrolling

先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。Parallax Scrolling可以通过一些简单的CSS技巧或jQuery插件来实现（示范站点：站点1 站点2）。Parallax scrolling运用于网页设计的次要元素中可以起到很好的效果：如header、footer或者背景。不过最好不要运用于网站导航，那显得有点不伦不类。

Old Pulteney Row to the Pole 在网站背景使用了Parallax Scrolling特效，打开该网站然后往下拉即可看到效果。

5. 设计需考虑更多的触屏设备

触屏技术应用越来越广泛，触屏设备随处可见。这意味着，你的导航设计不再只是鼠标导航，你必须要要考虑你的设计适合触屏设备。请问你的设计做到指尖导航了吗？

作为设计师，我们更喜欢鼠标。当鼠标悬停的时候链接会变得高亮，然而触屏没有所谓的悬停。你将会在设计中如何向触屏设备访客展示链接？

同样，如何才能做到方便你的游客仔细阅读您的网站？这可能在浏览器标准上存在争议，或者水平滚动触屏可能更加合适。将网站设计类似于杂志的布局更有利于游客浏览你的网站。

最后，你必须考虑在你的网页设计中使用流体布局（liquid layouts）。2011年，你需要处理的重点不再是屏幕分辨率问题，而是如何做到使访客从垂直到水平阅读你的网站都会清晰。你的设计必须做到灵活以应付任何的挑战。否则你将会成为过去式。

Baby sees the iPad Magic, Copyright Steve Paine, Flickr

6. 深度判析

深度判析是关于在网页设计使用维数，这样可以使你的网页变得更加真实。如果运用得恰当，那将会是一个虚拟的3D效果，就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计，你仍然尝试使用维数进行设计。

Plántate提供了一个可旋转的3D地球，灵活利用阴影和层等手段。

Jordon活动页，3D元素清晰简单，设计非常醒目。（貌似已经撤掉）

7. 大背景图

大背景图的网页设计应用在2011年将会更加明显。这些背景图像一般是高分辨率，覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式，可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。

当然背景图的色彩、内容等都十分讲究，任何情况下都不要破坏用户的体验，不然再漂亮的照片也是枉然。图片类型趋向于一些比较柔和、略带透明的一类，不要影响到网站文字的阅读，讲究协调，易于阅读。

上面的网站使用了高分辨率的图片作为网站的背景，网站主色调是黄色。

This site adds playful animation with its grand scale imagery. Warning: auto-play music.

8. 不拘谨于顶级域名

严格意义上这一点与网页设计无关，但这一点也是发展的趋势，将出现更多创造性的域名。.com域名的吸引力越来越少，主要是你很难再找到一个比较短的.com域名。2011年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展，抢先一步，不然你很可能再次错失先机。

.me 用在个人展品陈列页、博客是非常不错的。

另一个.me域名的示范

9. QR: Quick Response

如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码，证明你已经看到2011年的这个趋势热门。但它跟网页设计何干呢？实在匪夷所思。

这个方形的条形码被称为QR，全称为Quick Response（在“QR Code读取器QuickMark” 介绍过）。使用你的手机拍摄一张唯一的条形码的照片，像魔术一样，手机上读取QR的软件就会打开条形码相关的网站。最美妙的事情是你可以将QR应用到很多地方。应用QR到你的网站，目的是让浏览者拥有一个你的移动网页的快捷方式。你还可以通过在您的网址上放置一个特殊的推介代码QR追踪你的访客。哈哈，你完全可以使用QR作为你的头像，然后到别人的网站留言、评论。2011年的移动媒体优势更加凸显，而利用这点优势的网页设计是最明智的选择也是将来的发展趋势。

上面是软矿博客的QR . 如果你也想创建一个，猛点击这里 .

10.缩略图设计（Thumbnail Design）

Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。

如果你的设计是基于Flash，会存在这样的一个问题，预览将无法显示你的设计元素。

2011年的一般互联网用户变得更加精明，他们更希望看到更多人性化的导航设计。

11. 持续联系/ Life Stream

Lifestreaming, 一种在线记录个人日常活动的网络应用，包括直接通过视频feed或通过聚焦一个人的网络在线内容，比如博客日志，在社会性网络上面的更新，在线相册，聊天内容甚至只是一些喜欢的网站的链接等等。

最后一点，不是最不重要的一点，是网页设计更加注重人与人之间持续联系，如Life Stream。互联网本身是原始的，枯燥无味的，是人类通过这个开放的平台分享他们的一切才变得多姿多彩。将来人们还会而且加强如 lifestreaming的形式进行人与人之间的交流互动。作为网页设计师，你必须了解这个趋势和应对这个趋势。

2011年，个人博客在Twitter feeds更活跃（不只是连接到Twitter页面的链接），人们会通过Foursquare互相传递即时信息，where are u and what are u doing。毋庸置疑，2011年将会带我们走进一个更交心的互联网时代。

个人网站，使用了 lifestreaming。

一个商业网站，在一个页面上综合大量信息。

原文地址：http://webdesignledger.com/tips/web-design-trends-in-2011

2010 Web前端技术趋势

charies — Wed, 15 Dec 2010 16:19:49 +0800

经过这段时间国内（百度，淘宝，新浪）及国外（Facebook，Youtube，Yahoo）各大公司的集中自曝，我们可以从中总结出2010 Web前端技术的一些趋势。总的来说，随着后端技术（存储，并发，分布式）的成熟，各大公司已经把重点从后端架构调整/建设转移至前端（TTI时间，快速发布，带宽利用率）。但作为明星技术的HTML5/CSS3，都未正式成为各公司的考虑重心，虽有所尝试，但在关键功能上，均未成为主力。这也W3C对当前HTML5/CSS3标准现状的表述：“不适宜用作生产环境”一致。

基本概念

Web前端技术的范围

1. 编程语言/技术（HTML，JavaScript，CSS等）

2. 跨浏览器兼容性/支持（JS Framework，CSS Library）

3. 网络传输性能（并行下载，带宽利用率）

4. 浏览器渲染时间/性能（TTI即用户可交互前等待时间，JS执行性能）

今年就我个人的感觉，Facebook无疑又成为了技术上的明星，在大家还在感慨其对于PHP的重大改进HipHop(Blocked inside China mainland)的时候，今年Facebook又在前端技术方面给大家带来了惊喜。

Facebook面临的问题

500M（Million）注册用户，50%每天至少访问一次，用户平均每日在线时间为5小时25分钟。带宽及服务器压力均很大。

Facebook的解决方案

Quickling

Facebook提出了一个新名词Ajaxify，顾名思义，就是将传统的POST/GET转换为Ajax请求。优点显而易见，首先减少了不必要的HTML传输，只请求和渲染页面需要更新的部分，这就相应减少了所需传输的内容加快了内容送达至用户的时间。并且也减少了服务端对HTML的不必要的渲染。Facebook也提到了可以减少session的重复load/unload。

使用Ajax也许不是什么新鲜的新闻，大家拒绝这项技术的原因可能很大程度基于SEO的需求。解决方案也很简单，将Ajax只是作为提高用户体验的手段，而不是浏览网站必须的方法，即可解决SEO的问题（P.S. Facebook不需要SEO）。

一些实现细节：

整套方案包括：Link Controller, HistoryManager, BootLoader, Busy Indicator, CSS Unloading, Permanent link support, Resetting timer functions。这些方案本身没有什么特殊的，大部分都可以顾名思义，需要解释一下的可能是link controller，其含义是将标准的HTML LINK请求转换为Ajax请求（通过绑定click事件）。Facebook的可贵之处是提供了这一整套完整的解决方案，最大程度上保证了网站的可用性。

效果：

提高了10%-30% 的网站传输时间，并提高了20%-30%的服务端页面渲染速度。

使用范围：

45%的Facebook页面使用了此项技术。

PageCache

简单的说，就是将访问过的页面缓存在客户端。但我们知道，作为Facebook这样交互性很强的网站，需要保障用户能尽早的获得更新后的信息，而不是给用户展示一个毫无意义的过期页面。

Facebook设计了一个框架来识别一个页面是否来自于缓存（猜测：页面首次加载完毕后将所有Ajax的Callback和Result缓存在本地。Facebook页面是基于Ajax获取页面内容，参见BigPipe），若来自于缓存，通过Ajax来更新所需更新的模块（猜测：通过JS预先定义本页面所需更新的div Id及对应的callback handler，并在页面下载时同时下载下来）。

其提到了三种更新类型：增量更新，用户复写（例如用户在页面上回复了一则评论）及跨页更新（例如在消息详细页面将一则消息标识为已读，需将首页的未读消息数进行更新。）。核心思路还是依据Ajax进行更新。具体思路为：

增量更新：只要页面来自于缓存，即更新所有预定义的需增量更新的模块。

用户复写：通过HistoryManager记录用户操作并在cache页面读取后重放所有被标记为“replayable”的操作。

跨页更新：通过服务端Database API发送信号至客户端将过期缓存标识为invalid（不清楚如何实现。也许是DB端提供一个开放的webservice，客户端通过Ajax持续访问此API来获得此信息）。获得了缓存过期信号后，通过Ajax更新需要更新的信息。

Facebook顺带提到了一个更新Ajax内容避免页面变化/闪烁的小技巧，就是先将需更新的地方设置为blank，而非直接更新其内容。

效果：

加速了10倍的网站响应时间并节约了20%的服务端页面渲染成本。

BigPipe

此项技术通过将页面分割为各个Pagelets的方式，将整张页面的获取/渲染变成了并行的方式（感觉非常像iframe sets，但Facebook使用Ajax实现。）。此项技术是Quickling和PageCache的基石。此技术包含了服务端/客户端两方面，在前后端均打破了以往页面的渲染形式。

实现细节：

Pagelet的Response为JSON格式，包括id,css,js,content,onload等属性及相应内容，收到后会通过预定义好的JS function来进行渲染。

Pagelet提供的高级功能：Pagelet的继承，Phased Rendering（猜测：依据规则渲染，也就是依据Pagelet的Response进行渲染），跨Pagelet依赖（数据依赖，显示依赖，JS依赖）。

BigPipe的三种模式：

一次渲染模式：即普通模式，支持搜索引擎，用来支持那些不支持JS的客户端。

管线模式：即并行模式，并行请求，并即时渲染。

并行模式：并行请求，但在获得所有请求的结果后再渲染。

效果：

提高了2倍的页面响应时间。

YouTube面临的问题

每天2Billion的访问。每分钟上传35小时的内容。可YouTube需要即时播放视频！越快越好。

YouTube解决方案

1. 将JS引用位置从页首移至页尾。

2. 直接嵌入Flash Player（YouTube之前使用JS来加载Flash Player）。通过页尾的JS来判断客户端的Flash版本（或不支持Flash），来替换预先嵌入的Flash Player或内容（如果需要的话），用来支持特定的客户群。

效果：页面渲染时间从～400ms降低为～200ms。Flash播放时间从～1200ms降低为～1100ms。

3. 预加载视频连接：通过使用JS创建Image引用视频内容来与解析DNS并预开启一个connection供之后使用。

效果：建立视频连接的总时间从～260ms降低为～180ms。

4. 提供简化版：这个很无聊，就是提供一个简版。

效果：页面加载时间从～1750ms降低为～1100ms。

5. UIX Widget系统：延迟加载非关键内容。其实整段没什么新意，大部分省略，无非是通过Ajax在页面渲染完后再来动态加载非关键内容。比较特别的是利用JS的事件冒泡，在最上层用一个handler来处理各种事件（优点不详。。也许只是代码比较简洁集中吧），通过CSS来标识和识别对应的handler。

Yahoo Mail

Yahoo如何构建下一代的Mail系统？答案就是通过YUI3。Yahoo的技术绝对是最优的，其已经将web前端技术发展到一个非常成熟的地步，照顾到web的方方面面（数据压缩，模块化，高效CSS，非阻碍式JS加载，静态内容提供，利用浏览器cache等等），所以也鲜有创新了。某种程度上来说，Facebook的一些所谓创新也不过是后知后觉，Yahoo早已考虑并实现了这些方案，只是也许不是那么有针对性而已。

Baidu

感觉整体倾向于组织结构介绍及一些比较过时的内容。如有兴趣可移驾至http://v.youku.com/v_show/id_XMjE5OTM0NTA4.html 自行观赏。

Taobao

还在讨论一些何时使用Ajax，何时不使用的问题。略过不提。有兴趣的可以移驾http://ued.taobao.com/blog/2007/12/20/d2-2/ 自行观赏。

相反的，淘宝的精益测试倒是引起了我的兴趣，出自微软的淘宝员工鹤云讲述了淘宝是如何进行CI（持续集成）的。有一些经验例如代码覆盖率测试也给人一些启发。感兴趣的同学可移驾至http://www.infoq.com/cn/presentations/hy-tabao-lean-test 观赏。

新浪博客

也是一些组织架构，开发方式的内容。介绍了一下新浪自己的JS框架。并无太多亮点。有兴趣的移驾http://v.youku.com/v_show/id_XMjE5OTYzMTI4.html 自行观赏。

原文地址：http://www.cnblogs.com/pandora/archive/2010/12/12/1904032.html

doubanclaima67e6c559811b485

使用Google Code管理代码

charies — Fri, 02 Apr 2010 10:11:26 +0800

简单实用的Google Code

第一步：进入http://code.google.com/

第二步：点击左侧菜单的“项目托管”

再点击：“search Open Source Projects”

第三步：进入页面后再点击create a new object

第四步：开始创建

创建成功后的项目首页：http://code.google.com/p/yijs/

如何让其他用户可以使用svn checkout文件

点击administer 选项卡下的 Project Members 链接,在Project Member 文本框中添加成员的邮件地址()

如何使用svn checkout 文件

进入”Source“页面，如下界面：

其中包含了checkout的URL：https://yijs.googlecode.com/svn/trunk/ yijs

接下来要获取个checkout密码，点击“googlecode.com password”

这是随机生成的密码

使用svn（至于如何使用，请详见网上的教程。）在你需要保存的目录下，点击右键

留意这里的url最后不用加项目名

之后输入用户名和密码。

用户名为你的google的·登录名，密码为之前生成的随机密码

如何上传文件

点击Downloads，如下界面

亚马逊如何利用用户行为数据（转）

charies — Fri, 12 Mar 2010 12:08:10 +0800

亚马逊(Amazon.com)在利用户数据实现精准营销的方面有很多值得学习的地方。用户在使用亚马逊网站的过程中，很多行为都会被记录。亚马逊根据这些数据，不断勾画出每个用户的特征轮廓和需求，并以此为依据进行精准营销。

用户行为数据的收集

用户一般的购物流程：搜索了什么，看了哪些产品的详细介绍，最终购买了什么产品,都会被亚马逊记录下来。其他用户历史购买行为也在这里派上了用处，成为有利相关推荐。因为用户做购物决策的时候，也想知道其他人都看了什么，买了什么。

除了用户购买行为数据外，亚马逊还会搞一些活动来“勾引”用户说出喜好和需求。比较典型的活动就是投票。例如下面关于是否喜欢情人节的投票。多数喜欢情人节的用户是热恋中的人，亚马逊可能会推荐各种礼物，如情侣装，戒指，鲜花等。失恋和单身的人一般不喜欢情人节，亚马逊推荐失恋疗伤的书籍，如游戏机之类自娱自乐的的商品。

当然如果，用户对于投票的热情不高，亚马逊甚至会砸钱来“勾引”用户说出自己的喜好。一旦用户投票了，其观点、倾向、或者兴趣爱好就暴露了。换句话说，这个用户就被亚马逊打上“标签”了。

整合用户行为数据实现精准营销

光光收集用户行为数据还只是第一步，亚马逊强大之处在于它可以整合用户行为数据和喜好，并挖掘用户的潜在需求。对有相同特征的用户作定向、精准的营销。如果韩寒的新书上市了，亚马逊如何做一期推广EDM(邮件营销)呢？

首先，从用户购买行为数据中筛选出曾购买了韩寒写的书的用户。仅仅只有这些用户是我们的营销目标么？别忘亚马逊还收集了用户的一些非购买行为数据。对了，再加上在网站举行的关于“喜欢韩寒还是郭敬明”的投票中选择韩寒的用户。这样就行了么？当然不是，亚马逊还要分析这类有什么共同特征，从而为他们定制适合的促销方式。如果他们的购买行为数据显示，他们选择最便宜送货方式的比例要比整体的用户群体高。这说明这群用户对于运费价格比较敏感。好了，这次推广的目标人群和主题可以确立了。连邮件标题你都可以想出来了——韩寒新书（免运费）。

当然，这一切还没结束。目标用户收到邮件后，是否打开了邮件，是否点击了邮件中的链接到达了促销产品的Landing Page,这些行为都会被记录下来。整个促销推广活动而言，这样可以统计活动的效果，为下次评估类似促销的活动提供历史依据。就个体用户数据收集而言，还可以用来统计这个用户对于特定主题和特定促销方式的接受程度。这样的数据可以用来决定有类似的主题或者促销方式是否还发邮件给这个用户。因为失败的营销也会给用户带来不好的用户体验，从而让网站蒙受损失，生气的用户可能下次直接把亚马逊的邮件直接放到垃圾箱里。

转自：http://www.2beusable.com/how-amazon-use-user-behavior-data.html

DNF官网整容手册[转]

charies — Thu, 11 Mar 2010 10:00:49 +0800

原文地址：http://www.tgideas.com/?p=887

第1章引言

1.1 改版目的

为了配合DNF第五章新版本上线，并改善DNF官网的用户体验和功能，DNF开始了新的官网改版行动。

本次改版主要优化了页面结构布局，增加一些新功能和新板块，提高页面加载速度，改善用户的细节操作体验，为用户带来新的视觉感受。

更加华丽的介绍，请参见http://games.enet.com.cn/article/A1120100126050.html

1.2 官网主要调整

本次官网改版，主要有以下四个方面的调整。

首页增加赛事信息板块：随着DNF赛事的日益增多，为了方便玩家了解查询当年的各项比赛事宜，在官网显著位置添加了赛事信息板块。

首页增强游戏资料板块：为了新手用户更快的了解游戏，增加了游戏资料板块内的分类，增加了各种快速通道链接。

壁纸页面增加按日期排序的列表：旧版壁纸的浏览方式无法适应日益增多的壁纸，所以修改为将壁纸的预览图按月进行排序显示，每页显示5个月，列表顶部为最新三张壁纸的大图预览。

下载页面增加补丁搜索功能：方便那些知道自己客户端版本的用户更快的找到需要下载的游戏补丁，支持搜索框输入提示。

新闻列表页增加页卡：为了方便用户在新闻列表页对不同类别的新闻进行切换，增加了页卡功能，用户能更加容易的查看某个类别的新闻。

第2章为何加载速度不够理想

2.1 疯狂的HTTP请求

2.1.1 什么是HTTP请求

HTTP请求是从客户端到服务器端的请求消息包括，消息首行中，对资源的请求方法、资源的标识符及使用的协议。我们打开网页，网页加载图片、FLASH、JS脚本、CSS文件都会产生HTTP请求。

2.1.2 过多的HTTP请求会影响啥

HTTP1.1规范建议浏览器从每个主机名并行下载两个文件，每个文件都会经历连接、排队、等待响应以及接受数据的过程。

图2-1 HTTP请求情况

通过上图会发现，请求文件的时间很大一部分消耗在了排队和等待响应上，真正下载的时间是很小一部分，减少请求的数量就能减少响应时间。

所以，HTTP请求数量过多，会严重影响页面的加载速度。尤其是JS文件请求，会阻塞其后面内容的呈现，同时会阻塞对其后面文件的下载，直到脚本加载完毕。

2.2 夸张的下载量

2.2.1 华丽的群图

对于游戏网站，华丽而风骚的设计产生最直接的结果是大量的CSS背景图和庞大的下载量，在下载这些图片的同时影响了页面的加载速度。

另外对于官网大量的广告图片，不仅产生大量HTTP请求，而且下载量也是不可小视的。直接加载广告图片会导致页面加载缓慢。

减小图片的体积可以减少接收图片的时间。

2.2.2 冗余的代码

重复的JS和CSS代码，复杂的HTML结构，多余的空格、制表符、换行符、注释等等，都增加了文件的体积，影响了下载的速度。

第3章我们该怎么办

3.1 给他们找个家

零碎的各种小文件（包括CSS图片、CSS或JS文件等）会大大的增加HTTP请求的数量，我们需要用各种方法整合这些小文件，以减少HTTP请求数，也方便我们以后的维护工作。

3.1.1 CSS Sprites

尽量将各种CSS背景小图片整合到一张大图里以减少这部分所产生的HTTP请求。整合图片里的零碎图片尽量无缝排列，以减少问价大小，同时，图片采用不同的排列方式，得到的大小是不一样的。

3.1.2 整合CSS和JS文件

将公用的函数或者CSS进行整合，尽量保证公用的CSS文件和JS文件各为一个，以减少HTTP请求。页面私有的CSS或者JS代码，直接写入页面，无需采用外联的形式。

3.2 再等一会儿，你就上场了

3.2.1 为何要延迟加载

对于不是非要在加载前执行的CSS效果、JS文件，如页面修饰图片、广告JS函数、统计JS函数等等。在不影响用户浏览和SEO的情况下，我们可以对其进行延迟加载，以提高用户加载页面的速度以及健康度。

对于CSS图片，由于是游戏官网，设计师通常会采用各种图片修饰页面，渲染效果，导致页面元素会有大量背景图片，进而CSS图片体积庞大，影响加载速度。我们可以先对不是首屏的元素设置背景颜色，对背景图片进行延迟加载，在不影响第一时间浏览网页的情况下，提高页面加载速度。

对于JS，由于其本身不利于SEO，且大多JS实现的功能不是用户第一时间需要的，如统计函数、健康度函数等等，所以可以进行延迟加载。另外广告JS延迟加载是因为广告图片数量庞大，产生大量HTTP请求和下载量，导致页面加载速度受到很大影响，需要无条件延迟加载。

3.2.2 延迟加载的方法

需要两个函数，一个用于动态生成JS和CSS，一个用于延迟执行函数。对于要在JS加载后执行函数的情况，需增加一个函数，用于判断JS是否加载完毕。

对于判断JS是否加载完毕的函数，首先判断浏览器是否为IE，如果是IE，判断文件的readyState值是否为loading，如果是，等待文件加载状态改变，如果不是，则表明文件加载完毕，执行函数；对于非IE浏览器，直接使用onload属性，当文件加载完毕时，执行函数。调用方法为：loadjs(JS文件URL,加载后执行的函数名,函数的变量)。

图3-1判断加载是否完成

对于动态生成JS和CSS的函数，主要是使用createElement_x建立标签元素，然后使用setAttribute建立元素的属性，然后把需要动态加载的文件地址赋给src或者href属性。调用方法为：delay_js(“文件URL”)。

图3-2动态生成JS或者CSS

对于延迟执行函数，首先判断body标签的onload属性是否为空，如果为空直接把要延迟执行的函数名赋给此属性，如果非空，用变量记录属性值，然后将要延迟执行的函数名加进去，再将此变量赋给此属性。调用方法为：addload(函数名)。

图3-3函数延迟执行

3.3 还有几点得留意

3.3.1 减少body标签前的HTTP请求

在body标签前的HTTP请求会影响页面正文的加载，尤其是JS文件的请求会阻塞其后面内容的呈现，同时会阻塞对其后面文件的下载，直到脚本加载完毕。所以，应当尽量避免body标签前产生请求。

首先是公用CSS使用include文件代替（下节会提及）；另外就是所有的JS脚本都放在页面底部。

3.3.2 使用include文件

所有页面采用.shtml扩展名，方便使用include，以代替iframe、公用模块JS（如导航）以及不需要延迟加载的外联文件（如公用CSS），减少HTTP请求的同时，优化了SEO。当然这只是把客户端的请求转移到了服务器，在一定程度上增加了服务器的负载。

3.3.3 控制图片和代码的体积

控制图片质量，以减少图片的大小，尤其注意提醒产品，对于广告一定要压缩图片，以免出现100多K的广告图片。

各类代码可以进行精简，删除不必要的空格、制表符、换行符和注释；控制CSS类名和JS函数名、变量名的长度，在不影响以后维护的情况下，尽量短；删除重复的CSS类和JS函数；include文件只保留最基本的结构代码，多余的代码全部删除；优化HTML，去除无用标签，减少标签嵌套。

第4章看看整容后的效果

4.1 网站浏览概况

4.1.1 不太完美的邂逅

在浏览器没有缓存的情况下，用户在第一眼看到页面时，只能看到页面的文字内容和第一屏的图片，看不到顶部大背景，以及第二屏以后的背景图。

页面加载速度有很大提升，在网络正常的状态下，第一次加载整个页面，可以在3秒左右达到最终呈现效果。

4.1.2 再次访问

对于有缓存的状态，页面加载速度会更快些。顶部大图很快就能出线，不会影响用户浏览页面。根据统计，页面大概加载时间在2秒左右。

4.2 评测结果

4.2.1 健康度

健康度是测试页面加载时间的一个指标，我截取了从页面正式发布后5天的情况，3秒健康度稳定在88%左右。

图4-1 健康度统计

4.2.2 Yslow插件

Yslow是网页性能测试的一个Firefox插件，用其对首页进行测试，得分在80-90之间。

图4-2 Yslow评分结果

第5章由首页看手术过程

5.1 先想想，分析一下旧版

5.1.1 旧版首页产生的HTTP请求

旧版DNF官网首页会产生的HTTP请求包括页面本身、各类图片、JS外联文件、CSS外联文件、Flash、iFrame、iFrame页面片中的各类请求等等。其中：

各类图片包含：CSS图片、页面展示图片以及广告图片；

JS外联文件包含：健康度JS、广告JS（此JS又会生成另外两个JS）、ping统计JS、顶部通用条JS、各类公用JS（包含导航、脚标、公用函数集合等）、iFrame中的各类JS。

iFrame包含广告页面片、各类新闻页面片、第三方页面片。

5.1.2 HTTP请求分析

HTTP请求可进行如下优化：尽量减少HTTP请求，去掉不必要的请求；先处理重要的HTTP请求，延迟处理其他请求。对于旧版首页产生的HTTP请求：

健康度JS、广告JS中生成的qqgg_comm.js文件、顶部通用条JS、CSS外联文件、部分公用JS（包含导航、脚标等）、iFrame、部分CSS图片、部分JS文件属于不必要的HTTP请求，可以通过各种方法消除这类请求；

Flash、页面展示图片、部分CSS图片（非首屏图片、顶部大背景图和修饰性的图片）、广告JS中生成的Info_new_XX.js文件、ping统计JS、共用函数集合JS文件、广告图片属于可以延迟处理的HTTP请求，可以进行延迟加载。

5.1.3 旧版首页多余的字节

对首页内的各种图片、代码、Flash都有可以压缩的余地，尽量减少这些文件的大小，避免不必要的下载量。分析各个文件，可以进行以下处理：

官网首页含有大量广告图片，时刻提醒产品在发布广告前，对广告图片进行品质压缩，在不影响广告体验感的情况下尽量保持图片体积最小，一般小型广告图片可以在10KB以下，大广告可以在20KB以下。

各类代码可以进行精简，方法前面有详情，这儿不再复述。需要说明的是，首页精简后，节省了15KB以上。所以，这一步同样很重要。

5.2 先拿CSS背景图开刀

5.2.1 新版首页包含的CSS背景图

首页除了广告图片所在的区域，其他板块均含有CSS背景图，几乎没有以纯色做背景的板块。这是游戏官网都具有的特点，所有的板块均需要大量的修饰，以营造设计风格和增强视觉体验。

所有板块标题使用微软雅黑，并进行了渐变色彩处理；板块内容列表区域均含有一个发光效果的背景，如果板块有页卡，背景将随页卡的切换而拥有不同的发光点；首页顶部含有大背景图；其他还有一些零碎的背景图，包括脚标商标图、导航icon图、右上角手动广告图等。

5.2.2 处理背景图

使用CSS Sprites对背景图进行组合。但由于零碎背景图数目众多，全部整合到一个图片里，会导致图片体积过于庞大，所以要对背景图进行分类。

图5-1左：质感图片，右：首屏以及公用图片，中：其它图片

我将所有首页零碎图片分为3类：质感图片、首屏以及公用图片、其他图片。按照此分类，生成3张CSS Sprites背景图。

为保证细节图片相对细腻，三张CSS Sprites图片以品质90输出，大小分别是：质感图片25KB，首屏以及公用图片30KB，其他图片68KB；顶部大背景采用品质80输出，大小为 105KB；右上角手动广告图采用256色PNG8输出，因为含有透明背景，大小是28KB；顶部通用条背景是所有腾讯游戏站公用的，采用256色 PNG8输出，大小为29KB。

5.2.3 优化背景图呈现

整个首页含有6个背景图，加起来总共为285KB，体积庞大，如果直接加载所有这些图片，会严重影响页面的加载速度，增加用户等待的时间。因此，可以考虑优先加载相对重要的图片，延迟加载其他图片。

所以，页面对首屏首屏以及公用图片直接加载，其他图片延迟加载。这样，用户可以在第一眼看到首屏板块的背景图，首屏以下的背景图延迟加载，不会影响大部分用户的浏览。另外，顶部大背景延迟加载，是由于此背景图过于庞大，严重影响页面加载速度，因此考虑将其延迟加载。

背景图延迟加载的方法是，将所有需要延迟的背景图的CSS代码写入一个单独的CSS文件里，通过JS延迟加载这个CSS文件。

注意，如果一个元素的CSS背景图片要延迟加载，需确保其本身或者父级元素有设置背景颜色，也就是比如在首页的内置CSS 写：.box{background:#000000;}，在单独的CSS文件里写：.box{background:#000000 url(…) no-repeat;}。否则页面加载初期可能造成其文字与背景对比度不够，影响阅读。

5.3 我有Include偏执

5.3.1 为何使用Include

有利于SEO。生成静态内容的共用JS（如导航、脚标等），或者iFrame页面片虽然可以使代码的重复利用，但会严重影响SEO。Include的文件是在服务器端执行的，搜索引擎不知道文件是Include的，所以对搜索引擎并没有影响。

更少的代码。生成静态内容的共用JS会含有document.write等语句，而iFrame页面片含有<html>等完整的页面结构代码。使用Include可以将这些多余的代码去掉，而剩下最精简的结构，减少文件的体积。

更少的HTTP请求。生成静态内容的共用JS（如导航、脚标等），或者iFrame页面片均会产生HTTP请求，而Include的文件是在服务器端执行的，不会产生HTTP请求。

5.3.2 开始Include

Include代码需要主静态页面采用.shtml文件格式，所以首先是主页面文件使用这种扩展名。对于Include文件，按照微软的倡议，采用.inc文件格式。

图5-2 首页使用到的Include文件

对于DNF首页，公用CSS、脚标、头部内容、左侧导航、顶部通用条均是Include文件。另外，首页上的所有新闻列表都采用Include页面片。

页面片要进行精简，多余结构要全部删除。例如新闻页面片的结构如下<ul><li><a target=”_blank” href=”http://dnf.qq.com/act/a20100224zbsc/zbsc.shtml”>周边商城开春好礼大派送< /a></li>…</ul>（这里省略了新闻时间）。

5.4 修补JS函数

5.4.1 首页需要的JS以及使用原则

首页涉及到JS使用的地方包括：URL判断生成顶部大背景、新闻板块需要页卡切换功能、轮播广告和单帧广告、Flash延迟加载、健康度统计、ping统计、问问跳转、合作伙伴下拉菜单、第一条新闻判断。

尽量避免页面内容前出现任何形式的JS，也就是将JS放在页面最后。因为JS会阻塞其后面内容的呈现，同时会阻塞对其后面文件的下载，直到脚本加载完毕。所以，DNF首页除了健康度的代码需要放在顶部以外，其他的代码均可以放在页面的最后。

删除函数内多余的空格、换行符和制表符；不影响以后维护的情况下，变量名尽量的简短；只保留函数之间的换行符。

延迟执行或加载所有JS。因为生成静态内容的JS全部使用Include代替了，所以剩下JS均可延迟加载或执行。方法前面有详述。

5.4.2 URL判断执行函数

页面大部分函数是根据URL判断来执行的，函数根据不同的URL来执行相应的函数。函数如下：

5.4.3 URL判断生成顶部大背景

由于官网引导页和其他页面的顶部大背景不相同，为了方便以后的维护，将这两种大背景的CSS样式都写到公用CSS文件中，并通过JS判断URL，给与不用的CSS类名，达到生成目的。函数如下：

function wp(c){var wp=document.getElementById(“wrapper”);wp.className=c;};

其中，变量“c”由URL判断函数给出，作为顶部大背景的类名给与页面结构的外框。

5.4.4 新闻板块需要页卡切换功能

由于板块内容列表区域均含有一个发光效果的背景，如果板块有页卡，背景将随页卡的切换而拥有不同的发光点，所以，当页卡进行切换时，内容列表区外框标签的CSS同时需要切换。函数如下：

其中，变量“elem”是该新闻区域的id名。

5.4.5 轮播广告和单帧广告

之前广告JS文件是外联形式，而此文件里的函数只是另外动态加载两个JS文件（Info_new_13.js和qqgg_comm.js），这样造成了3个HTTP请求。

其中qqgg_comm.js里的函数是生成广告的，可以写入公用JS文件中，可以节省一个HTTP请求；Info_new_13.js里是DNF相关的广告信息（包括广告ID、图片地址、链接地址等），这个文件由于体积相对庞大，需要延迟加载。

重新编写了生成广告的函数（DNF公用JS文件中的gg(ids)函数），将所有涉及到广告生成的函数进行整合和修改，现在只需要调用新的广告生成函数，向里面传递广告id数组和插入广告的结构元素id即可。需要说明的是，新函数仅属用于页面内只含有一个轮播广告的情况，且支持非连续id的广告进行轮播显示。

广告函数的生成依赖于Info_new_13.js的加载完成，因为广告生成函数需要调用DNF相关的广告信息，所以需要Info_new_13.js加载完成后，在执行广告生成的函数。执行方式如下：

loadjs(u,gg,[[1160,1161,1162,"swaps"],[1165,"ggs1"],[1166,"ggs2"],[1167,"ggs3"],[1168,"ggs4"],[1173,"ggs5"],[1174,"ggs6"],[1169,"mt1"],[1170,"mt2"],[1171,"mt3"],[1172,"mt4"]]);

其中，变量“u”就是Info_new_13.js的URL；数组的写法是：[[轮播id1,轮播id2,…,"插入广告的元素id1"],[单帧id1,"插入广告的元素id2"],…]

5.4.6 ping统计

对于ping统计函数，执行方式和广告函数类似，需要ping.js文件加载完毕后，再执行统计函数。

由于官网页面统计函数中的spreadPathTag变量有不同的值，所以需要根据URL判断页面，然后给与不同的变量值。函数如下：

调用方式为：loadjs(ping_url,pings,”dnf_index”);

5.4.7 其他函数

另外，Flash延迟加载、健康度统计、问问跳转、合作伙伴下拉菜单、第一条新闻判断等函数，实现较为简单。

Flash延迟加载函数如下：

function dl(){var dl=document.getElementById(“dl”),size=’width=”200″ height=”100″‘,doc=’http://dnf.qq.com/web201001/swf/dnf.swf’;var swf=’<object codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ ‘+size+’><param value=”‘+doc+’” /><param value=”high” /><embed pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” src=”‘+doc+’” ‘+size+’ /></object>’;dl.innerHTML=swf;}

健康度函数是将cdn_speed.js里的函数直接放在页面里面，以减少一个HTTP请求。这个函数只能放在页面顶部。

问问跳转去掉yk.js，以减少一个HTTP请求，将里面redirect(q_ttl);函数写入页面，其他函数未发现页面调用，可以去掉。

合作伙伴下拉菜单函数如下：

第一条新闻判断函数用于将页面顶部新闻的第一条赋予单独的样式，如下：

function top_news(){document.getElementById(“news”).getElementsByTagName(“li”)[0].className=”top_news”;document.getElementById(“bulletin”).getElementsByTagName(“li”)[0].className=”top_news”;};

结束语

与首页一样，其他页面的重构方式相同。最主要的就是尽量减少HTTP请求，缩小各种文件的体积。很多Include和JS文件可以直接使用，需要注意的就是CSS背景图如何整合，直接加载重要的，延迟加载不重要的。

这次DNF官网改版，在减少HTTP请求数和追求更高的健康度上，可能部分方法相对极端，更好的方法有待深入研究。希望此文档能在今后各个产品的官网改版上帮助到各位同学。

面向对象的CSS

charies — Sun, 05 Jul 2009 12:49:32 +0800

“你如何为成千上万的用户和页面提供CSS？” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会上的幻灯片中尝试回答的问题。得益于面向对象的CSS (OOCSS) ，这个想法从社区收集到了大量的反馈。

OOCSS显然已经不仅仅是一个工具了，它还是一种思考的方式。根据这个观念可以有很多优势，主要来说有：

它可以让你写更快的、可维护的、基于标准的前端代码。
它在CSS中预先加入了一些必须的元素，这样即便是初学者也可以参与写出漂亮的网站。

OOCSS 基于两个主要原理：

分离结构和表现；
分离容器和内容。

建议花些时间看一看面向对象的CSS的幻灯。总共有64页，绝对值得一看。

Object Oriented CSS

View more documents from Nicole Sullivan.

PS:神飞之前就有考虑将此幻灯翻译成中文，但是作者不允许下载，所以大家就将就着看吧先，另外考虑翻译一些相关的文章来更多的解释OOCSS。

PS2，貌似国内也有个人做了一个OOCSS，意思也是面向对象的CSS，不过和这个不是同一个。

原文：http://www.qianduan.net/object-oriented-css.html

工程师与科学家 realazy

charies — Mon, 29 Jun 2009 18:21:37 +0800

入行已久，做的领域也从浏览器扩展到桌面端甚至是手机端，对 Web 标准多少有些自己的看法，今日斗胆一说。

两种家

我们困惑不解、迷惑不安，很大程度上源于没有指导思想。要摆正自己的位置，我们究竟是想做科学家，还是想做工程师。简明扼要，科学家经常要问“为什么”，他们关心了解人类不懂的知识；工程师则利用科学家发现的知识，制造对人类有用的物体或工具。前者研究，后者实战。很明显，我们大多数人属于工程师，W3C 那一群才是科学家。端正自己的态度，很多疑问就会迎刃而解。

两种用法

HTML 生为标记语言，是组织文档的一种格式。随着技术和社会的不断进步，HTML 的用途也逐渐升级。今天它不仅出现在浏览器上（普通网页），它还出现在桌面程序上（Adobe AIR），出现在手机程序上（PalmPre WebOS）；它不仅用来展示网页，也用来构建程序的用户界面。Web 标准要求我们，HTML 必须有良好的语义化，对于展示内容的文档来说，这是毋庸置疑的，但对于只是作为构建用户界面的程序来说，强调语义是没有多大意义的。要注重语义的时候一定不能松懈，只是用户界面而已的话，怎么方便怎么来，利用最方便的手段做最适合的布局。

实用主义的前提

工程师信奉的是实用主义，但不等于可以放弃原则和规范。工程师关键任务是在遵守规范的前提下，发现、理解并结合实际的局限来达到满意的结果。作为一个流量巨大的网站，Google 对待 HTML 的态度是一个非常好的例子，省略</body> 和 </html> 的做法我们何曾想过呢？但这却是符合 HTML 4 规范的。详见： http://code.google.com/speed/articles/optimizing-html.html（需自行翻墙）。

原文地址:http://realazy.org/blog/2009/06/29/engineer-vs-scientist/

如何选择图片格式

charies — Mon, 15 Jun 2009 13:40:26 +0800

GIF

GIF是一种调色板型（palette type）（或者说是索引型）的图片。它含有多达256种的颜色。每一个象素点都有一个对应的颜色值。因为这种格式不再存在专利权的问题（译者注：想简单地了解一下gif的历史,请点这里）,所以你在创建gif图片的时候不会再有被抓进监狱的危险。（想要了解更多关于gif的历史,请点击这里.）

GIF是一种无损压缩的格式，这意味着当你修改并且保存了图片的时候,它的质量不会有任何损耗。

GIF格式也支持动画.在黑暗的web1.0时代，它导致了大量多余的昙花一现的“新”图片（blinking “new” images），循环的@符号（rotating @ signs），birds dropping，a email以及其他一些让人厌烦的东西的出现。在更加文明的web2.0时代，在等待一个更新页面的ajax请求的时候，我们仍然会看到 “loading”动画，但是也有一些比较讨人喜欢的东西,人们喜欢把它们放在自己的网络上。不管怎么说，如果你有需要，就可以使用动画支持。

GIF也支持透明度，透明度的值是一种布尔类型数据。GIF图片里的一个象素要么完全透明,要么完全不透明。

JPEG

JPEG图片不象GIF图片那样只能有256种颜色，它可以包含数百万种颜色，而且有极高的压缩率。这使得JPEG图片比较适合用来保存相片。事实上，大多数的相机以jpeg格式保存照片。JPEG是一种有损压缩的格式,这意味着你每次进行编辑的时候都会有质量损耗，所以如果你打算进行多次编辑，那么最好把中间生成的图片换一种格式存储。但是,还有一些不会损耗图片质量的操作，比如说裁剪图片，旋转图片或者修改元信息。元信息包括，比如说，存储在图片文件中的注释。

JPEG不支持透明度。

PNG

PNG是一种无损压缩的格式，而且它有很多种类。单考虑实际的用途,我们可以把它分为两种：

1.PNG8
2.真彩色PNG

PNG8是一种调色板型(palette)图象格式,就象GIF。 8代表8位, 2⁸, 或者 256。 PNG8, 调色板型PNG以及索引型 PNG，这些术语都可以互换使用。

那么,PNG8比起GIF有哪些优缺点呢？

    优点：
             通常文件体积比较小
             支持alpha（可变）透明度
    缺点：
             不支持动画

第二种类型的PNG格式是真彩色PNG。这类图片可以包含百万种颜色,就象JPEG。你有时候会碰见它们以PNG24或PNG32命名。

那么真彩色PNG和JPEG相比怎么样呢？从优点方面来说,它是无损压缩的而且支持alpha透明度。从缺点方面来说,它文件的体积比较大。This makes truecolor PNG an ideal format as an intermediate between several edits of a JPEG and also in cases where every pixel matters and the file size doesn’t matter much, such as taking screeenshots for a help manual or some printed material.

IE浏览器和PNG透明度

我们说过,前面两种PNG格式都支持alpha透明度。但是你应该知道,有一些浏览器比较反常,它们对这两种类型的文件支持并不完整。

拿PNG8来说,不管什么时候,一些不完全透明的象素在IE（IE6或更低版本）浏览器中会变得全透明。这并不理想,但是它仍然是有用的,你能得到与gif相同的效果。所以使用PNG8的时候,最坏的情况下（ie<7）你会得到与使用GIF相同的用户体验，而使用其他浏览器（比如说 firefox、safari、opera）你会获得一种更好的体验。下面的一个例子说明了这个问题，注意围绕在灯泡周围不完全透明的光晕效果在IE6中是怎么样消失的。

对于真彩色PNG,这种情况带来的麻烦更不易被人察觉。所有不完全透明的象素点在版本7之前的IE浏览器中都变成灰色了(来源：W3C)。

对于PNG8和真彩色PNG，IE7都提供了alpha透明度正确的原生的支持。对于早期版本的IE浏览器你需要使用css和AlphaImageLoader滤镜来修复全彩色PNG中的透明度问题。对于这个问题,在接下来的文章中，我们将会讨论一些更多的细节。

“所有人都在说：给PNG一个表现的机会吧。”

虽然PNG8应该作为PNG类型文件的首选,因为它的文件体积更小而且在早期版本的IE浏览器中不需要使用特别的css滤镜就能很好地降级,但是在使用的时候仍然有需要注意的地方：

1.当PNG8的256种颜色不够用的时候,你可能需要使用全彩色PNG。这种情况应该尽量避免。一方面，如果你想使用成千上万的颜色,那么这种情况下JPEG将会比较适合,而且能够有更好的压缩率。另一方面，如果颜色数在一千左右,你应该尽量把这种图片转换为PNG8格式,然后看看它是不是看起来还能够接受。很多情况下,当颜色数达到200到1000的时候,人的肉眼就分辨不出来了。当然，这也得看是哪种图片了；通常你可以非常安全地删掉1000种颜色,但是有些时候只是删掉2种颜色,图片的效果就不能让人接受了。不管怎么样, 尽可能地把真彩色PNG转换为PNG8和JPEG格式，看看你能不能接受它们的质量和体积。
2.图片的大部分象素是半透明的情况。如果图片种只有一小部分是不完全透明的,象围绕在圆角周围的象素点,那么PNG8的类GIF(GIF-like)降级通常都没有问题。但是如果图片的大部分是半透明的（象视频播放器上的播放按钮）,那么你除了使用AlphaImageLoader hack你可能别无选择。

最后，让我们总结一下我们刚刚讨论的主要内容：

1.JPEG格式比较适合用来存储照片
2.GIF格式可以用来做动画
3.PNG8可以用来做小图标（icons），按钮，背景等等。

JavaScript,5种调用函数的方法

charies — Tue, 31 Mar 2009 13:57:31 +0800

JavaScript,调用函数的5种方法

一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍.
作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到还是有非常重要的不同的地方的,忽视这些差异无疑会导致难于跟踪的bug。.
首先让我们创建一个简单的函数,这个函数将在将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数.

JavaScript函数调用规则1
在没有通过明确所有者对象而直接调用的函数中，如myFunction()，将导致this的值成为默认对象（浏览器中的窗口）。

函数调用
让我们现在创建一个简单的对象,使用 makeArray函数作为它的一个方法,我们将使用json的方式来声明一个对象,我们也来调用这个方法
//creating the object
var arrayMaker = {
    someProperty: 'some value here',
    make: makeArray
};

//invoke the make() method
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

看到这里的不同了吧,this的值变成了对象本身.你可能会疑问原始的函数定义并没有改变,为何它不是window了呢.好吧,这就是函数在 JSavacript中传递的方式,函数在JavaScript里是一个标准的数据类型,确切的说是一个对象.你可以传递它们或者复制他们.就好像整个函数连带参数列表和函数体都被复制,且被分配给了 arrayMaker里的属性make,那就好像这样定义一个 arrayMaker:
var arrayMaker = {
    someProperty: 'some value here',
    make: function (arg1, arg2) {
        return [ this, arg1, arg2 ];
    }
};

JavaScript函数调用规则2 在一个使用方法调用语法,像 obj.myFunction()或者 obj['myFunction'](),这时this的值为obj

这是事件处理代码中bug的主要源头,看看这些例子
<input type="button" value="Button 1" id="btn1" />
<input type="button" value="Button 2" id="btn2" />
<input type="button" value="Button 3" id="btn3" onclick="buttonClicked();"/>

<script type="text/javascript">
function buttonClicked(){
    var text = (this === window) ? 'window' : this.id;
    alert( text );
}
var button1 = document.getElementById('btn1');
var button2 = document.getElementById('btn2');

button1.onclick = buttonClicked;
button2.onclick = function(){   buttonClicked();   };
</script>

点击第一个按钮将会显示”btn”因为它是一个方法调用,this为所属的对象(按钮元素) 点击第二个按钮将显示”window”因为 buttonClicked是被直接调用的(不像 obj.buttonClicked().) 这和我们第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的.
使用像jQuery的JS库有这样的优点,当在jQuery里定义了一个事件处理函数,JS库会帮助重写this的值以保证它包含了当前事件源元素的引用,

//使用jQuery
$('#btn1').click( function() {
    alert( this.id ); // jQuery ensures 'this' will be the button
});

jQuery是如何重载this的值的呢?继续阅读

另外两个:apply()和call()
你越多的使用JavaScript的函数,你就越多的发现你需要传递函数并在不同的上下文里调用他们,就像Qjuery在事件处理函数里所做的一样,你往往经常需要重置this的值.记住我告诉你的,在Javascript中函数也是对象,函数对象包含一些预定义的方法,其中有两个便是apply()和 call(),我们可以使用它们来对this进行重置.
var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler, 'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]
这两个方法是相似的,不同的是后面的参数的不同,Function.apply()是使用一个数组来传递给函数的,而Function.call()是将这些参数独立传递的,在实践中你会发现apply()在大多数情况下更方便.

JSavacript函数调用规则3 如果我们想在不复制函数到一个方法而想重载this的值的时候,我们可以使用 myFunction.apply( obj ) 或 myFunction.call( obj ).

构造器
我不想深入研究在Javascript中类型的定义,但是在此刻我们需要知道在Javascript中没有类,而且任何一个自定义的类型需要一个初始化函数,使用原型对象(作为初始化函数的一个属性)定义你的类型也是一个不错的主义,让我们来创建一个简单的类型
//声明一个构造器
function ArrayMaker(arg1, arg2) {
    this.someProperty = 'whatever';
    this.theArray = [ this, arg1, arg2 ];
}
// 声明实例化方法
ArrayMaker.prototype = {
    someMethod: function () {
        alert( 'someMethod called');
    },
    getArray: function () {
        return this.theArray;
    }
};

var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );

am.getArray();
// => [ am, 'one' , 'two' ]

一个非常重要并值得注意的是出现在函数调用前面的new运算符,没有那个,你的函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上 (window),而你并不想那样,另一个话题是,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为 undefined.因为这个原因,构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.
带着这样的小心,初始化函数里的代码和你在其他语言里写的初始化函数是相似的.this的值将是你将创建的对象.
Javascript函数调用规则4 当你将函数用作初始化函数的时候,像MyFunction(),Javascript的运行时将把this的值指定为新建的对象.

总结
我希望理解各种函数调用方式的不同会使你的Sjavacript代码远离bugs,有些这样的bug会确保你总是知道this的值是避免他们第一步