來自Yahoo Javascript大師的程式效能提示
9 |
在James Padolsey的Blog看到這個,Nicholad Zakas,Yahoo首頁的主要前端工程師、YUI作者之一、也是多本Javascript書籍的作者,前些時候在Google演講: "Speed Up Your JavaScript"(YouTube上有全程錄影)
身為Yahoo網站前端程式的苦主,Zakas的經驗分享肯定不是嘴砲,絕對是拳拳到肉的紮實功夫。James整理的五則筆記挺扼要的:
- 為Global Object建立Local Variable分身
- 為深層Property建立Local Variable分身
- 用Reverse Loop: while (i--) 取代 while (i < length)
- 直接指定完整HTML比逐層建立DOM物件快
- 指定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職場闖蕩十餘年,漸漸有個體悟: 搞程式的人最好能像牆頭草,不同情境下誰有利就投靠誰,有奶便是娘(當然轉換語言平台也要成本,這也是"有利"與否的考量因素之一);不過寫個程式搞成宗教狂熱份子以身殉道,除了受人膜拜空有一身哀榮,對養家活口實在沒什麼幫助。(唉! 我真現實~~~)
Comments
# by laneser
阿...自從成家有小孩以後...我也現實起來了... 真的是有奶便是娘! 哪邊的 framework 有市場我就寫... 沒辦法啊, 理想已經退化到只要寫程式就好了 (至於寫的是 .NET or Java or what ever?! Who cares?!)
# by gipi
Golbal/Local,Object cache這些概念我想絕對是有其意義的,不過如黑暗大所說,對程式設計師來說,能不能寫好程式重點還是在如何善用手上或別人身上個工具...
# by QQ
找資料找到這裡 好有深度的知識網站......... 讚~~~~~ <a href="http://www.superpay.com.tw">網頁設計</a>
# by 路過的
程式語言只是工具,只要能解決問題就是好工具, 不用非拘泥使用何種工具不可 XD 至於使用工具所雕出來成品好壞,就看個人功力了。
# by Henry
web-based系統開發經驗談。現在客戶與開發者之間的關係愈來愈異化(Entfremdung)。以前程式怎麼寫客戶就怎麼用。現在的客戶,外行領導內行,開口閉口就說「要像Google那樣」、「要像Yahoo那樣」,寫不出來好像自己不行,一旦接下來,才發現是一無底洞,牽一髮動全身,沒完沒了。
# by QQ
看完...深有同感..^^... 真是不錯的blog~~~ 讚 <a href="http://www.superpay.com.tw">網頁設計</a>
# by Ammon
「要像Google那樣」、「要像Yahoo那樣」 這種時候我會說,如果我和Google工程師有著同樣等級的薪資與待遇,做到那樣當然沒問題 XD
# by 海角147號
..^^..像Google那樣,就開Google價! 像Yahoo那樣,就開Yahoo價! 像中華電信那樣,就開中華電信價!
# by qffcc
good~~找資料,逛到這裡... 真是不錯的blog~~~ 讚 <a href="http://www.superpay.com.tw">網頁設計</a>ttp://www.superpay.com.tw">網頁設計</a>