分类: JS/AJAX/DOM

YSlow 13条网站速度优化准则

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

本站测试结果截图如下:
YSlow-Foxling.cn
由于加入了Google统计和Yahoo统计的JS代码,所以Http请求较多,并且,它们的JS代码是没有加上Expires的,所以,在1\3\9\10几个项目中拖下了不少分数~
阅读全文 »

JS利用Canvas,跨浏览器实现图片旋转效果

目的:
对图片进行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拼接字符串效率测试

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,安全,标准的浏览器,下载地址请猛击这里

为你的PJBlog加上Twitter模块

在我的BLOG首页侧边栏,你可以看到我的Twitter模块。实现起来非常简单,Twitter提供了API接口,只需要写少少代码,就可以实现该模块。

Twitter JSON数据接口:http://twitter.com/statuses/user_timeline/15978541.json?callback=twitterCallback&count=5

15978541.json  前面这一串数字是你的用户ID,你可以在你的Twitter首页左下角的RSS链接中找到他。
twitterCallback  这是一个JS函数,只要你预先定义好它(在本文末尾下载)。然后用js的方式引入Twitter的这个链接。
count  引用Twitter条数

函数我已经写好了,所以只需要写进入到PJBlog的后台>>界面与插件>>设置模块

然后添加一个模块:侧栏,模块标识:MyTwitter,模块名称:我的Twitter,保存之后,编辑该模块的HTML,在里面写入:

<p id="myTwitter">正在加载...</p>
<script type="text/javascript" src="common/myTwitter.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/15978541.json?callback=twitterCallback&count=5"></script>

common/myTwitter.js里面包含我写好的twitterCallback函数,后面调用的就是twitter的JSON API接口。

打包下载:点击下载此文件解压到你的Blog目录即可。

当然,你还可以在Blog风格的CSS样式里加上一些CSS,用来修改Twitter的显示效果。

ol#myTwitter {list-style:none; margin:0; padding:0;}
ol#myTwitter li {margin-bottom:5px; padding-left:15px; line-height:16px; background:url(../../skins/ye_v2/twitter.gif) no-repeat;}
ol#myTwitter li a {font-style:italic;color:#666;}
ol#myTwitter li a:hover {color:#000;}

Javascript获取CSS值

IE:
element.currentStyle

currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,而对象 style.color 不能返回值。但是,如果用户指定了 <P STYLE="color:’red’">,currentStyleSTYLE 对象都将返回值 red。
currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:

  1. 内嵌样式
  2. 样式表规则
  3. HTML 标签属性
  4. 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;
}