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