作者mrbigmouth (拒绝崩溃的蒲公英)
看板Ajax
标题[讨论] JS的程式优先性管理？
时间Mon Apr 2 03:10:40 2012
随着浏览器的进步跟HTML5的兴起，
现网页运用到JS的机会越来越多，份量也是越来越庞大了，
相对的是，网页中的JS也占去浏览者更多的记忆体与运算能力。
这种情况下，该怎麽安排去网页里各个程式的运算优先性呢？
举一个工作上遇到的实际例子：
在一个网页上秀出了非常大量的商品，
每个商品都有其贩售的日期与倒数计时器。
结果由於「每一秒都得去修改每一个倒数计时器上的数字」，
导致当时间经过时，浏览者的整个浏览器都会小小的停顿一下，
产生非常负面的使用者体验。
这个例子最终是透过修改程式，
使程式只去修改「位於使用者画面中的的倒数计时器」，
让工作量变小、停顿变得可以接受，
但事实上，问题并没有得到根本的解决。
最理想的程式运作模式，
应当是如同我们现在所使用的系统一样，
无论程式怎麽跑、甚至所有程式都陷入无穷回圈而当掉了，
「滑鼠指标移动」这种使用者输入相关依然是最优先处理的运算，能够安然运作。
而整个系统里运作中的程式也应该依其运算量而拥有各自的优先级别，
最最起码，当我试图进行一个「非常复杂、需要从本地资料库提取大量资料
运算并以之绘制大量圆饼曲线图」的工作时，我希望原本网页中的下拉式选
单能够不受影响，使用者也能够在处理的过程里偷空去观看之前已经处理好
的其他资料。
比较简单的作法大概是让运作量较大的程式每到一个段落就结束，
然後setTimeout去call下一步的工作，
但如果网页这时完全没有其他的工作在运作，
这反而是一种效能上的浪费。
比较麻烦的作法是写一支程式去统一管理每个工作，
然後让所有程式都拥有「每到一个段落就先储存现有进度等待再次呼叫」的能力，
......光想就觉的麻烦，
而且这种作法显然会对网路上拿来的Plugin无效....
HTML5的Web Workers好像是一种解法，（这个我还不是很了解）
但似乎也是没办法把原网页DOM传过去worker去做动画的（？）
而且把一个网页的JS全部分开写档案丢进Worker....感觉依然很有问题啊...
有没有人也思考过这个问题，
或是网路上已经存在良好解法的？
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 1.170.104.126
※ 编辑: mrbigmouth 来自: 1.170.104.126 (04/02 03:12)
1F：→ TonyQ:目前主要是透过 queue 再做这些事情，确保 browser 同时间 04/02 12:39
2F：→ TonyQ:内只做一件 browser 可以承担的事情。 04/02 12:39
3F：→ TonyQ:你要知道的是之所以指标动不了的理由是，指标移动的过程也 04/02 12:39
4F：→ TonyQ:在制造事件，所以 js 基於 UI 单线程的原则也只能停下来等 04/02 12:40
5F：→ TonyQ:在一般的 app 你有机会开UI thread以外的 thread 去做事， 04/02 12:41
6F：→ TonyQ:在 client side 除了将运算转回 server 让资料运算降到最低 04/02 12:41
7F：→ TonyQ:你没有什麽其他机会作这件事。 04/02 12:41
8F：→ TonyQ:UI thread 的管理在所有 UI 相关的应用程式上都是个大麻烦 04/02 12:44
9F：→ mrbigmouth:依然不认为把运算传回server会是好主意 04/04 01:18
10F：→ mrbigmouth:不过UI thread看起来真的是没办法 一定得另外管理了 04/04 01:19
11F：→ mrbigmouth:不过查了一些范例 用jquery管理似乎满方便的就是了 04/04 01:20
12F：→ mrbigmouth:只是想想...最吃资源最常当掉的DOM操作没办法塞进WebWo 04/04 01:23
13F：→ mrbigmouth:rker里面...实在是很可惜啊.... 04/04 01:24