[問題] 一個頁面上會有800個按鈕(mobile device)

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