HouseTect, JavaScript Blog

TextMateを使っていると基本的にはデフォルトのBundleでことが足りるんですが、jQueryBundle入れたり、MootoolsBundle入れたりと何かしらBundleを自分でインストールする機会があります。

このときにBundleを簡単にインストールできるGetBundleを使えば、簡単にインストールできるんですが、不調なのかアップデートが必要なのかうまくいかない場合があり、
こんなときはBundleのsvnリポジトリから自分でインストールしちゃうと早いです。

Bundlesから選んでインストールする方法

以下のリンクから欲しいバンドルリンクをクリックします。

http://svn.textmate.org/trunk/Bundles/

そのときのURLをコピーして、以下のように直接TextMateのBundlesディレクトリにチェックアウトする。

僕は自分のUserの下にTextMateのBundlesを入れているのでこんな感じ。

cd /Users/hoge/Library/Application Support/TextMate/Bundles svn co http://svn.textmate.org/trunk/Bundles/JavaScript%20jQuery.tmbundle/

システム全体で共通に使っている人は/Libraryから始めるみたい。

cd /Library/Application Support/TextMate/Bundles svn co http://svn.textmate.org/trunk/Bundles/JavaScript%20jQuery.tmbundle/

Bundlesは死ぬほど便利なので、入れまくって使いまくりましょう！！

始め、いろんな方のエントリーを読んで僕は買わないかな〜と思っていましたが、どうにもこうにも徐々に買いたい欲が湧いてきてしまった。
そもそも家でもMac、職場でもMacを使って作業をしていて、ケイタイはiPhoneだしともうMac漬けなので、iPadも欲しくなってしまう。

まずは以下のApple iPadのビデオからどうぞ。
毎回思いますが、この作り手たちの声は卑怯！ｗ

Apple iPad

こちらは実際にiPadに触った人たちのビデオ。
ますます欲しくなります。。

Apple iPad: iLounge.com's Complete Interface Walkthrough (720p HD)

Apple iPad: Hands On

iPad first impressions

いやはや後すこし待ちますかっ！

アップル - iPad - ウェブ、メール、写真を体験する最高の方法。

Java変態文法最速マスター - プログラマーの脳みそをリスペクト。
JavaScript変態文法最速マスター - 葉っぱ日記をリスペクト。

特に技法的なことではないんですが、functionをいろんなところで絡めてわかりにくくするポイントをいくつか紹介。

if文にfunctionを絡めてみる

単純なifなはずなのに、条件式に即時実行のfunctionを絡めることによってよりわかりにくくできます。
さらにクロージャをreturnして()で実行し、より複雑にする技法もとりいれてます。

if (function(a, b) { return (function(a, b) { return a < b; })(1, 2); }()) { console.log(1); }

for文にfunctionを絡めてみる

そもそもfor文の回りにfunctionを絡めてわかりにくくし、for文の条件式にもfunctionを絡めます。
さらにクロージャをreturnして()で実行し、より複雑にする技法もとりいれてます。

「ちなみにここでやっていることは引数の[1, 2, 3]という配列を受け取って、新しい配列にコピーしてreturnしているだけです。」

var array = (function(arr) { return function() { var i=0, ret = new Array; for (; i < function(arr) {return arr.length;}(arr);)(function(object) { ret.push(object); (function() {++i;})(); })(arr[i]); return ret; } })([1, 2, 3])(); console.log(array);

出力結果

[1, 2, 3]

Objectに上記やり方を絡めてみる

aというプロパティはただaを返せば終わりなはずなのに、わざわざfunctionでネストしてわかりにくくしています。
bというプロパティは上記if文複雑化とfor文複雑化を応用して、解読が困難な状態を実現しています。

var Hoge = { a: function() { return function() { return (function() { return "a" })(); } }, b: function() { if (function(a) { return (function(a) { return a == "a"; })("a"); }()) { var array = (function(arr) { return function() { var i=0, ret = new Array; for (; i < function(arr) {return arr.length;}(arr);)(function(object) { ret.push(object); (function() {++i;})(); })(arr[i]); return ret; } })([1, 2, 3])(); return array; } } } console.log(Hoge.b());

出力結果

[1, 2, 3]

複雑化で気を付ける点

iをインクリメントする部分の複雑化で

(function() {++i;})();

という部分がありますが、ここで

(function(i) {++i;})(i);

このように引数で渡してはいけません。
外側のスコープにいるiではなく、このfunctionの関数スコープ内のiをインクリメントすることになるので無限ループになります。

これ以外にもcurry化をうまく使いまくって、複雑にすることができますが、だいたい上記のことが応用できれば特に問題はありません。

※注意 function絡めは節度と必要度合いを見て実装しましょうね！

エラトステネスの篩 - Wikipedia

こんな感じなのかな。。

サンプルコード

console.log(makePrime(100)); function makePrime(maxCount) { var max = maxCount + 1, primes = new Array(max), ret = new Array(); // 一旦すべて素数とする for (var i=1; i < max; ++i) { primes[i] = true; }; // 素数だけ抽出 for (var i=2; i < max; ++i) { if (primes[i]) { ret.push(i); for (var j=i; j*i <= max; ++j) { // 素数以外にfalseを入れる primes[j*i] = false; }; } }; return ret; }

出力結果

[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]

勉強になりました！

ここ最近フロントエンドのパフォーマンスチェックでHttpWatchを使っているんですが、これはかなり調子がいい！
特にインストールするとIEとFirefoxに追加され、Firebugのように画面の下のほうに表示されるので違和感なく使えます。

んで、このソフトを使ってサイトのパフォーマンスチェックをしていたら、IEの場合だけ

「ERROR_INTERNET_INVALID_URL」

というRequestの結果が返ってきて、これってなんだろうと調べてみたら、jQuery・prototype.js・YUIを使っている場合に
IEでDomContentLoaded（DCL）判定するときに発生しているようです。

これでだいたい3〜6ミリ秒のオーバヘッドがあるよう。
ほんのちょびっとですがねｗ

jQueryの場合（ver1.2.1）

bindReady関数の中にIEだったらという分岐があり、その中でsrc=//:なscriptタグをdocument.writeしているのが原因。

// If IE is used, use the excellent hack by Matthias Miller // http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited else if ( jQuery.browser.msie ) { // Only works if you document.write() it document.write("<scr" + "ipt id=__ie_init defer=true " + "src=//:><\/script>");

このscriptがdocument.writeされたタイミングでsrc属性のURLをGETする際に、よくわからんURLじゃ〜と言っているんでしょうね。
jQueryがこの判定方法を使っているのはおそらく1.2.1以前だと思うので、1.2.6や1.3.X、または1.4を使っている場合は問題ありません。

ちなみに1.4のDCLの判定は以下のようになっています。

if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent("onreadystatechange", DOMContentLoaded); // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } }

onreadystatechangeとonload、あとは今までにもあったdoScrollで判定しているようです。

prototype.jsの場合（1.6）

このprototype.jsを使っている場合が、今回のERROR_INTERNET_INVALID_URLなRequestを送信してしまうパターンになります。
実際のコードは以下のとおり。

document.write("<script id=__onDOMContentLoaded defer src=//:><\/script>"); $("__onDOMContentLoaded").onreadystatechange = function() { if (this.readyState == "complete") { this.onreadystatechange = null; fireContentLoadedEvent(); } };

deferで遅延評価させて、readyStateがcompleteになったらfireしています。
この方法個人的に面白くて好きなんですが、無駄なRequestが発生してしまうのが難点ですね。

■関連記事
Prototypejsのdom:loadedを検証（IEの場合）

YUIの場合

ERROR_INTERNET_INVALID_URL & HttpWatch - HttpWatch BlogにはYUIでも起こると書かれていましたが、YUI2・YUI3の両方でscriptをdeferさせる方法はなかったので大丈夫でしょう。
もっと古い時代に書かれていたと思われます。

以下YUI3のDomContentLoaded判定。

if (navigator.userAgent.match(/MSIE/)) { if (self !== self.top) { document.onreadystatechange = function() { if (document.readyState == 'complete') { document.onreadystatechange = null; _ready(); } }; } else { GLOBAL_ENV._dri = setInterval(function() { try { // throws an error if doc is not ready document.documentElement.doScroll('left'); clearInterval(GLOBAL_ENV._dri); GLOBAL_ENV._dri = null; _ready(); } catch (ex) { } }, POLL_INTERVAL); } } EU._simpleAdd(window, "load", EU._load);

ほとんどjQueryと同じです。

まとめ

今回のERROR_INTERNET_INVALID_URLが発生してしまう可能性があるのは以下、

• jQueryは1.2.1以前を使っている場合
• prototype.js1.6以前を使っている場合
• YUI2よりも前のものを使っている場合

の3点かな。
他のライブラリも含めたらもっとあるでしょうが、とりあえず調べたのはこんだけ。
Firefoxとかだとこの現象は発生しないので、なかなか発見しずらいものではありますが、たまたま発見したのでログとして残しました。

HttpWatch以外に僕が使っているパフォーマンスチェックツールは、

YSlow :: Add-ons for Firefox

page-speed - Project Hosting on Google Code

あと、

Diagnose and Prevent AJAX Performance Issues - dynaTrace AJAX Edition

これIEだけなんですが、CLASS指定の個数とかID指定の個数とかわかるので、どこで遅くなっているかがわかりやすいです。

ではでは。

■関連リンク
・ERROR_INTERNET_INVALID_URL & HttpWatch - HttpWatch Blog

Gmailチームが明かすHTMLアプリケーション起動の高速化テクニック - TechTalkManiacsを読んでて、こんな方法があるのか〜と関心した。
scriptタグの中をコメントアウトにしているので、初めのJavaScriptが解析されるときは無視されて、あとでevalさせるという面白い方法。

ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title> <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8" id="lazy1"> /* // Make sure you strip out (or replace) comment blocks in your JavaScript first. window.lazy = function() { alert("lazy!!"); } */ </script> <script type="text/javascript" charset="utf-8" id="lazy2"> /* lazy(); */ </script> <script type="text/javascript" charset="utf-8"> // jLazyLoader // 後からJavaScriptをロードするためのjQueryPlugin (function($) { $.jLazyLoader = function() {} $.jLazyLoader.load = function(selector) { load(selector); } function load(selector) { eval(stripOutCommentBlock($(selector).html())); } // [via] http://d.hatena.ne.jp/kagigotonet/20091221/1261355472 function stripOutCommentBlock(code) { return code.replace(/^[\s\xA0]+\/\*|\*\/[\s\xA0]+$/g, "") } })(jQuery); // DCL $(function() { $("#lazyLoader").click(function() { $.jLazyLoader.load("#lazy1"); $.jLazyLoader.load("#lazy2"); }); }); </script> </head> <body> <div id="lazyLoader"> Lazy Load </div> </body> </html>

ダウンロード

gist: 270994 - GitHub

コメントアウトにしちゃっているので可読性は低いですが、このテクニックはいつか使って速度の検証をしてみたいところ。

■関連リンク
・Google Code Blog: Gmail for Mobile HTML5 Series: Reducing Startup Latency

eclipseたんスプラッシュ画像 - 虎塚を見て、普段使うeclipseの起動画面で遊びたいという欲求が生まれた。

だいたい15秒から30秒くらいしか表示されないeclipseの起動画面ですが、何か自分オリジナルで面白い画像にすると幸せになるかもしれませんね。

以下オリジナルな起動画面いろいろ。

eclipse3.2

eclipse3.4 - GANYMEDE

eclipse3.5 - GALILEO

そして、虎塚さんが作った画像が以下。

eclipseたん

eclipseの起動画面を変更する方法

「eclipse/plugins/org.eclipse.platform_X.X.XXX」というディレクトリの中に、splash.bmpファイルがあるので、これを自分の好きな、或いはアレンジした画像に置き換えてあげるだけ。
これで次回の起動のときに表示されます。

かなり簡単ですね。
さぁて、画像作ろう。。。

■関連リンク
・世話焼き系IDE：eclipseたん - 虎塚
・Eclipse起動時に表示される画像を変更する

普段Googleトップをあんまり活用していないのでわからなかったですが、わっきーさんに教えてもらいました。

んで、コード見てたらロゴのimgタグのonloadにリンゴを落とすJavaScriptが書かれててちょっと面白かった。
imgのonload使うときって、あとから読み込んだ画像のwidth・heightを取得するときに使ったりするんですが、こうゆうトリッキーな使い方は面白いですね。

ざっくりですが、コードを抜き出してみたのが以下。

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>アイザック ニュートンの誕生日</title> <script type="text/javascript" charset="utf-8"> var google = {}; // rein用 window.fail = function() { window.lol && lol(); setTimeout(function() { var h = 0, v = 1, f = document.getElementById('fall'), i = setInterval(function() { if (f) { var r = parseInt(f.style.right) + h, b = parseInt(f.style.bottom) - v; f.style.right = r + 'px'; f.style.bottom = b + 'px'; if (b > -210) { v += 2 } else { h = (v > 9) ? v * 0.1: 0; v *= (v > 9) ? -0.3: 0 } } }, 25); google.rein && google.rein.push(function() { clearInterval(i); h = 0; v = 1 }) }, 2000) } </script> </head> <body>　　　　　　　　　　 <img src="tree.jpg" onload="fail();"> <img src="apple.png" style="position: relative; right:248px; bottom: 46px;" id="fall"> </body> </html>

1個分からないのが、アニメーションのclearIntervalをgoogle.reinにpushしているんですが、
これをいったいどこで実行しているんだろう。。。

Googleトップのコードを一通りおってみたんですが、実行してそうな箇所がない。
1つだけあやしい箇所があったんですが、9zPpGAOKyhU.jsの中の以下の部分。（だいぶ端折ってます）

i = "push"; h.rein[i](function() { t = h.pageState; x() });

iにはpushという文字が入っているだけで、pushされた分をループしているわけではない。。。

仕方ないので、以下のグリモンでテスト。
タイミングがもしかしたら微妙かもしれないが、リンゴが落ちたあとにclearIntervalされるはずだからonloadでもOKでしょう！

google.rein実行された？グリモン

// ==UserScript== // @name google rein // @namespace http://hisasann.com/ // @include http://www.google.co.jp/* // ==/UserScript== window.addEventListener('load',function(){ var google = unsafeWindow.google; if (google) google.rein.push(function() { console.log("execute!!"); }); }, false);

じっ、実行されない。。。

Firebugのprofileで調査

リンゴが落ちたあとにprofileを開始して、適当なタイミングで止めてみたのが以下の画像。

「undefine()」の部分が、該当のアニメーション処理。
中身を見ると、

function () { if (f) { var r = parseInt(f.style.right) + h, b = parseInt(f.style.bottom) - v; f.style.right = r + "px"; f.style.bottom = b + "px"; if (b > -210) { v += 2; } else { h = v > 9 ? v * 0.1 : 0; v *= v > 9 ? -0.3 : 0; } } }

とアニメーションのクロージャが入っているので、間違いないでしょう！
profileEndのタイミングをずらせばもっと回数の部分が増えていきます。

結局、よくわからなかったんですが、実行してないでしょ？w
いや〜分からんな〜〜〜。

グーグルのロゴデザインやってる人に
乱歩のやつは最高だったと伝えておいてください

喜ぶと思います。彼はdoodle 作るのにたくさんの資料や本を読んだり、頭があつあつになるくらい考えてますから。
でも手塚治虫先生の時や藤子先生の時など漫画がたくさんおいてあるので遊んでるみたいです。

via: グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

[via]
グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

明けましておめでとうございます。
昨年はいろんなJavaScripterの方の記事を参考にさせていただき、またJavaScriptが一段と発展した年でした。
今年もオモロい記事や作品がいっぱい世に出てくるんでしょうね。

さてぼちぼちJavaScriptを書き始めますかっ！！

とりあえず今制作しているものも早く完成させてリリースしていきたいとおもいます。
では本年もよろしくお願いいたします。

I Love JavaScript!!

Macの「システム環境設定→共有」にて以下の設定をするだけ、

IPアドレスが表示されるので、あとはWindows上からSSHクライアントでログインすればOK。

Windowsの有名どこなSSHクライアントはTeraTermかPoderosaかな。

まぁWindowsからSSHでログインしても特に意味はないんですがねｗ

JavaScriptのDomメソッドがどうやって動いているのか、普段あんまり意識しないですが、気になりだすと調べたくなるものです。

WebkitはSafariやGoogle Chromeに採用されているレンダリングエンジンで、高速でありアニメーションも非常になめらかです。

そんなWebkitをいつでも追えるように、デバッグ環境を作っておくと便利かも？と手順をメモしておきます。
「JavaScripterの参考になればうれしいです。」

XCodeのインストール

XCodeのインストールは、インストールディスクの中にあるOptional Installsフォルダに入っていますので、そちらからインストール可能です。
もしインストールディスクがない場合は、Apple Developer Connection - Mac Dev Centerよりダウンロードが可能です。
ただし、AppleDeveloperConnectionへのログインが必要になります。

[via]
The WebKit Open Source Project - Installing Developer Tools

Webkitのソースコードをダウンロードする

ターミナルを起動して、まずはダウンロード先のフォルダを作成します。

cd ~
mkdir webkit
cd webkit

次に以下を入力するとSVNからダウンロードが開始されます。

svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit

僕は30分以上かかったので、ランチに行くときに実行しておくとよいかもしれません。
また1度目はターミナルが途中で落ちてしまったので、あまり他の作業は行わずソースのダウンロードに専念させてあげたほうがよいかもしれません。

ソースコードのダウンロードが終わりましたら、以下を実行してください。
どうやらこれをしないとビルドがうまくいかないようです。

WebKit/WebKitTools/Scripts/update-webkit

[via]
The WebKit Open Source Project - Getting the Code

Webkitをビルドする

さっそくビルドを開始します。
以下を実行すると、ターミナルが膨大に流れ始めます。

WebKit/WebKitTools/Scripts/set-webkit-configuration --debug
WebKit/WebKitTools/Scripts/build-webkit --debug

ビルドもだいたい30分くらいかかるので、夕飯を食べにいきましょう！

成功すると以下のようにコンソールに表示されます。

Touch /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework
cd /Users/hoge/_/code/webkit/WebKit/WebKit
/usr/bin/touch -c /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework
** BUILD SUCCEEDED **

===========================================================
WebKit is now built (32m:39s).
To run Safari with this newly-built code, use the
"WebKit/WebKitTools/Scripts/run-safari" script.
===========================================================

[via]
The WebKit Open Source Project - Building WebKit

Webkitを起動する

WebKit/WebKitTools/Scripts/run-safari --debug

これで今回ビルドした内容でSafariが起動すると思います。
これでテストは完了です。

XCodeを使ってWebkitをデバッグしてみる

ではでは、いよいよWebkitをデバッグしてみます。
今回はdocument.getElementByIdをデバッグしてみようと思いますので、WebCoreあたりを除いてみます。

まずはダウンロードしたWebkitのWebCoreディレクトリをFinderで表示します。
僕の場合は以下のようなパスにダウンロードしました。

/Users/hoge/_/code/webkit/WebKit/WebCore

ここにXCodeのプロジェクトファイル「WebCore.xcodeproj」があると思いますので、実行してみましょう。
起動するとWebCoreプロジェクトが左のペインに表示されます。

ここのWebCoreの部分で右クリックして、「情報を見る」を選択します。

するとWebCoreの情報が表示されるので、

のように、「カスタムの保存場所」を指定します。
これは実際にビルドされた内容が存在するパスを指定していることになります。

次にアタッチ先となる実行可能ファイルを作成します。

「グループとファイル」ペインの真ん中あたりに「実行可能ファイル」という項目があるので、ここを右クリックし「追加」→「新規カスタム実行可能ファイル」を選択します。
以下のようにSafari.appまでのパスを設定します。

これによりデバッグ時にSafariを使う設定が完了しました。

Webkitにアタッチさせる

いよいよデバッグです。
XCodeのメニューにある「実行」から「進行（デバッグ）」を選択し、デバッグモードで起動します。

この作業は少し時間がかかるので、Safariが起動するまで気長に待ちましょう！
ここでどんな作業が行われているかをコンソールから確認することができます。
以下のボタンをクリックしてコンソールを立ち上げてみましょう。

このように何かしらの作業が進行していると思います。

Safariが起動したら、ブレークポイントを貼ってみましょう。（ここが今回の穴場です！）

document.getElementByIdにブレークポイントを貼る

左側のペインのWebCoreのdomの下にDocument.cppというファイルがあるので、これをクリック。
すると右側のペインにソースコードが表示されるので、「Cmd + F」でgetElementByIdを検索してみます。
（シンボルを選択するプルダウンからもメソッドを表示することができますが、今回は検索機能を使ってみます。）

すると以下のようなコードにたどり着くと思います。

Element* Document::getElementById(const AtomicString& elementId) const { if (elementId.isEmpty()) return 0; Element* element = m_elementsById.get(elementId.impl()); if (element) return element; if (m_duplicateIds.contains(elementId.impl())) { // We know there's at least one node with this id, but we don't know what the first one is. for (Node *n = traverseNextNode(); n != 0; n = n->traverseNextNode()) { if (n->isElementNode()) { element = static_cast<Element*>(n); if (element->hasID() && element->getAttribute(idAttr) == elementId) { m_duplicateIds.remove(elementId.impl()); m_elementsById.set(elementId.impl(), element); return element; } } } ASSERT_NOT_REACHED(); } return 0; }

そうです。これがdocument.getElementByIdの実体です。
普段使いに使いまくってるメソッドを見れるのはうれしいですね〜。

では簡単なHTMLファイルを作ってデバッグしてみましょう！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title> </head> <body> <div id="hogehoge">hoge</div> <script type="text/javascript" charset="utf-8"> alert(document.getElementById("hogehoge").innerText); </script> </body> </html>

デバッグを貼るポイントはとりあえず、以下のifのところにしてみましょう。

if (elementId.isEmpty()) // ここです return 0;

すると以下のようにブルーのしおりのようなものが表示されるので、これがブレークポイントになります。

これで先ほどのHTMLファイルをSafariで開いてみますが、まだアラートは表示されません。
document.getElementByIdにブレークポイントを貼っているので、アラートが表示される前にデバッガがWebkitの実行を待ち状態にしています。

デバッガを使ってみる

ここで便利なのがデバッガです。
デバッガは以下のようにボタンになっているのでクリックすれば起動されます

HTMLファイルを開くとブレークポイントのところでストップします。
あとはステップオーバーしたり、ステップインしたりして遊んでみてください。

変数の監視でelementIdを見ることは出来るのですが、UChar *を16進で表示しているので本当にgetElementByIdで渡した文字列が入っているのかが確認できません。
バイナリから判断することはできるのですが、デバッガウィンドウに直接文字列が表示してほしいところです。
値を他の形式で表示してもうまくいかないので、ここは後で調査します。

Windowsでのデバッグについて

今回はMacのXCodeを使ってWebkitをデバッグしてみましたが、もちろんWindowsのほうでもデバッグは可能です。
手順は以下のリンクに詳細が載っていますが、Mac版とくらべてややこしそうです。

VisualStudioをインストールして、さらにパッチなども当てなくてはいけないので、サクッと試したい場合はMac版のほうが簡単そうです。

WebKitビルドガイド（ドザー用） - 最速チュパカブラ研究会

まとめ

document.getElementByIdを追ってみましたが、何度か実行しているとあることに気がついてきます。
elementIdより該当のidを持つエレメントを探しにいくんですが、m_elementsById.get()を実行してすでにモジュール変数にエレメントがある場合は検索処理をスキップします。
つまりサイトを開いて、Cmd + Rを押すとすでにm_elementsByIdにエレメントが入っているので、高速に動くみたいですね。
こうゆう情報は実際に追ってみないとなかなか分からないものです。

ソースコードも膨大ですが、XCodeでのビルドも結構時間がかかりますが、今後面白い内容が発見できたらブログにアップしていこうと思います。

■参考リンク
・[Tips] Xcodeでプログラム実行と同時にコンソールウィンドウを表示させる方法 - Ni chicha, ni limona -平均から抜けられない僕-
・Mac OSX Build and Run! Xcodeの入手方法