利用开放的API，把内容塞进Google Map里，然后就能使用现成的拖拽和缩放功能了！~

Stas Kulesh

Markus Dressen

Blaubo Design

Academie Arnhem Portfolio Map

Kalle Hagman

点击 Design Folios with Google Maps 查看原文，还有 OpenLayers 这样的框架可以用哦~

您可能也喜欢：
Best of CSS Design 2008 on Web Designer Wall 2008年50个最佳CSS设计网站	The Difference Between Art and Design 艺术与设计之别	继续关注极简~【转】极简主义网站设计:寓丰富于简单	【转】Web 设计师的 50 个超便利工具，代码工也来蹭下~~
无觅

Sander Mulder

简洁高效的产品展示，左上角Menu深藏不露啊。。。

MOJAVE

一个页面里，内容齐全，舒服那就是一个字啊~

Berit Somme

想改成WP的模版，做展示不错的

The International Office

很干脆的简单，很干脆的方式了IE6的兼容，定位和透明就都出问题了。。。做得好！~

Make

案例的图片和文字都是建个更换的，空间利用率够大的

Jan Sochor Photography

比较少见到这样玩的摄影师，很喜欢鼠标悬停的效果

Hamillbosket

我觉得作品展示就是要这样干脆的

Crafts Council

遮一点不遮一点，很好，页面还有配合颜色变化

De facto

顶部悬浮，分类明确，块内图片展示，改成WP也很合适

GOOD

太GOOD了！作为综合内容站，简洁漂亮到没话说！~

The Darling Tree

好个内容丰富的首页，版块清楚，有探寻欲望

Beholder

静中有动，看下面~

PROA

藏一点不藏一点，很有趣

emma hanquist

省地方，超多内容都塞下了！~

您可能也喜欢：

简洁不简单，mini站点收集

简洁不简单，mini站点收集 Part2

MephoBox | Web Design and Web Inspiration

继续关注极简~【转】极简主义网站设计:寓丰富于简单

无觅

一直以来我的站子都是“慢就一个字”，我曾经怨天怨地怨服务器，脑子清醒的时候可能会怨下自己||| 拿到这个工具看过以后，事实让我无力。。。

以下是我的新站 www.today-s-ooxx.com 参照Yslow规则（新版本由原先的12条增加到了22条）进行优化的前后对比，评级最好为A最差为F

D级到C级，页面48元素640.5K到20元素156.7K，下载时间由原先的56s（|||）到12s

Yahoo另外给出了包括Yslow规则（22条）的34条 详细说明 ，通过查看这些你可以对自己的网站页面进行一次全面的分析，然后就是动手改进的工作了，看看我上面的成果，动手吧！~~下面我来简单的说一下~

1.Minimize HTTP Requests 减少HTTP请求

图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。

这个标准我从F到了A，扔掉了lightbox和一些不必要的插件，剩下的JS和CSS做了最大程度的拼合，这个皮肤本身几乎没有用到图片所以不管CSS sprites，这样改进后效果很明显

2.Use a Content Delivery Network 利用CDN技术

CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。

WordPress CDN 有CDN账号的可以用用这个，Google AJAX CDN 也可以用

3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现

我的这项虽然表面上麽有变化，是F，不过我本身的站点是设置过了，还剩下的是picasa的外链图片，这个不是我自己能弄的，当然，如果不外链就能解决这个问题~

4.Gzip Components Gzip压缩

Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试

倒腾来倒腾去，由F到了E，测试结果是我的压缩率为74.3%，还剩下我自己的三个JS和一个CSS没有被压缩，不知道咋回事

5.Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式

6.Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现

能放下面的我放了，放多了就变样了。。。另外插件的JS加载我就没管，懒得更改那一块的写入了

7.Avoid CSS Expressions 避免CSS Expressions

CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~

8.Make JavaScript and CSS External 将JS和CSS外链

前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~

9.Reduce DNS Lookups 减少DNS查找

貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了

10.Minify JavaScript and CSS 减小JS和CSS的体积

写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点

貌似 SmartOptimizer 挺NB得的，8过我用了出错，难道是JS已经被我写乱了？|||

11.Avoid Redirects 避免重定向

再写入链接时，虽然“http://www.today-s-ooxx.com”和“http://www.today-s-ooxx.com/”仅有一个最后的“/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

12.Remove Duplicate Scripts 删除重复脚本

重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费

13.Configure ETags 配置ETags

搞不清楚咋回事，总之我是在.htaccess里把它删除了

Header unset ETag
FileETag None

14.Make Ajax Cacheable 缓存Ajax

Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率

15.Flush the Buffer Early 尽早的释放缓冲

当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率

16.Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）

17.Post-load Components 延迟加载组件

最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子

18.Preload components 预加载组件

提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用

19.Reduce the Number of DOM Elements 减少DOM元素数量

复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件

20.Split Components Across Domains 跨域分离组件

页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费

21.Minimize the Number of iframes 减少iframe数量

需要更有效的利用 ifames。
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义

22.No 404s 不要出现404页面

站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源

23.Reduce Cookie Size 减小Cookie

Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率

24.Use Cookie-free Domains for Components 对组件使用无Cookie的域名

对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名

25.Minimize DOM Access 减少DOM的访问次数

JS访问DOM是很慢的，尽量不要用JS来设置页面布局

很不巧我的这个站点就是用JS来实现每个DIV的绝对定位的|||

26.Develop Smart Event Handlers 开发灵活的事件处理句柄

DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄

27.Choose < link  >over @import 使用< link >而非 @import

在IE中使用@import就和在页面底部用< link >一样，我们前面说要把< link >放顶部的

28.Avoid Filters 避免过滤器的使用

如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。

29.Optimize Images 优化图片

将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果

30.Optimize CSS Sprites 优化CSS Sprites

在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度

31.Don’t Scale Images in HTML 不要在HTML中缩放图片

图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的

这个我的站子有大大的改进，首页图片我是从内页选出来的，原始大小为512，当我把它们全部改成200大以后，我的首页图片总大小由原来的455K缩减到了83K

32.Make favicon.ico Small and Cacheable 缩小favicon.ico的大小并缓存它

站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下

这个。。。我用了gif动画，7.5K

33.Keep Components under 25K 保证组件在25K以下

iPhone不能缓存25K以上的组件，并且这还是要在被压缩前

34.Pack Components into a Multipart Document 将组件打包进一个多部分的文档中

就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持

==============================================

呼~~~~~~~~~~~~~~~应该可以预言，本文将成为本年度本人最最最最用心写的日志了。。。粗粗的这样翻译了一遍，确实学到了很多东西，都是可以应用在我以后的前端页面架构工作中的，但其实还是有很多东西搞不清楚，只是照着E文说下来了，嘛，Web Front-End Engineer，前路漫漫啊~~~

另：我的这个 Work Blog 本身和另外一个 Life Blog 的Yslow测试结果真是惨不忍睹，稍稍改了改仍旧是E级的，我已经无力了。。。

您可能也喜欢：
使用Wordpress搭建中小型展示网站，公司篇~~ 问题+插件汇总	Best of CSS Design 2008 on Web Designer Wall 2008年50个最佳CSS设计网站	【无责任翻译】网站不需要进行搜索引擎优化的7个理由	我自己做的Wordpress Test站大集合！~ WordPress是好物！~~
无觅

twistori

就是觉得这个很好玩，从Twitter调的数据，左下角那一块也不要错过哦~ 有更牛的东西等着哟~~怨念屏保只有MAC的|||

sursly

同样是横移的JS，设计不一样就是不一样哇~过渡画面被做得很有意思！~~

Do websites need to look exactly the same in every browser?

纯粹因为我对于以上问题完全与此网站立场相同，友情宣传一下~

Telescopic Text

明明能那么简洁明了的说喝了杯茶就完事的，老兄非搞出个网站缩短我鼠标寿命不可||| 问题是点完了我还觉得挺乐意滴，刷一遍再点|||

Elliniko Scrap

废品之花也能如此之美哇~~ 设计,恩，设计！！~~

Portfolio de Guillaume Pacheco

感觉是很有意思的人和很有意思的站，顶上的MENU玩了好一会，呵呵，技术和设计都很棒，花点心思给LIGHTBOX换个样子的话是很出彩的呢，学习学习~~

The Home of Nice Things

又一个蓄意缩短我鼠标寿命的家伙，和Hover效果结合起来用，不错的想法~~

Креативное агентство Творческие Люди

下次我也做个大头网站，觉得很有意思哇！~~ 这家伙用的图片不够大，在我1680屏幕下漏边了。。。

Colourpixel

colors就应该是这样滴！~~ 只能叹自己么想象力|||

ifekt

这玩意整整折腾了我2个周||| 锵锵~~ 最后给我完成了！被我转成WP了哦，解决了JS的浏览器冲突，IE6下也可以正常实现效果，问下BOSS，公司不用我就要自用了，呵呵~~

DSGN{dot}us

最最常见的JS图片滚动效果，结合上独特的设计，简单就变得不简单了，我很喜欢！~

YOULOVE.US

首先域名就很有意思的，然后Jquery scrollto的应用算是完满了，上下左右移来移去的，当然，上下滚动的设计是大看点，提醒注意的是，背景真的很下功夫了哟，底部固定的建筑，上下排列的四张大图，还有会移动的云彩层！~ 看仔细了哟一定，不能浪费了人家的心血！~~

Visualbox

技术不是问题，大块的图片排列好吸引我！~ 手痒痒的，也来弄成WP吧？~~ FUFU

We Bleed Design

很早以前就看过，就被唬晕了，Design这个东西啊，为啥能够如此强大！~~ 不仅在图形软件里，在页面里，运用好层遮罩可以做很多神奇的事情呢，记下记下~~

呼~真的是整整一下午，看了才1/3不到的，收获很不小呢！~ 自己虽然不是做设计的，但是如果能完成有意思的东西会是多么开心的事情哇，下次有机会我再继续，有兴趣的可以自己去 看看 哦~~

您可能也喜欢：
Best of CSS Design 2008 on Web Designer Wall 2008年50个最佳CSS设计网站	LIGHT BOX效果JS大集合（Jquery相关）	jQuery 常用方法一览	Sortable Table 可排序表格JS收集
无觅

有兴趣的可以去 看看 ，嘛，自己也 学习 了一下~~

您可能也喜欢：

jQuery 常用方法一览

Best jQuery Plugins of 2010

LIGHT BOX效果JS大集合（Jquery相关）

[转载] jQuery Selectors 选择器的使用

无觅

赶紧自己去 看看 吧~~ 也可以 看看 我学习来的例子~~

学习要点：

页面代码的加载顺序一般是从上到下的，利用这个可以巧妙的将重要内容的代码位置前移，以达到最先显示出来的效果，同时，这个时候使用DIV来做框架的好处也会显现，因为它不像TABLE一样需要</table>加载闭合后才开始显示内容，而是加载多少就实时显示多少，恩恩，以后肯定都用得到的，今天大收获，哈~

您可能也喜欢：
来体验一下Chrome Experiments，玩玩JS效果吧~	Snowstorm 圣诞节快到了，给BLOG加点雪花效果吧~	时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总	Sortable Table 可排序表格JS收集
无觅

左右上下都可以画箭头控制，画圆放大，横线恢复，只是记录鼠标开始和结束点位置进行计算肯定是实现不了的，还需要记录下移动时候的起点及终点做形状判断，说是这样说，这样的计算还真是费老大力气了哇，只能空想想，或者，是用了其他方式？有米有人能给我解惑啊？~~

一定要亲自去体验一把啊~~ 然后告诉我怎么回事啊~~ Red Issue

您可能也喜欢：

FLASH+XML 相册程序收集

最近见过最好玩的游戏！~~大推荐哇！~~

Annual Pixel Awards Winners 2008，来看看TOP网站啥模样吧~

今天你KILL IE6了没？~ 【STOP/SAY NO TO/NO MORE/KILL/THE DAMED/I HATE/CRASH IE6】十一法全攻略！

无觅