我有一個網路套接字，它每 100 到 200 毫秒從網路套接字服務器接收資料，（我已經嘗試了共享網路作業者以及 main.js 檔案中的所有內容），
當新的 JSON 資料到達時，我的 main.js 運行 filter_json_run_all(json_data) 更新 Tabulator.js 和 Dygraph.js 表格和圖表，根據值是增加還是減少，使用一些自定義顏色編碼
1) web socket json 資料（每 100 毫秒或更短時間）-> 2) 運行函式 filter_json_run_all(json_data)（需要 150 到 200 毫秒）-> 3) 永遠重復 1 和 2
由于 filter_json_run_all 導致操作積壓，因此傳入 json 資料的時間戳很快就會相對于實際時間延遲（json_time 15:30:12 與實際時間：15:31:30）。
因此，根據他們打開或重繪 網站的時間，它會導致不同 PC 上的用戶出現 websocket 同步問題。
這僅是由長 filter_json_run_all() 函式引起的，否則如果我所做的只是 console.log(json_data) 它們將完全同步。
如果有人知道如何防止由于運行緩慢的javascript函式引起的傳入JSON websocket資料的這種阻塞/積壓，我將非常感激:)
我嘗試使用一個可以作業的共享網路作業者，但它沒有解決由 filter_json_run_all() 阻止的 main.js 中的延遲，我不認為我可以放置 filter_json_run_all()，因為所有圖形和表物件都在 main & 中定義當我單擊表以手動更新值時，我有回呼（雙向網路套接字）
如果您有任何想法或提示，我將非常感激:)
工人.js：
const connectedPorts = [];
// Create socket instance.
var socket = new WebSocket(
'ws://'
'ip:port'
'/ws/'
);
// Send initial package on open.
socket.addEventListener('open', () => {
const package = JSON.stringify({
"time": 123456,
"channel": "futures.tickers",
"event": "subscribe",
"payload": ["BTC_USD", "ETH_USD"]
});
socket.send(package);
});
// Send data from socket to all open tabs.
socket.addEventListener('message', ({ data }) => {
const package = JSON.parse(data);
connectedPorts.forEach(port => port.postMessage(package));
});
/**
* When a new thread is connected to the shared worker,
* start listening for messages from the new thread.
*/
self.addEventListener('connect', ({ ports }) => {
const port = ports[0];
// Add this new port to the list of connected ports.
connectedPorts.push(port);
/**
* Receive data from main thread and determine which
* actions it should take based on the received data.
*/
port.addEventListener('message', ({ data }) => {
const { action, value } = data;
// Send message to socket.
if (action === 'send') {
socket.send(JSON.stringify(value));
// Remove port from connected ports list.
} else if (action === 'unload') {
const index = connectedPorts.indexOf(port);
connectedPorts.splice(index, 1);
}
});
Main.js這只是 filter_json_run_all 的一部分，它會持續大約 6 或 7 個 Tabulator 和 Dygraph 物件。我想介紹一些用 SetTimeout() 等呼叫的操作
function filter_json_run_all(json_str){
const startTime = performance.now();
const data_in_array = json_str //JSON.parse(json_str.data);
// if ('DATETIME' in data_in_array){
// var milliseconds = (new Date()).getTime() - Date.parse(data_in_array['DATETIME']);
// console.log("milliseconds: " milliseconds);
// }
if (summary in data_in_array){
if("DATETIME" in data_in_array){
var time_str = data_in_array["DATETIME"];
element_time.innerHTML = time_str;
}
// summary Data
const summary_array = data_in_array[summary];
var old_sum_arr_krw = [];
var old_sum_arr_irn = [];
var old_sum_arr_ntn = [];
var old_sum_arr_ccn = [];
var old_sum_arr_ihn = [];
var old_sum_arr_ppn = [];
var filtered_array_krw_summary = filterByProperty_summary(summary_array, "KWN")
old_sum_arr_krw.unshift(Table_summary_krw.getData());
Table_summary_krw.replaceData(filtered_array_krw_summary);
//Colour table
color_table(filtered_array_krw_summary, old_sum_arr_krw, Table_summary_krw);
var filtered_array_irn_summary = filterByProperty_summary(summary_array, "IRN")
old_sum_arr_irn.unshift(Table_summary_inr.getData());
Table_summary_inr.replaceData(filtered_array_irn_summary);
//Colour table
color_table(filtered_array_irn_summary, old_sum_arr_irn, Table_summary_inr);
var filtered_array_ntn_summary = filterByProperty_summary(summary_array, "NTN")
old_sum_arr_ntn.unshift(Table_summary_twd.getData());
Table_summary_twd.replaceData(filtered_array_ntn_summary);
//Colour table
color_table(filtered_array_ntn_summary, old_sum_arr_ntn, Table_summary_twd);
// remove formatting on fwds curves
setTimeout(() => {g_fwd_curve_krw.updateOptions({
'file': dataFwdKRW,
'labels': ['Time', 'Bid', 'Ask'],
strokeWidth: 1,
}); }, 200);
setTimeout(() => {g_fwd_curve_inr.updateOptions({
'file': dataFwdINR,
'labels': ['Time', 'Bid', 'Ask'],
strokeWidth: 1,
}); }, 200);
// remove_colors //([askTable_krw, askTable_inr, askTable_twd, askTable_cny, askTable_idr, askTable_php])
setTimeout(() => { askTable_krw.getRows().forEach(function (item, index) {
row = item.getCells();
row.forEach(function (value_tmp){value_tmp.getElement().style.backgroundColor = '';}
)}); }, 200);
setTimeout(() => { askTable_inr.getRows().forEach(function (item, index) {
row = item.getCells();
row.forEach(function (value_tmp){value_tmp.getElement().style.backgroundColor = '';}
)}); }, 200);
color_table 函式
function color_table(new_arr, old_array, table_obj){
// If length is not equal
if(new_arr.length!=old_array[0].length)
console.log("Diff length");
else
{
// Comparing each element of array
for(var i=0;i<new_arr.length;i )
//iterate old dict dict
for (const [key, value] of Object.entries(old_array[0][i])) {
if(value == new_arr[i][key])
{}
else{
// console.log("Different element");
if(key!="TENOR")
// console.log(table_obj)
table_obj.getRows()[i].getCell(key).getElement().style.backgroundColor = 'yellow';
if(key!="TIME")
if(value < new_arr[i][key])
//green going up
//text_to_speech(new_arr[i]['CCY'] ' ' new_arr[i]['TENOR'] ' getting bid')
table_obj.getRows()[i].getCell(key).getElement().style.backgroundColor = 'Chartreuse';
if(key!="TIME")
if(value > new_arr[i][key])
//red going down
table_obj.getRows()[i].getCell(key).getElement().style.backgroundColor = 'Crimson';
}
}
}
}
潛在的軟糖/解決方案，謝謝亞倫:)：
function limiter(fn, wait){
let isCalled = false,
calls = [];
let caller = function(){
if (calls.length && !isCalled){
isCalled = true;
if (calls.length >2){
calls.splice(0,calls.length-1)
//remove zero' upto n-1 function calls from array/ queue
}
calls.shift().call();
setTimeout(function(){
isCalled = false;
caller();
}, wait);
}
};
return function(){
calls.push(fn.bind(this, ...arguments));
// let args = Array.prototype.slice.call(arguments);
// calls.push(fn.bind.apply(fn, [this].concat(args)));
caller();
};
}
然后將其定義為 Web Worker 呼叫的常量：
const filter_json_run_allLimited = limiter(data => { filter_json_run_all(data); }, 300); // 300ms for examples
Web Worker 在新的 Web 套接字資料到達時呼叫受限函式：
// Event to listen for incoming data from the worker and update the DOM.
webSocketWorker.port.addEventListener('message', ({ data }) => {
// Limited function
filter_json_run_allLimited(data);
});
請如果有人知道tradeview或實時高性能資料流網站等網站如何允許低延遲可視化更新，請您發表評論，在下面回復:)
uj5u.com熱心網友回復：
在不知道發生了什么的情況下，我不愿嘗試真實地回答這個問題color_table。根據您所描述的行為，我的預感filter_json_run_all是，當 HTML 正在更新以實作更新后的表格元素的顏色編碼時，它被迫等待擁擠的 DOM 操作/渲染管道。
我看到您已經采取了一些措施來防止其中一些 DOM 操作阻止此函式的執行（通過setTimeout）。如果color_table還沒有采用類似的策略，那將是我首先專注于重構以疏通這里的事情。
將這些已處理事件的 DOM 更新放入一個簡單的佇列中可能也是值得的，這樣如果緩慢的瀏覽器行為造成渲染積壓，則實際負責呼叫掛起的 DOM 操作的函式可以選擇跳過過時的渲染操作以保持 UI 可接受的活潑.
編輯：一個基本的排隊系統可能涉及以下組件：
- 佇列本身（這可以是一個簡單的陣列，只需要下面的兩個組件都可以訪問它）。
- 一個佇列追加器，它在 期間運行
filter_json_run_all，只是將物件添加到佇列的末尾，表示您計劃使用color_table或您的 setTimeout 回呼之一完成的每個 DOM 操作作業。這些物件應該包含要執行的操作（即：函式定義，未呼叫）和該操作的引數（即：您傳遞給每個函式的引數）。 - 一個佇列運行器，它以自己的時間間隔運行，并從佇列的前面呼叫掛起的 DOM 操作任務，并在執行程序中將其洗掉。由于此操作可以訪問佇列中的所有物件，因此它還可以采取措施優化/組合類似的操作，以盡量減少在執行后續代碼之前要求瀏覽器執行的重繪量。例如，如果您有多個
color_table操作多次為同一個單元格著色，您只需使用color_table佇列中涉及該單元格的最后一項的資料執行一次此操作。此外，您可以通過在requestAnimationFrame中呼叫聚合的 DOM 操作操作本身來進一步優化與 DOM 的互動回呼，這將確保計劃的重排/重繪僅在瀏覽器準備好時發生，并且從性能角度來看比通過setTimeout/進行 DOM 操作排隊更可取setInterval。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/432444.html
標籤：javascript 多线程 异步 网络套接字
上一篇：異步函式的回傳型別