javascriptネイティブとjQueryでCSSの要素チェックのベンチーマーク

jQueryには，$(hoge).css()という便利なAPIがあるんですが，
どうにもjavascriptネイティブと比べてかなり遅い？という感じがしたので
どのくらい遅いのか測ってみます．

環境

OS	Windows Vista
CPU	AMD Athlon(tm) 64 X2 Dual Core Processor 4400+ 2.30GHz
メモリ	4.00GB

内容

javascriptネイティブな書き方

document.getElementById("hoge").style.color

jQueryのAPIを用いた書き方

$("#hoge").css("color")

以上の2つでどのくらい速度に差があるのか？
また，上記の2つでオブジェクトを予めローカル変数に格納した場合の速度はどのくらい差があるのか？

結果

javascriptネイティブな書き方の方がsafariでは3,4倍速く，
javascriptネイティブな書き方の方がFireFoxでは10倍近く速い．

使用ブラウザ

• IE 8
• FireFox 9
• safari 5
• Chrome 16
• Opera 11

以下続きにて

(msec)	IE	FifeFox	safari	Chrome	Opera
ソース1	16266	474	314	180	936
ソース2	※	4619	1212	2188	2758
ソース3	3383	300	211	108	579
ソース4	20167	3129	601	1484	2035

※処理速度が遅すぎて測定不能

ソース1

var t1=new Date(); // 計測開始
var y=10000;
while(y)
if(document.getElementById("hoge").style.color == "red" || document.getElementById("hoge").style.color == "rgb(255, 0, 0)" || document.getElementById("hoge").style.color == "#ff0000")
y--;
var t2=(new Date())-t1; // 計測終了

ソース2

var t1=new Date(); // 計測開始
var y=10000;
while(y)
if($("#hoge").css("color") == "rgb(255, 0, 0)" || $("#hoge").css("color") == "#ff0000" || $("#hoge").css("color") == "red")
y--;
var t2=(new Date())-t1; // 計測終了

ソース3

var t1=new Date(); // 計測開始
var y=10000;
var checkColor = document.getElementById("hoge").style;
while(y)
if(checkColor.color == "red" || checkColor.color == "rgb(255, 0, 0)" || checkColor.color == "#ff0000")
y--;
var t2=(new Date())-t1; // 計測終了

ソース4

var t1=new Date(); // 計測開始
var y=10000;
var checkColor = $("#hoge");
while(y)
if(checkColor.css("color") == "rgb(255, 0, 0)" || checkColor.css("color") == "#ff0000" || checkColor.css("color") == "red")
y--;
var t2=(new Date())-t1; // 計測終了