來自Yahoo Javascript大師的程式效能提示

在James Padolsey的Blog看到這個，Nicholad Zakas，Yahoo首頁的主要前端工程師、YUI作者之一、也是多本Javascript書籍的作者，前些時候在Google演講: "Speed Up Your JavaScript"(YouTube上有全程錄影)

身為Yahoo網站前端程式的苦主，Zakas的經驗分享肯定不是嘴砲，絕對是拳拳到肉的紮實功夫。James整理的五則筆記挺扼要的:

1. 為Global Object建立Local Variable分身
2. 為深層Property建立Local Variable分身
3. 用Reverse Loop: while (i--) 取代 while (i < length)
4. 直接指定完整HTML比逐層建立DOM物件快
5. 指定CSS，不要個別改變Style內容

第4,5點還算較符合一般程式架構的原理，但1,2,3點若要落實，免不了會讓程式碼變得囉嗦與不直覺，理論上這些是Compiler或Runtime要代勞的骯髒活兒，但依目前Javascript語言與瀏覽器的進展來看，避免效能不彰的重任仍在Javascript Developer身上，而提升效能的手法通常不怎麼直覺，也多少會損及程式碼的簡潔性。換句話說，寫出高效能的Javascript需要花費不少功夫鑽研與實踐。總體而論，在維護規模較大、複雜度較高的網站系統時，全程使用Javascript會比採取.NET等語言耗費更多的心力與時間。

記得先前在噗浪看到幾則關於Javascript Framework的討論，有人問道，難道jQuery這類的解決方案都沒有黑暗面?

在我的看法裡，對jQuery的推崇源於它改變了Javascript Coding的哲學，節省了過去許多囉嗦、沒效率的程式寫法，但這些改良源於它與傳統寫法的對比，jQuery並沒有改變Javascript語言與執行平台的本質。而在做過幾個"純JS"的複雜專案後，我也漸漸體驗到Javascript的黑暗面多不勝數: Javascript不像.NET有完整的Class/Interface架構可資利用、缺乏Strong-Typed的Syntax檢查讓常打錯字的人痛不欲生(像我)、當程式龐大時缺乏VS這類華麗IDE對養尊處優慣的人十分殘忍(像我)、直譯式語言執行效能遠遠不及編譯式語言、未必能找到各式應用所需的Library(例如: 壓縮、編碼、數學運算、統計、圖形)...

但是，Javascript在絕大部分瀏覽器上不需任何安裝就可以順利執行的特點無可取代，在沒有外掛插件的情況下要達到順暢而直覺的網頁互動操作捨它其誰? 當你不得不考量使用Javascript解決問題時，jQuery是最佳的良伴。但若系統複雜到用Javascript寫會血流成河時，別執迷不悟地抱著它同歸於盡。

在IT職場闖蕩十餘年，漸漸有個體悟: 搞程式的人最好能像牆頭草，不同情境下誰有利就投靠誰，有奶便是娘(當然轉換語言平台也要成本，這也是"有利"與否的考量因素之一)；不過寫個程式搞成宗教狂熱份子以身殉道，除了受人膜拜空有一身哀榮，對養家活口實在沒什麼幫助。(唉! 我真現實~~~)