Author Archives: Timothy Chien (blog)

IE9 Hackathon

Posted on by

Skip to IE9toss demo, source code and explanation.

星期六去了 IE9 黑客松，算是一場輕鬆的寫程式、認識其他 Web Developer 的比賽。滿錯愕的，因為以為是個 50/60 人以上，類似 Yahoo! Open Hack Day 一樣的大型活動，結果簽到簿只有少少 20 人，超緊張的，本來想說如果人多，做不出來可以打混… XD。到的時候有點晚，感謝 josephj 收留讓他坐他旁邊的位子。食物果然如活動介紹上面寫的一樣相當誇張，早上麥當勞，中午吃了海壽司，下午有星巴克，最後外面的零食跟雞排就 pass 了。

回到活動本身。上官大大出的比賽題目是寫出 2D 迷宮遊戲，或是 Paper Toss 遊戲。我選了 Paper Toss，因為感覺動態遊戲效果比較好，而且迷宮遊戲要求的滑鼠、鍵盤控制我比較不會。後來把握時間把 spec (XD)要求的功能都寫進去了，也盡量用了想到用的到的 IE9 新的 HTML5 技術。也因為不會做 Art，剛好為了搞笑，所以我就做了個把 IE9 Logo 丟進 HTML5 標誌的遊戲：

Demo、Source

用到的技術可以在 Github 上面的 README 看到。寫一些感想：

  • 大部分的同好都是選迷宮，原因是因為不知怎麼處理丟東西的物理。其實 free fall 不需要真的解方程式來套或是像強者如 whsienc 把 box2D 拿來用，只要跑 loop，假設 loop 每次執行的時間為單位時間（要不用這個假設，實際量瀏覽器跑 setInterval/setTimeout的時間也可以，jQuery animation 就是這樣），每次執行位移的變化量就是速度乘單位時間、速度的變化量就是加速度（重力）乘單位時間。而且自由落體是各方向獨立的，X/Y 可以分開計算。
  • 風阻力用高中物理的近似，造成的加速度和速度成正比，所以每個 loop 再把加速度減掉設定的係數乘上目前的速度。不過這就沒有各方向獨立了，但我在程式還是把他當成方向獨立，因為這是黑客送不是物理模擬 XD。寫這些計算程式大概花了 1/3 的時間。
  • 知道可以這樣寫是因為大一物理系計概 … 這個運動不難，解出來其實是二元偏微分方程組，把方程式丟進程式也可以把動畫套出來（以我現在的工數能力可能解不出來就是orz）。但也是因為計概才會知道運動模擬應該要這樣寫，因為真實世界有方程式解的運動相當有限。說來也滿好笑的，雖然很喜歡寫程式，但當時其實很討厭那門課。
  • 在跑的動的情況下，東西上 canvas 滿方便的。而且預設的底是透明的，所以可以浮在任何背景的前面，裡面的東西只要 clearRect 就可以清掉。
  • Webkit 的 drawImage 對 SVG 的原生大小判斷是有錯誤的（所以上面的 screenshot 裡 HTML5 logo 才會比例錯誤），同樣的程式碼在 IE9 是對的，所以就保持那樣
  • Firefox 因為不明原因會 JavaScript Error，無法執行遊戲，我還沒 trace （大概也不會管了。Pull Request anyone？）
  • 撞到了 jQuery 這個 Issue：jQuery.camelCase() & jQuery.css() incompatible with IE prefixed properties。後來寫的 Wordaround 是 josephj 教我的。
  • 寫完 -ms-text-shadow: 發現沒效之後問了 ericsk 才發現 IE9 沒有XD text-shadow 本來就沒有 vender prefix，IE 也沒有支援就是。

再來，講一下主角，IE9，其實活動前後我的看法沒有什麼變化：

  • IE9 還是可以套進原本的開發流程：用 Webkit Nightly + 文字編輯器，全部寫好上 feature detection 之後再到其他瀏覽器調 style 和小的 JS 錯誤。但好處是相較於其他 IE，因為它更接近標準而且終於有堪用的開發者工具，所以調起來又更輕鬆了一點，終於不是為了支援 IE 程式碼要增加 50% 這樣。我猜是參考了很多 Webkit 的行為。
  • 但是呢，HTML5 DocType 沒有正確的在 ddsakura 的電腦上觸發 IE9 模式，於是就壞掉了。不知道是之前有設定 overwrite 掉還是真的有問題。
  • 另外，雖然效能終於趕上了其他瀏覽器（明天正式推出，正式版一字排開 Fx 就要被比下去了），但是還是少了一些功能，所以功能偵測和 fallback 還是不能少（至少我上兩個星期寫的兩個程式都不能用，我想要 Web Workers 和 FormData Interface 啊啊啊）
  • 還有一個不幸的事實是，因為 WinXP 不能裝 IE9，故 IE6 很有可能再活個一兩年…

我一直都認為一群人組成的團體是沒有靈魂的；一家公司為股東追求利益天經地義，所做決定無關善惡道德。某家公司做了和我們相信的理念相同或是相反的事情，都只是剛好而已。如果 MS 往符合理念的方向移動，該給的肯定還是要給啦。上官大大主辦的開發者的活動真的不錯，大家有空真的可以把握機會投投看。我也是在那天才真的認識了 josephj，經由他和 hlb 聊天開釋才真的搞懂最近那些 JS Loader 和 AMD Spec 在幹嘛。啊，還有在同一間學校 ID 看很久但是都不認識的 grassboy。

嗯，以上絕對不是因為拿了 peer vote 第三名抱了 XBox 360 + Kinect 回家才這樣說的 XD 你看我沒有都講好話嘛。

用 setInterval 防止瀏覽器卡死

Posted on by

Twitter 上面的 vincicat 發問：

@timdream 咦，這個沒聽過，setInterval是怎樣避免block UI?

其實這個技巧我已經忘記是哪裡看到，還是小時候自己試出來的。總之，如果要重複進行一個會讓瀏覽器卡住的計算或是 DOM Operation，可以考慮不要用原本的 forEach、for、或是 while，改用以下的 pattern。

原本的：


arr.forEach(
    function (val, key) {
        [昂貴 DOM 運算，例如畫 canvas，塞 element ...]
    }
);

可以換成


var i = arr.length-1;
timer = setInterval(
    function goNext() {
        [昂貴 DOM 運算，例如畫 canvas，塞 element ...]
        if (!i--) {
            clearTimeout(timer);
        }
    },
    0
);

或是，如果在意順序的話：


var i = 0;
timer = setInterval(
    function goNext() {
        if (i >= arr.length) {
            clearTimeout(timer);
            return;
        }
        [昂貴 DOM 運算，例如畫 canvas，塞 element ...]
        i++;
    },
    0
);

因為瀏覽器的 UI 是 single thread queue，在網頁的 Javascript 執行完之前瀏覽器是沒有辦法做其他事的。不過用了這個 pattern，我的猜想是即便程式碼是 0 ms 的 setInterval，在迴圈兩個元素執行之間瀏覽器會有機會 queue 自己的工作，因此 UI 可以保持有回應的狀態（例如，使用者可以按 Ctrl+F5 reload）。

當然真的需要花時間的計算要丟進 Web Workers 才對啦，但我自己的經驗是有支援 Web Workers 的瀏覽器速度都夠快 … 根本就用不到 Web Workers。而且真正會卡的東西都是 DOM Operation，Web Workers 不能用。雖說整個迴圈執行的總時間會加長，但是體驗上比較 OK；瀏覽器把每個步驟的 DOM 改變都呈現出來有時會有意想不到的視覺效果 :)。

這是最近寫某個玩具的心得，stay tuned for announcement。

專訪 Mozilla 總部

Posted on by

去年 12 月去了 San Francisco，順道去參觀了 Mountain View 的 Mozilla 總部（感謝 Marketing 的 Mary Colvig 的招待！）。我自己在當天例會給了 5 min 的小 talk 介紹了 MozTW，反過來則邀請了四位 Mozilla 的員工讓我訪問，影片在 YouTube 上。

如果有時間的話，請到 Universal Subtitles 幫忙上字幕！感謝！