array.push优化
- 原生的方法arr.push()
- 通过arr[arr.length]直接赋值
- 把方法二写成一个函数方便调用
测试结果请猛击这里:
/examples/2010/03/array-performance/push.html
测试结果:
- 给arr[arr.length]直接赋值比push方法快
- 函数调用增加了开销,特别是在IE6和opera下表现明显
- Chrome应该是做了优化,相差不大
待续(也许) =,=…….
测试结果请猛击这里:
/examples/2010/03/array-performance/push.html
测试结果:
待续(也许) =,=…….
需要实现:在光标位置处插入文字,以及获取焦点后光标位置处于文字末尾。
以前一直没有做过,今天了解了一下后实现并记录在此。
各浏览器TextArea获得焦点后的光标位置情况:
textarea.focus()
IE支持document.selection
Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性
针对浏览器的特性进行判断并实现,代码如下:
function insertText(obj,str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function moveEnd(obj){
obj.focus();
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character',len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
关于IE TextRange 对象的方法与属性介绍:
http://msdn.microsoft.com/zh-cn/library/ms535872%28en-us,VS.85%29.aspx
TextArea对象的属性:https://developer.mozilla.org/en/DOM/TextArea
直接看代码吧:
function Dialog(){
this.panel = document.createElement('div');
this.panel.id = 'bmPanel';
this.panel.style.position = 'absolute';
this.panel.style.right = '0px';
this.panel.style.right = this.scrollTop() + 'px';
this.panel.style.zIndex = 100000;
this.panel.style.margin = '10px';
this.panel.style.width = '200px';
this.panel.style.height = '200px';
this.panel.style.border = '5px solid #CCC';
this.panel.innerHTML = '<iframe id="bmIframe" '
+ 'token="1" onload="c = this.getAttribute(\'token\'); if (c==3) {this.parentNode.parentNode.removeChild(this.parentNode)} this.setAttribute(\'token\',++c);"'
+ 'name="bmIframe" src="main.html" scrolling="no" frameborder="0" style="width:100%; height:100%; '
+ 'border:1px; padding:0px; margin:0px"></iframe>';
}
Dialog.prototype.show = function(){
document.body.appendChild(this.panel);
}
Dialog.prototype.scrollTop = function (){
return document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
}
注意iframe这一行:
onload="c = this.getAttribute(\'token\'); if (c==3) {this.parentNode.parentNode.removeChild(this.parentNode)} this.setAttribute(\'token\',++c);"
iframe里的关闭按钮链接一个简单的页面,通过不停地提交表单触发load事件,让token累加:
<body onload="document.getElementById('close').submit()">
<form id="close" action="closeing.html" method="get"></form>
</body>
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几个项目中拖下了不少分数~
阅读全文