誠徵網站開發soho人才 - soho

※ 引述《kuohuilu (風之影)》之銘言：
: 推 JeremyJoung:老實說 每次看到有人提起jQuery就會一整個吐血 這種 06/01 23:48
: → JeremyJoung:執行效能低落到吐血的物件包 怎麼有辦法這麼火紅實在 06/01 23:49
: → JeremyJoung:令人匪夷所思 又不是說沒jQuery就做不出來 06/01 23:49
: → gpmm:jQ 效能不好？？ hm.....可能見仁見智吧 :Q 06/02 00:17
: 推 JeremyJoung:jQ是方便(雖然我不覺得) 但是到一定程度以上系統後 06/02 00:24
: → JeremyJoung:會異常拖累效能 你可以想像 一個操作要10秒鐘會怎樣 06/02 00:25
: → JeremyJoung:一個按鍵就要10秒 沒有唬人 06/02 00:25
: → lickpurple:可以舉例怎麼個拖累法嗎 ? 我是覺得還挺方便的 06/02 01:48
: → lickpurple:但是還沒有碰上遇到效能上的問題，用JQ的AJAX 06/02 01:49
: → lickpurple:效能似乎也比內建的Call back來的高 06/02 01:50
: 推 JeremyJoung:基本上 就是 你頁面載入瞬間 CPU滿載鎖死3-5秒 就這樣 06/02 01:56
: 推 JeremyJoung:目前我大致上是可以推斷是JQUERY的類innerHTML 06/02 02:08
: → JeremyJoung:但是更進一步的 還不確定 06/02 02:09

雖然說在soho版討論技術話題有點跳tone，（歡迎來ajax版）
我想我們可以針對技術話題來討論一下。

首先效能這個問題是by browser的，就跟靈異現象一樣。
特別是webkit(safari), firefox,ie6,ie7,ie8 還有v8(chrome)

不同 js engine 表現其實會差蠻多的，ie6是其中最糟糕的，
所以應該要先講明browser，這是一個很重要的討論前提。

還有基本上用 jquery的前提下，大部分狀況下不會比純js coding好，
除了你純js coding的技巧真的太差。

因為中間差了很多委派的隱性成本，
用lib本來就不是要追求效率上的快，而是開發速度上的快。


基本上你說的狀況我有一些猜測，
你可以先試著用以下的方式去tune，如果你還有機會去做的話。


首先 js file的載入要盡可能的設計放在body尾端而非head，
放在head會造成頁面因為讀取js而有片段的卡住的情形。

再來要盡量避免在ready時 load 太多的片段，執行載入是需要成本的。

最後也最重要的是，盡可能減少 執行 selector 的動作。


錯誤示範
$(".message").html("hello");
$(".message").show();
$(".message").css("color","red");

正確示範
var message=$(".message");
message.html("hello");
message.show();
message.css("color","red");


在某些能力比較弱的browser ，這是很顯著有影響的。
（對 ie6,我就是在說你！）


: → gpmm:jQ 效能很吃使用手法（攤手） 06/02 02:42
: 推 JeremyJoung:其實我也沒在使用JQ的 我是看別人的結果很悽慘 06/02 03:33
: → JeremyJoung:我習慣都是以ID操作 特效會做成FUNC封裝 06/02 03:33
: → JeremyJoung:基本上 我不曉得 JQ究竟有什麼特點比較好? 06/02 03:34
: → JeremyJoung:他只是做成很像CLASS的操作手法而已 感覺根本沒差 06/02 03:35

我覺得這有個很重要的前提，你已經有現成的東西可以用，才會這麼覺得。

比方說早期我們在做 request 也是拿example來改，
但是如果沒有example咧？沒有已經做好的東西時呢？


你要花上半天一天的時間去重新開發一個 draggble，
跟那些靈異現象還有你的邏輯打仗，or 犧牲一點效能用jQuery開發？？

當然，如果說是換換顏色變變位置顯示隱藏這種level的效果，
的確用jQuery是蠻蠢的。


: → lickpurple:為啥會在page load鎖死，除非是在page load的時候載入 06/03 00:15
: → lickpurple:很多設定，我大都是在page load之後才在用JQ的 06/03 00:16
: → lickpurple:我比較好奇的是為什麼鎖死的情況，是怎麼鎖死的 ? 06/03 00:18

: 推 JeremyJoung:我沒有完全解晰該網頁 不過他是採用二段LOAD 06/03 00:35
: → JeremyJoung:一開始只LOAD皮 之後再AJAX呼叫DATA 然後 這個二次載 06/03 00:37
: → JeremyJoung:入 會嚴重咬死CPU 非常明顯 而且感覺IO LAG也非常嚴重 06/03 00:37

猜對了，這裡有兩個可能性要嘛就是他load進來的資料非常肥，
要嘛就是他load進來的東西分成非常多批。

這解法很簡單，用jQuery.queue 依序給進去就好。


另外，要鼓勵盡量避免太大量的 init ajax request ，有害無益。

還有，這問題就算用純js寫一樣很難避免，
這是瀏覽器承受不住這麼多的資料同時處理的問題。

: → j100002ben:會不會是JS寫得不好？還是網站資料太多? 06/03 11:28
: → arrack:jQ吃死效能那是看你怎麼寫的.... 06/03 11:59
: → arrack:寫得不好，就算自己用JS慢慢刻，效能一樣慘 06/03 11:59
: → darkness001:應該是js寫太爛吧... 06/03 20:22

有時候是網站本身的資料來源的設計就有問題，

不過大部分狀況下都有方法可以再tune一些。

tune不起來的就只能改結構了，其實很多事情都有其先天上的限制的。
不過這類問題通常啦，純js也很難解...

: 推 aceone:jQ會紅是因為它對美術人員來說很容易上手 我不懂js也用很兇 06/03 20:36
: → aceone:然後就變很慢 XD 不過程式都還會再拿去整理一遍 06/03 20:37


: → j100002ben:JS不能一直對DOM操作，那樣會等死.要var出區域變數 06/04 07:28

應該說js不能一直對dom做query，不對dom的元素賦值幹嘛的，
那用js幹嘛 寫cookie嗎？ XD

: 推 JeremyJoung:我可以確定 對方一定是不太會寫程式 奇怪的BUG也不少 06/04 09:08
: → JeremyJoung:反正 給我的刻板印象就是 jQ能避就避 06/04 09:09

如果你不用 jQuery 可以做到，然後解決方案問題又比較少，
我也會鼓勵你不用 jQuery ，事實上我自己現在也不太常用。

不過有些時候或有些功能你自己寫會有很多奇怪的bug的時候，
那就不如用 jQuery 先頂著了。


類似的 sample 大概就像 drag and drop , dialog ,

sortable 之類的常用功能，自己寫會有點辛苦，
而且代碼不一定好maintain，那就不如用jQuery ui。

（還有就是像tooltip這種比較眾技巧的效果）


對了，使用jQuery 或 js 一定都要對一件事情謹記在心，
事件的綁定是很高成本的，物件的層級越高成本就越高。

所以 body/window的事件是最高成本，因為event會有bubble的效果，
綁在body 的event 常常有機會被bubble到，
就算只是綁上去什麼也不做，這無形中仍會造成很大的負擔，

每個事件的內容執行要盡可能的快，事件的綁定層級要盡可能的低，
that's all.

--
我：一半的日子讓你說，我聽你說你的所有______________________________________
______________________________________一半的日子我想說，對你說過去的所有：我
_______________________________________________________

在討論中妥善扮演兼具聆聽與分享的角色，是我們一生的課題。
_______________________________________________________

--