Discussion :

[Doksuri]

Bonjour,

j'en appel aux gouroux du JS...

j'essaye de deleguer (via un webWorker) un calcul D3 (https://d3js.org/ pour ceux qui ne connaissent pas). le calcul en soit se passe bien, le probleme est qu'il me genere un tableau d'objects. ces objets sont des MultiPolygon qui contiennent les coordonnes de millions de points (qui permettent de colorer des zones) voici a quoi ca ressemble :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[
{
  coordinates: [
    [x,y],
    [x,],// etc ... des milliers de fois
  ],
  type: "MultiPolygon",
  value: 0
},
{
  coordinates: [
    [x,y],
    [x,],// etc ... des millions de fois
  ],
  type: "MultiPolygon",
  value: 10
},
etc...
]

=> le renvoyer au main thread prend ~500ms ce qui me genere des warnings d'execution time, et plus genant : ca fait ramer la page

de plus, ayant plusieurs workers en parallele, j'ai l'impression que des que le 1er worker commence a "renvoyer sa donnee au main thread", celui-ci est "bloque le temps de la copie de l'object", ce qui retarde encore plus les suivants

voici mon code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function generateCoor(params) {
    const {datas} = params;
    const contours = d3.contours().size([256, 256]);
    const cntrs = contours.thresholds(20)(datas.data);
    console.log(cntrs);
    postMessage({action:'generateCoor', datas:cntrs});
    // postMessage({action:'generateCoor', datas:cntrs}, [cntrs.buffer]); // idealement, ce que j'essaye de faire
}

je n'arrive pas a le passer dans le param de transfer developer.mozilla.org/en-US/docs/Glossary/Transferable_objects car il faudrait le convertir "object transferable"
et je ne sais pas comment faire ca :/

merci d'avance a ceux qui ont le temps de se pencher sur mon probleme

[NoSmoking]

Bonjour,
as-tu essayé de passer par un Uint8Array ?

Si contours.thresholds(20)(datas.data) te renvoie un array tu peux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const u8 = new Uint8Array(cntrs);

et tu auras accès à u8.buffer.

[Doksuri]

contours.thresholds(20)(datas.data) ne me retourne pas un simple tableau, mais un tableau d'objects...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const u8 = new Uint8Array(cntrs);
console.log('u8', u8);

=> u8 Uint8Array(20)*[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, buffer: ArrayBuffer(20), byteLength: 20, byteOffset: 0, length: 20]


j'ai l'impression que ça m'a écrasé tout le contenu (mais c’à me retourne bien un tableau de 20 entrées.... vides )

[NoSmoking]

j'ai l'impression que ça m'a écrasé tout le contenu

c'est le comportement normal, les données n'étant pas des données binaires l'espace est alloué mais les valeurs sont mises à zéro.
↪ 23.2.5.1 TypedArray ( ...args ).

Ceci étant tu ne va pas trop avoir le choix que d'« encoder » tes données si tu veux utiliser les TypedArray.

Néanmoins il ne faudrait pas que l'« encodage/décodage » des données ne soient trop gourmand par rapport au gain obtenu lors de la transaction postMessage.

J'ai fait quelques essais avec la création 1M (1024 * 1024) objets légers et il ressort que le plus rapide reste le passage direct du jsonObjet. Certes la transaction est longue mais aucun codage/décodage à effectuer.

Une autre méthode a été d'utiliser TextEncoder() qui permet après un encode du JSON.stringify(jsonObjet) d'avoir une vitesse de « transfert » 40^(*) fois plus rapide que le « transfert » direct mais qui est gourmande au « décodage » et qui au final, en cumulant, est plus lent que le « transfert » direct.

J'ai fait également avec une méthode custom de « codage/décodage » et l'on du même ordre qu'avec TextEncoder() en moins bien.

Donc pas de réelle gain à envisager sauf à éventuellement changer ton approche ou structure des données.
Tout ceci est sous réserve qu'il n'existe pas une solution dite « miracle », le passage par des blob ou autres ne me paraissant pas forcément meilleurs !



^(*) c'est un ordre de grandeur et non une valeur absolue

[Doksuri]

merci pour ton retour tres instructif

j'avais effectivement teste un encodage / decodage, mais j'avais tres vite abandonne cette idee, car j'avais constate des lenteurs de fou...

je pense que je vais suivre ton conseil et revoir ma copie...

merci

[NoSmoking]

Dans ton cas il peut exister également la solution d'itérer et de ne pas traiter la totalité dans le « même bloc », cela peut au final devenir transparent à l'utilisation.

Tu pourrais traité chaque polygone comme un objet du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
objet = {
  "type": "MultiPolygon",
  "value": 0,
  "coordinates": new Uint8Array()
}

ainsi tu pourras utiliser coordiantes.buffer pour la transaction, mais bon cela restera un choix de structure de départ.