Yahoo!曾经针对网站速度体验提出了34条准则《Best Practices for Speeding Up Your Web Site》(中文译文)。
YSlow在这些准则的基础上精简为更加直观的13条,针对每一条从A-F评分,得出一个总分,来评估一个网站的优化程度,你可以很方便地从YSlow的测试结果中看到你得不足的地方,并加以改进。
YSlow是FireBug的一个插件,在FireFox里使用。
本站测试结果截图如下:

由于加入了Google统计和Yahoo统计的JS代码,所以Http请求较多,并且,它们的JS代码是没有加上Expires的,所以,在1\3\9\10几个项目中拖下了不少分数~
阅读全文 »
目的:
对图片进行90、180、270度的旋转,便于浏览照片。
实现方法:
1.IE浏览器,使用BasicImage滤镜
filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled ,
grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay )
Rotation:可读写。整数值(Integer)。设置或检索对象内容的旋转。0 | 1 | 2 | 3
- 0:默认值。内容不旋转。
- 1:内容旋转90度。
- 2:内容旋转180度。
- 3:内容旋转270度。
_this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation='
+ _this.r + ')';
2.其它标准浏览器(FireFox,Chrome,Safari,Opera)都支持Canvas,利用Canvas的rotate以及drawImage对图片进行旋转。
mozilla的Canvas文档:https://developer.mozilla.org/En/Canvas_tutorial
阅读全文 »
JavaScript开发中,经常需要组合字符串进行输出,比如接收服务端信息,然后格式化成html再显示到页面上。
一般用到两种方法来进行拼接,Array.join和+=串联字符串,为了得到最佳的效率,对这两种方法进行了测试;
Array.join测试代码:
var timer = new Date().getTime();
var arr = new Array();
for (var i = 0; i < 50000; i++){
arr.push('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
}
arr.join('');
document.write(new Date().getTime() - timer);
+=测试代码:
var timer = new Date().getTime();
var str = '';
for (var i = 0; i < 50000; i++){
str += 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
}
document.write(new Date().getTime() - timer);
结果看下图(测试结果因电脑性能而异,数据只代表在我电脑上的结果):
50000次的拼接,每次拼接150个字符:

在这些比较标准的浏览器里,+=和Array.join的方法结果差不多,Opera在join后,效率降低很多。
然后对IE7进行了测试:
10000次拼接,每次拼接150个字符,不要弄5万10万的,别怪我没告诉你~

在IE7里就有相当明显的出入了,10000次拼接,差了2W多ms。
所以,拼接字符串,推荐使用join的方法,较优于+=的拼接方法,特别是在IE里,有相当大的改善。
最后嘀咕两句, IE这个**,实在不想说什么了,安全性,性能,功能,无一是处的浏览器,现在却占有着60%+的份额,我$#$&*@~~~~推荐FireFox,安全,标准的浏览器,下载地址请猛击这里
IE:
element.currentStyle
currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,而对象 style.color 不能返回值。但是,如果用户指定了 <P STYLE="color:’red’">,currentStyle 和 STYLE 对象都将返回值 red。
currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:
- 内嵌样式
- 样式表规则
- HTML 标签属性
- HTML 标签的内部定义
W3C:
window.getComputedStyle(element,pseudoElt)
element 必选,HTML元素
pseudoElt 必选,获取该元素的伪类样式
关于获取css的浏览器兼容:
http://www.quirksmode.org/dom/w3c_css.html
jQuery里关于获取CSS的实现:
function( elem, name, force ) {
var ret, style = elem.style, filter;
// IE uses filters for opacity
if ( !jQuery.support.opacity && name === "opacity" && elem.currentStyle ) {
ret = ropacity.test(elem.currentStyle.filter || "") ?
(parseFloat(RegExp.$1) / 100) + "" :
"";
return ret === "" ?
"1" :
ret;
}
// Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) {
name = styleFloat;
}
if ( !force && style && style[ name ] ) {
ret = style[ name ];
} else if ( getComputedStyle ) {
// Only "float" is needed here
if ( rfloat.test( name ) ) {
name = "float";
}
name = name.replace( rupper, "-$1" ).toLowerCase();
var defaultView = elem.ownerDocument.defaultView;
if ( !defaultView ) {
return null;
}
var computedStyle = defaultView.getComputedStyle( elem, null );
if ( computedStyle ) {
ret = computedStyle.getPropertyValue( name );
}
// We should always get a number back from opacity
if ( name === "opacity" && ret === "" ) {
ret = "1";
}
} else if ( elem.currentStyle ) {
var camelCase = name.replace(rdashAlpha, fcamelCase);
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
if ( !rnumpx.test( ret ) && rnum.test( ret ) ) {
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;
// Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = camelCase === "fontSize" ? "1em" : (ret || 0);
ret = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}
return ret;
}