/*cc_on/*******************************
 *
 *      your information here ........
 *
 *
 ***************************************@*/

Update: 原来可以这样：

/*!
 * information
 */

泪奔….

用ie打开demo就可以见证这个神奇的bug了。页面加载完后，不管是flash调用javascript还是javascript调用flash都没问题，但当点击上面的按钮，移动flash父节点时，javascript便无法调用flash输出的方法了。

alert('break wind');
//还可以这样:
eval('\u0061\u006c\u0065\u0072\u0074\u0028\u0027\u0062\u0072\u0065\u0061\u006b\u0020\u0077\u0069\u006e\u0064\u0027\u0029\u003b');

为了方便我写了一个转换小工具,这样就能很方便的对js代码进行编码了。

关于网页编码的问题推荐阅读这篇文章

• 取消了对internet explorer 6 的支持，并且更改了浏览器升级提示，现在使用 IE6 Update。
• 去除了更改字体大小的功能，因为大部分现代浏览器都支持字体缩放了。
• 加深了字体颜色，使文字看起来更省力。
• and so on …

一个折中的方法就是根据自己的需求把小模块合成大模块一并加载，可以通过增加Loader中META.modules的属性来实现，比如在modules里添加customize模块：

customize:{
	requires:[YUIBASE]
},
customize2:{
	requires:[YUIBASE,'coustomize']
}

然后在build文件下建立 customize/customize-min.js ， 在这个js文件里把需要的多个模块组合进去，customize2同理。

近期准备在一个相对独立的项目中使用yui 3.0.0b1 ，顺便看下yui 3的性能如何。这是我第一次接触yui，感觉yui的确为团队开发做了很多工作，比如模块化和沙盒。

越来越多的网站演化成了web2.0应用程序，javascript文件也随之增加，但javascript对网站的性能有负面影响。 在主流浏览器(ie6,7)里javascript会从两个方面阻碍页面呈现：

• script标签下面的网页资源在script加载完之前会停止请求、下载。
• script标签下面的html元素在script加载完之前会停止渲染。

这个demo说明了这两种情况。demo页面里包含两个外部javascript文件 接下来是图片、css、和iframe，下面的http 瀑布图表是在ie7下首次访问demo页的情况。从图上可以看到：第一个script标签阻碍了它下面所有资源的下载，接着第二个script标签又 阻碍了所有下载，最后img css 和iframe 并行下载。 同时注意页面渲染，你会发现script标签上面的段落文本瞬间就呈现了，然而其他的html元素在两个script加载完之后才一并显示 出来。

在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载

浏览器是单线程的，因此在script执行的时候不下载其他资源是可以理解的，但没有理由让浏览器在script下载的时候阻碍其他资源的下载,还好最新的浏览器(ie8,safari 4,chrome 2)已经 意识到这点了。下面的图标是在ie8下首次访问刚才的demo页时的http瀑布图， 从图中可以看到script的确是并行下载，而且css文件也与script一起并行下载。但是图片和iframe依然被阻碍下载。

虽然在ie8，safari4，chrome2下script可以并发，但依然阻碍了其他资源的下载

幸运的是,有一些方法可以使script标签不会堵塞任何其他资源的下载，即使在老一些的浏览器里。不幸的是开发人员要做更多的工作。

这里有6种方法可以使script与其他资源并行下载：

• XHR eval — 通过XHR(XMLHttpRequest 对象)下载script，然后用eval方法执行XHR的responseText
• XHR Injection — 通过XHR下载script，然后建立一个script标签并把它插入文档中(body或者head标签内),接着把script标签的text属性设置为XHR的responseText的值
• XHR in Iframe — 把script标签放到一个iframe里，通过iframe下载它
• Script DOM Element — 创建script标签并把它的src属性指向你的脚本地址
• Script Defer — 添加script标签的defer属性，这个只在ie中有效，但firefox3.1也支持这个属性了
• 使用document.write方法在页面中写入<script src="">,这个只在ie里有效

你可以通过Cuzillion查看各个方法的使用例子。下面的表格是对各个方法的总结，通过表格我们可以看到各个方法之间有一些很重要的差异。 虽然Script Defer和document.write Script标签比较混乱(mixed),但大部分方法都实现了并行下载。一些方法不能跨浏览器工作,还有一些方法需要更改你现存的代码才能正常工作。还有一个不被大家广泛讨论的区别 就是是否会引发浏览器的示忙器[busy indicator](状态栏，任务栏，标签图标，鼠标指针).如果你下载的多个script相互依赖，那么还需要这个方法可以保持多个脚本的下载执行顺序。

现在的问题是哪种方法才是最好的？其实这个需要具体情况具体分析。下面的树形结构图是可以引导你找到最合适的方法，他并没有看起来的复杂。只有三个关键变量来决定结果：是否需要跨域，是否需要确保执行顺序，是否需要触发示忙器。

这下好了，如果把这个选择逻辑包装在流行的HTML 模板语言(PHP,Python,Perl等等)里，你只需要调用一个函数就能确保使用了最佳方法。

在多数情况下，Script DOM Element是最好的选择。它可以在所有浏览器下工作，不存在跨域问题，而且容易实现，但有一点要记住：他不能在所有浏览器下都确保执行顺序。如果你有多个相互依赖的script，那么你需要合并它们，或者使用其方法。 如果你有一些内联脚本需要在外部脚本执行后才能执行，那就需要同步(synchronize)他们了。我把它称作”coupling”，Coupling Asynchronous Scripts 这篇文章介绍了一些目前可以实现“coupling”的方法。

上面的代码是最常见的清除浮动的方法（在支持:after伪选择符的浏览器下），国内各大网站也都普遍使用此方法，但这里有一个缺陷：demo

通过demo可以看到最外层div#page底部与body有一个空隙，但这里的确什么内容也没有。把清除浮动类的visiblity属性删除后发现原来是content属性指定的点号。造成这个现象的原因是：上面的css规则并没有很好的隐藏掉content内容。

上面有两条rule是用来隐藏content属性指定的内容(这里是点号)：height:0 这样设置并不能隐藏元素，但超出的文本会自然溺出，不会影响到下面的文档流（类似position:absolute），然后用visibility:hidden把它隐藏掉，在大多数情况下这样就ok了。但是当溺出的文本下面没有文档流的时候，他就会像普通文本那样也占个位

解决办法很简单，既然是溺出的文本那加个font-size:0就搞定了，或者更严谨一些，如下面的yahoo.com里的清除浮动的css rule

ol:after, ul:after,
.md:after, .md-sub:after, .hd:after, .bd:after, .ft:after,
.fixfloat:after, .fbody:after,
#colcx:after, #rightcx:after, #eyebrow:after,
#masthead:after, #search:after, #tabs:after,
#doors:after, #patabs:after, #patop:after,
#trough-overlay-bd div:after, #newsft:after, #newsbottom:after{
    content:".";
    display:block;
    font-size:0px;
    line-height:0px;
    height:0;
    clear:both;
    visibility:hidden;
}

这是我发现的唯一一个在清除浮动的样式表里使用font-size:0的网站 ，yahoo 美国真不是盖的。

Rooms6Crush是在常见的几个图片压缩工具上做了简单的批处理封装。针对png文件会先使用pngout进行压缩然后使用pngcrush进行二次压缩（大多数情况下二次压缩并没有效果），针对jpeg文件会使用jpegtran进行压缩。

下载后解压，双击install.cmd安装，安装后右击jpg或png图片菜单里会出现6roomsCrush，单击后压缩。双击uninstall.cmd卸载。

下载地址: http://www.box.net/shared/g0nmjdj2j2

Update:

修改了一个bug 新版本下载: http://www.box.net/shared/8×8chxxuzb

如果上面链接无法打开可以试试这个：http://www.boxcn.net/shared/8×8chxxuzb

http://dexbol.com/demo/javascript/note/browser_default_action.html

1. alexa前十名的网站，图片占所有组件的比重是46.6%,所以对图片做优化是相当必要的。

2. “Give PiNG a chance !”.这个是老生长谈了。不过这里的png是指索引png(8位png图片，以后统称png8),而不是真彩png（24或32位png，以后统称png32）。因为png32并没有什么优势，保存成jpg通常比png32要小。对图片格式的使用总结如下：

   • 照片存为jpg格式。
   • 动画保存为gif格式。
   • 其他都用png8搞定。

   读这篇文章时我最大的收获是知道了：png8也支持半透明（variable/alpha transparency）。这让我兴奋的半天。而且不同于png32的是，不支持png半透明的浏览器(如ie6)会自动降级到全透明(像gif那样)，而不是像png32那样会有一个难看的背景。(demo)

3. 压缩图片

   压缩PNG，主要工具pngcrush

   >pngcrush -rem alla -brute -reduce src.png dest.png
   

   -rem alla : 除了关于透明的信息外，其他全都干掉。
   -brute : 很暴力的使用各种方法压缩，以使图片被压缩到最小。
   -reduce : 尽可能的删掉调色板中多余的颜色。

   一次处理多个文件可以张样：

   >pngcrush -rem alla -reduce -brute -d folder src1.png scr2.png
   

   对于alexa前十的网站，用这招平均可以干掉16.05%的大小。

   其他压缩工具还有：pngout , optipng 等 。强烈推荐一下pngout，它总能给我带来惊喜，比如一个用pngcrush压缩过的图片(32k),用pngout压缩后还可以再干掉5k！关于这些工具的性能介绍可以阅读 Stoyan Stefanov的另一篇文章PNG optimization tools

   去掉jpeg的metadata信息(包括EXIF，application datameta以及评论)，主要工具jpegtran

   >jpegtran -copy none -optimize src,jpg dest.jpg
   

   上面的命令复制并优化src.jpe,复制过程中去掉了所有metadata信息。同样用这招前十大网站可以干掉11.85%

   使用png8替换非动画gif，工具:imageMagic

   >convert image.gif PNG:8:image.png
   

   然后再对png进行压缩，用这招前十大网站可以干掉20.42%

   优化动画gif，使用工具GIFsicle

   > gifsicle -O2 src.gif > dest.gif
   

   上面命令的作用是删掉相同的帧，详见这里。

   觉得上面的太麻烦？使用smush.it吧。这同样是Stoyan Stefanov的杰作。

4. jpeg 渐进式还是普通式？渐进式的优点是对用户尤其是窄带用户更友好,不过关键还是看哪种更小。Stoyan做了一个测试，最后的结论是：小于10k的普通式比较小，大于10k的渐进式比较小。测试的具体数据和过程在这里

5. 避免使用ie的AlphaImageLoader滤镜，因为AlphaImageLoader滤镜是梯形渲染所以会使整个页面渲染速度变慢，而且比较费资源。具体数据点击这里。代替方案是使用VML，DD_belatedPNG就是一个利用vml解决ie不支持半透明png的js对象。用它不仅可以让ie6支持半透明png，还可以支持background-repeat 和:hover .代价是要多下载一个5.5k的js文件。个人感觉并没有太大必要。

以上链到YUI的链接都需要穿墙。