jquery 可否非同步操作 innerhtml dom 物件

jquery javascript dom asynchronous

Zaku 2017-11-09 17:03:49 ‧ 6528 瀏覽

分享至

想請問jquery在操作dom物件去做新增、修改、刪除時，如果在一次大量操作時會卡死UI，就算丟到promise function裡面，還是會卡死，請問有什麼好方法或套件嗎?

看更多先前的討論...收起先前的討論...

神Q超人 iT邦研究生 5 級 ‧ 2017-11-09 17:08:52 檢舉

JQuery的ajax有一個async屬性，把他設成false的話，JQuery的非同步方法會變同步方法，可以試試看

fillano iT邦超人 1 級 ‧ 2017-11-09 17:33:05 檢舉

這跟DOM沒關係吧，而且async只對ajax有作用XD

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-09 17:33:06 檢舉

用 timeout 去分批處理，不過這樣程式不好看 XD。

神Q超人 iT邦研究生 5 級 ‧ 2017-11-09 17:39:32 檢舉

我沒看清楚問題不好意思~_~
還是給高手來處理XD

Zaku iT邦新手 3 級 ‧ 2017-11-09 17:49:47 檢舉

timeout太難管理了，不能確保沒有遺漏orz。恩async應該只對ajax，所以不知有沒其他方法

baida0630 iT邦新手 4 級 ‧ 2017-11-09 17:55:18 檢舉

看起來比較像是同一件事情重複做很多次才會產生的問題，如果是上述的問題導致的話，我會建議你把同一件事情找到它們的共通點變成做一次能達到同步更改會更好。

如果不是我會建議你把你的情境跟你的做法做一個簡易的範本放上來參考會比較讓人有針對性回答

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-09 18:54:19 檢舉

https://dotblogs.com.tw/kinanson/2015/11/15/153925
找到這篇，比較 jquery html vs jquery dom vs angularjs vs angular 2 效能，
處理 innerhtml 如果是用串字串的方式，會引響效能。

Zaku iT邦新手 3 級 ‧ 2017-11-10 09:40:34 檢舉

我的狀態是後台會一直打資訊上來，會變更不同區塊的資訊，比如說一個div區塊代表一個訊號資訊，當少量時沒關係，但極端狀況(真的會發生)可能發生大量錯誤，一次打一萬個上來之類的，在那個瞬間一次要更新上萬個div，大概是這個情況

石頭 iT邦高手 1 級 ‧ 2017-11-10 09:44:59 檢舉

顯示的資料是否要即時更新?
因為一個頁面大小能看多少是固定
那麼多資料人看了也會眼花連亂吧
是否可從需求面來解決?

Zaku iT邦新手 3 級 ‧ 2017-11-10 11:56:56 檢舉

沒辦法，是用scrollbar列，有多少就要列多少，需求方不是我orz。對是即時更新的

fillano iT邦超人 1 級 ‧ 2017-11-10 12:11:51 檢舉

是「一次要更新上萬個div」還是「一次要新增上萬個div」？

fillano iT邦超人 1 級 ‧ 2017-11-10 12:19:50 檢舉

如果是一次在某個node底下新增大量的div，用innerHTML應該會比較快的。

Zaku iT邦新手 3 級 ‧ 2017-11-10 13:37:12 檢舉

一次"新增"或"更改"，都可能，最慘就是整個複製下來，常規表示法改完再丟回去，但有點蝦

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-10 13:47:20 檢舉

https://github.com/Akryum/vue-virtual-scroller
https://github.com/rintoj/angular2-virtual-scroll
給你參考看看 virtual-scroller，他的概念是 DOM 永遠只產生畫面上看到的幾個，看不到的資料不會產生 DOM。

fillano iT邦超人 1 級 ‧ 2017-11-10 14:29:49 檢舉

也許可以試試Shadow DOM，看是不是會快一點。不過我想記憶體還是一樣會不斷成長的XD

Rach iT邦新手 4 級 ‧ 2017-11-22 01:46:15 檢舉

大量資料能解決的方式就是分散資料，沒有任何東西可以一次處理一萬多筆的顯示。

Zaku iT邦新手 3 級 ‧ 2017-11-22 17:43:13 檢舉

大大可以舉個例嘛，後台處理一萬筆沒問題喔，是DOM操作無法快速一次更新一萬筆

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

石頭

iT邦高手 1 級 ‧ 2017-11-09 18:31:28

AngularJS或React 可能符合你的需求

剛剛上網google找到 ROITjs
版主可以試試看

回應 7
分享
檢舉

看更多先前的回應...收起先前的回應...

Zaku iT邦新手 3 級 ‧ 2017-11-10 09:41:44 檢舉

我不是很專業的前端，已開發了現在要改套框架上去有點難

Zaku iT邦新手 3 級 ‧ 2017-11-10 11:59:39 檢舉

感恩我晚點來看一下

Zaku iT邦新手 3 級 ‧ 2017-11-10 13:36:08 檢舉

好像沒什麼解，還是建議導入前端框架，成本有點高，對目前來說

石頭 iT邦高手 1 級 ‧ 2017-11-10 13:52:21 檢舉

不過我好奇是怎樣的需求要大量操作頁面上DOM?
因為如果在前端操作是必要看使用者電腦效能

Zaku iT邦新手 3 級 ‧ 2017-11-13 09:33:04 檢舉

介面會不斷接收後台資訊，我只是接別人的要求,要求就是異常都要顯示，異常在極端的狀態下可能會一次出現上萬個，對方表示都要顯示，如果是第一次出現就是全部新增，如果是狀態改變，就是集體更新，對方當然不會管效能，不太可能跟他們解釋那些..，真的解不了再說吧

Zaku iT邦新手 3 級 ‧ 2017-11-13 09:36:03 檢舉

我指的集體更新是說，如果上面已經有兩萬個點，其中一萬個點突然變動，要更新一萬個，不是全部兩萬個點都更新。

Rach iT邦新手 4 級 ‧ 2017-11-22 01:44:48 檢舉

angular或react也沒辦法解決，節點超過三四百就卡頓了

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22127 篇

完賽人數

595 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙