作者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