亮眼的SquirrelFish Extreme JavaScript Engine
Sat, 10 Jan 2009 10:58:44 +0800昨天的文章提到這個新的JavaScript引擎，剛好看到jQuery1.3 beta 2之前推出（預計在1月14推出正式版），乾脆就順便測試一下。在上篇提到的Introducing SquirrelFish Extreme文章中，有介紹到他用的最佳化技術，比較讓我注意的是Polymorphic Inline Cache及Regular Expression JIT。
Polymorphic Inline Cache可以改進一些context switch的效率，這在昨天的測試也可以看得出來。最初的概念是來自Self Language的run time最佳化策略。可以參考Maciej Stachowiak在文章中的解釋及wikipedia中關於Self Language的文章最後一段。
Regular Expression JIT簡單地說就是把他們對JavaScript做的最佳化技術也用到Regular Expression上，來加速Regular Expression的速度，從測試的結果看起來，對於執行Regular Expression的效率有非常明顯的提昇。
接下來就看看自己做的幾個測試，包含簡單比較jQuery1.2.6、jQuery1.3 beta 2執行selector的效率以及測試getElementById、getElementById+render、以及regular expression的效率的幾段程式：
測試jQuery的selector：
<html>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script>
$(document).ready(function(){
$("#test").click(function(){
var a = new Date().getTime();
for(var i=0; i<1000; i++) {
$("#panel");
}
alert((new Date().getTime()) - a);
var a = new Date().getTime();
for(var i=0; i<1000; i++) {
$("#panel").html(i);
}
alert((new Date().getTime()) - a);
});
});
</script>
<body>
<input type="button" value="test" name="test" id="test">
<div id="panel"></div>
</body>
</html>
測試結果：
- Firefox 3.0.5： 17 / 287 msec
- Google Chrome 1.0： 7 / 127 msec
- Webkit Nightly Build r39553： 5 / 78 msec
測試jQuery 1.3 beta 2：
<html>
<script type="text/javascript" src="js/jquery-1.3b2.js"></script>
<script>
$(document).ready(function(){
$("#test").click(function(){
var a = new Date().getTime();
for(var i=0; i<1000; i++) {
$("#panel");
}
alert((new Date().getTime()) - a);
var a = new Date().getTime();
for(var i=0; i<1000; i++) {
$("#panel").html(i);
}
alert((new Date().getTime()) - a);
});
});
</script>
<body>
<input type="button" value="test" name="test" id="test">
<div id="panel"></div>
</body>
</html>
測試結果：
- Firefox 3.0.5： 16 / 353 msec
- Google Chrome 1.0： 9 / 180 msec
- Webkit Nightly Build r39553： 5 / 127 msec
測試getElementById、getElementById+Render、及Regular Expression：
<html>
<body>
<input type="button" value="test" name="test">
<div id="panel"></div>
<script>
document.getElementsByName("test")[0].onclick = function(){
var a = new Date().getTime();
for(var i=0; i<1000; i++) {
var b = document.getElementById("panel");
}
alert(new Date().getTime()-a);
var a = new Date().getTime();
for(var i=0; i<1000; i++) {
var b = document.getElementById("panel");
b.innerHTML = i;
}
alert(new Date().getTime()-a);
var b = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/gi;
var a = new Date().getTime();
for(var i=0; i<1000000; i++) {
b.test("test.me@gmail.com");
}
alert(new Date().getTime()-a);
}
</script>
</body>
</html>
測試結果：
- Firefox 3.0.5： 2 / 52 / 2371 msec
- Google Chrome 1.0： 2 / 11 / 919 msec
- Webkit Nightly Build r39553： 0 / 4 / 268 msec
簡單結論：
- jQuery1.2.6比jQuery1.3 beta 2快？是因為beta的關係？？
- selector比單純用getElementById還是多了些overhead
- render的overhead比單純操作dom還高
- 極限松鼠魚的Regular Expression執行速度真的很亮眼。