JavaScript 函数阻止网络套接字并导致同步问题和延迟
JavaScript function blocks web socket & causes sync issue & delay
我有一个网络套接字，每 100 到 200 毫秒从网络套接字服务器接收数据，（我已经尝试过使用共享网络工作者以及 main.js 文件中的所有内容），
当新的 JSON 数据到达时，我的 main.js 运行s filter_json_run_all(json_data) 更新 Tabulator.js & Dygraph.js 带有一些自定义颜色编码的表格和图表，这些颜色编码基于值是增加还是减少
1) 网络套接字 json 数据（每 100 毫秒或更短）-> 2) 运行 函数 filter_json_run_all(json_data)（需要150 到 200 毫秒) -> 3) 永远重复 1 和 2
很快，传入的 json 数据的时间戳与实际时间相比延迟了（json_time 15:30:12 与实际时间：15:31:30），因为 filter_json_run_all 导致操作积压。
所以这会导致不同 PC 上的用户出现 websocket 同步问题，具体取决于他们打开或刷新网站的时间。
这只是由长 filter_json_run_all() 函数引起的，否则如果我只做 console.log(json_data) 它们将完全同步。
如果有人有任何想法如何防止这种由缓慢 运行 引起的传入 JSON websocket 数据的阻塞/积压，我将非常感激宁javascript
函数:)
我尝试使用一个共享的网络工作者，它可以工作，但它没有解决 main.js 中被 filter_json_run_all() 阻止的延迟，我不知道我可以把 filter_json_run_all () 因为所有图形和 table 对象都在 main 中定义，而且当我点击 table 手动更新值时我有回调（双向网络套接字）
如果您有任何想法或提示，我将不胜感激:)
worker.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';
}
}
}
}
潜在的软糖/解决方案，谢谢 Aaron :):
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();
};
}
然后将其定义为网络工作者调用的常量：
const filter_json_run_allLimited = limiter(data => { filter_json_run_all(data); }, 300); // 300ms for examples
Web worker 在新的 web socket 数据到达时调用有限的函数：
// 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);
});
如果有人知道像 tradingview 或实时高性能数据流网站这样的网站如何允许低延迟可视化更新，请发表评论，在下面回复:)
在不知道 color_table 中发生了什么的情况下，我不敢尝试真实地回答这个问题。根据您描述的行为，我的 预感 是 filter_json_run_all 被迫等待拥塞的 DOM manipulation/render 管道，因为 HTML 正在更新，以便为您更新的 table 元素实现 color-coding。
我看到您已经采取了一些措施来防止其中一些 DOM 操作阻止此函数的执行（通过 setTimeout）。如果 color_table 还没有采用类似的策略，那将是我首先关注的是重构以疏通这里的问题。
可能还值得将这些 DOM 已处理事件的更新放入一个简单的队列中，这样如果缓慢的浏览器行为造成渲染积压，该函数实际上负责调用未决的 DOM 操作可以选择跳过过时的渲染操作以保持 UI 可接受的活泼。
编辑：基本排队系统可能涉及以下组件：
- 队列本身（这可以是一个简单的数组，只需要下面的两个组件都可以访问它）。
- 一个队列追加器，在
filter_json_run_all 期间运行，只需将对象添加到队列的末尾，代表您计划使用 color_table 或您的其中一个完成的每个 DOM 操作作业setTimeout` 回调。这些对象应该包含要执行的操作（即：函数定义，未调用），以及该操作的参数（即：您传递给每个函数的参数）。
- 一个队列运行器，它按自己的时间间隔运行，并从队列的前面调用挂起的 DOM 操作任务，并在运行时将其删除。由于此操作可以访问队列中的所有对象，因此它还可以采取步骤 optimize/combine 类似操作，以最大限度地减少它要求浏览器在执行后续代码之前执行的重绘量。例如，如果您有多个
color_table 操作多次为同一个单元格着色，则只需使用队列中涉及该单元格的最后一个 color_table 项的数据执行此操作一次。此外，您可以通过在 requestAnimationFrame 回调中调用聚合的 DOM 操作本身来进一步优化与 DOM 的交互，这将确保计划的 reflows/repaints 仅发生当浏览器准备就绪时，并且从性能角度来看比通过 setTimeout/setInterval. 进行 DOM 操作排队更可取
我有一个网络套接字，每 100 到 200 毫秒从网络套接字服务器接收数据，（我已经尝试过使用共享网络工作者以及 main.js 文件中的所有内容），
当新的 JSON 数据到达时，我的 main.js 运行s filter_json_run_all(json_data) 更新 Tabulator.js & Dygraph.js 带有一些自定义颜色编码的表格和图表，这些颜色编码基于值是增加还是减少
1) 网络套接字 json 数据（每 100 毫秒或更短）-> 2) 运行 函数 filter_json_run_all(json_data)（需要150 到 200 毫秒) -> 3) 永远重复 1 和 2
很快，传入的 json 数据的时间戳与实际时间相比延迟了（json_time 15:30:12 与实际时间：15:31:30），因为 filter_json_run_all 导致操作积压。
所以这会导致不同 PC 上的用户出现 websocket 同步问题，具体取决于他们打开或刷新网站的时间。
这只是由长 filter_json_run_all() 函数引起的，否则如果我只做 console.log(json_data) 它们将完全同步。
如果有人有任何想法如何防止这种由缓慢 运行 引起的传入 JSON websocket 数据的阻塞/积压，我将非常感激宁javascript 函数:)
我尝试使用一个共享的网络工作者，它可以工作，但它没有解决 main.js 中被 filter_json_run_all() 阻止的延迟，我不知道我可以把 filter_json_run_all () 因为所有图形和 table 对象都在 main 中定义，而且当我点击 table 手动更新值时我有回调（双向网络套接字）
如果您有任何想法或提示，我将不胜感激:)
worker.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';
}
}
}
}
潜在的软糖/解决方案，谢谢 Aaron :):
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();
};
}
然后将其定义为网络工作者调用的常量：
const filter_json_run_allLimited = limiter(data => { filter_json_run_all(data); }, 300); // 300ms for examples
Web worker 在新的 web socket 数据到达时调用有限的函数：
// 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);
});
如果有人知道像 tradingview 或实时高性能数据流网站这样的网站如何允许低延迟可视化更新，请发表评论，在下面回复:)
在不知道 color_table 中发生了什么的情况下，我不敢尝试真实地回答这个问题。根据您描述的行为，我的 预感 是 filter_json_run_all 被迫等待拥塞的 DOM manipulation/render 管道，因为 HTML 正在更新，以便为您更新的 table 元素实现 color-coding。
我看到您已经采取了一些措施来防止其中一些 DOM 操作阻止此函数的执行（通过 setTimeout）。如果 color_table 还没有采用类似的策略，那将是我首先关注的是重构以疏通这里的问题。
可能还值得将这些 DOM 已处理事件的更新放入一个简单的队列中，这样如果缓慢的浏览器行为造成渲染积压，该函数实际上负责调用未决的 DOM 操作可以选择跳过过时的渲染操作以保持 UI 可接受的活泼。
编辑：基本排队系统可能涉及以下组件：
- 队列本身（这可以是一个简单的数组，只需要下面的两个组件都可以访问它）。
- 一个队列追加器，在
filter_json_run_all期间运行，只需将对象添加到队列的末尾，代表您计划使用color_table或您的其中一个完成的每个 DOM 操作作业setTimeout` 回调。这些对象应该包含要执行的操作（即：函数定义，未调用），以及该操作的参数（即：您传递给每个函数的参数）。 - 一个队列运行器，它按自己的时间间隔运行，并从队列的前面调用挂起的 DOM 操作任务，并在运行时将其删除。由于此操作可以访问队列中的所有对象，因此它还可以采取步骤 optimize/combine 类似操作，以最大限度地减少它要求浏览器在执行后续代码之前执行的重绘量。例如，如果您有多个
color_table操作多次为同一个单元格着色，则只需使用队列中涉及该单元格的最后一个color_table项的数据执行此操作一次。此外，您可以通过在 requestAnimationFrame 回调中调用聚合的 DOM 操作本身来进一步优化与 DOM 的交互，这将确保计划的 reflows/repaints 仅发生当浏览器准备就绪时，并且从性能角度来看比通过setTimeout/setInterval. 进行 DOM 操作排队更可取