作者fortinet (fortinet)
看板Web_Design
標題[問題] 一個頁面上會有800個按鈕
時間Mon Dec 30 11:53:09 2013
目前手上有一個專案, "在平板電腦上", 有個需求要在同一個頁面擺約800個按鈕,
"當按下某個按鈕, 其他按鈕會依照預先定義的規則Disabled或變色"
目前prototype測試結果, 同時擺這麼多物件在頁面是還可以接受,
但按下一個鍵, 要讓其他所有按鈕更改樣式一定會造成延遲,
依照規則的複雜度, 嚴重情況下整個瀏覽器會停滯1~3秒.
手中有一個一樣功能的native app, 在同一台機器上卻能做到順暢無比,
我試過各種方法和最佳化, 仍然不能做到native這麼順,
想請問有沒有人有經驗關於這方面的解法? 還是說這就是HTML的極限?
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 101.12.79.112
1F：推 mmis1000:用閉包在初始化時就順便綁定變量，遍例dom很傷效能 12/30 11:58
2F：推 musie:開dev tool看repaint time 找哪邊是bottleneck... 12/30 12:00
4F：→ mmis1000:canva的call，都還有20-30fps，現代瀏覽器沒你想像中弱 12/30 12:01
5F：→ mmis1000:另外要大量更改樣式的話，建議先隱藏元素，等修改樣式完 12/30 12:03
6F：→ mmis1000:在顯示回去，畫面的reflow對效能也是大傷 12/30 12:04
9F：→ mmis1000:雖然只差幾個字，效能可以差到很多 12/30 12:31
10F：推 LaPass:我兩邊跑起來都很快.... 果然電腦有差.... OAO 12/30 12:43
12F：→ mmis1000:也只花了半秒阿 12/30 12:52
13F：→ fortinet:抱歉, 我忘了講是用ipad mini retina, 這應該是目前市面 12/30 12:55
14F：→ fortinet:效能前幾名的平板, 但我測試過還是需要2~3秒. 原生app可 12/30 12:56
15F：→ fortinet:以毫無延遲 12/30 12:56
※ 編輯: fortinet 來自: 101.12.79.112 (12/30 12:57)
16F：→ mmis1000:ipad上的chrome呢？ 12/30 13:07
17F：→ fortinet:iPad的Chrome其實是用Webview,所以跟Safari會一樣, 12/30 13:34
18F：推 mmis1000:拿android原生開也是無延遲阿，是safari專屬問題嗎？ 12/30 15:47
19F：→ fortinet:請問您是用哪一台android平板測？ 12/30 16:12
20F：→ mmis1000:單純拿模擬器測效能 12/30 16:20
21F：→ mmis1000:設定值是1.25ghz 1gbRam，應該跟近期的平板差不多 12/30 16:24
23F：→ fortinet:這是ipad mini retina的實機狀況，以我實際開發的經驗， 12/30 16:26
24F：→ fortinet:Android webview效能會輸iOS不少...所以iPad實機會頓 12/30 16:27
25F：→ fortinet:那Android只有可能更慘，我試看看能不能借到android平板 12/30 16:29
26F：→ mmis1000:看機種吧，再頓也不會比拿模擬器開頓吧？ 12/30 16:31
27F：→ mmis1000:上面某個測試的，因為邏輯問題，並不是每一下都會換畫面 12/30 16:33
28F：→ mmis1000:8000測試那個是正確的 12/30 16:33
29F：→ fortinet:Ok, 我借到nexus 7，真的是瞬間不會頓，但iOS就沒辦法 12/30 16:37
30F：→ fortinet:之前寫canvas, iOS FPS比Android高不少，但看來這樣操作 12/30 16:39
31F：→ fortinet:IOS就輸了。不過問題還是沒解就是了..XD 12/30 16:39
32F：→ mmis1000:如果canva比較快，那乾脆用canva做呢？ 12/30 16:44
33F：→ fortinet:聽起來有道理，我試看看，謝謝 12/30 16:47