array: for() vs map()

Version imprimable

01/06/2016, 11h07
krunch

array: for() vs map()

Bonjour

Depuis peu j'utilise array.map() � la place des boucles for() malgr� un avis assez r�pandu selon lequel cette m�thode serait plus lente et donc pas adapt�e au 'hot code'.
Or cet article r�cent par exemple taille un short � la boucle for...

Alors voil�, question simple et directe : selon vous peut-on oublier d�finitivement les for() si par exemple on ne cible que les navigateurs r�cents ?
01/06/2016, 12h36
SpaceFrog

while power !
https://fiddle.jshell.net/bseaqa2c/1
01/06/2016, 13h34
krunch
Je connaissais pas le while power, effectivement c'est fut�, et le + rapide !
Code:

1 2 while(i-->0){ }
Sinon for() est x2 + rapide (avec FF) que map().

Mais il y a 2 autres arguments dans l'article : le scope ind�pendant (qui �vite de s'emmeler les 'i' et autres variables) et l'aspect m�moire :

Citation:

It also points out something that you would not notice if merely viewing a for() vs .forEach() test like this. for() uses more memory than .forEach()!

Alors question tr�s g�n�rale : en quoi est ce que l'utilisation de la m�moire est importante face � la vitesse ??
Est ce que ce choix l� peut vraiment influer sur la performance globale, sachant qu'il peut s'int�grer dans du 'hot code' justement et dans des processus qui bouffent d�j� pas mal de m�moire... (du three.js en l'occurrence) ?
02/06/2016, 10h06
thejocker9

Question �pineuse aux multiples r�ponses.
C'est pas une question d'utilisation face � la vitesse, les 2 sont intimement li�.
Faut rester raisonnable, un pc a 8Go de ram, bon tu a de la marge :), maintenant un vieux tel a 512Mo :aie:, c'est la criticit� de d�part qui influence tes choix (qu'est se que je veut, sous quelle platforme ...).
Exemple tu a besoin d'un tableau de 200Mo, plutot que de l'envoyer � une fonction (qui va cr�e une copie, tu te retrouve avec 400Mo :?), exteriorise ta variable pour que les 2 fonctions y ai acc�s.
D'ailleurs, a tu r�element besoin de ses 200Mo ? , d�s le d�part ?

"Est ce que ce choix l� peut vraiment influer sur la performance globale"
Oui et non, si tu a une empreinte m�moire de 1Mo sur un pc actuel, tu comprend bien que non, maintenant 250Mo sur une tel de 512Mo, bon la ya un �norme probl�me :)

Vitesse et m�moire sont deux choses bien distinct mais qui fonctionne ensemble, l'un impact l'autre et vice versa.
Je pense que c'est surtout une question d'algorithmie, chose que la majorit� des devs oublie aujourd'hui malheureusement.

Ok merci !

Tout d'abord une pr�cision de d�part : il ne s'agit pas d'it�rer 3 <li> dans un <ul> mais par exemple d'it�rer une g�om�trie compl�te dans une boucle de requestAnimationFrame() ... Donc le genre de truc o� la performance compte vraiment.

Citation:

si tu a une empreinte m�moire de 1Mo sur un pc actuel, tu comprend bien que non, maintenant 250Mo sur une tel de 512Mo, bon la ya un �norme probl�me

> Mais est ce qu'on peut dire que l'utilisation de la m�moire n'influe sur la vitesse que si elle vient � manquer, et que sinon �a ne pose pas trop de probl�me ?

Citation:

Exemple tu a besoin d'un tableau de 200Mo, plutot que de l'envoyer � une fonction (qui va cr�e une copie, tu te retrouve avec 400Mo ), exteriorise ta variable pour que les 2 fonctions y ai acc�s.
D'ailleurs, a tu r�element besoin de ses 200Mo ? , d�s le d�part ?

> �a c'est justement un truc que je suis pas sur d'avoir bien saisi dans le fonctionnement g�n�ral du js : le fait qu'une fonction "cr�e une copie"... Alors mettons que oui, j'ai besoin de traiter 200Mo dans ce genre de contexte...

A ce moment l� si je fais le code suivant je "d�plie" 2 fois les 200Mo dans la m�moire c'est ce que �a veut dire ? C'est la raison pour laquelle il faut �viter les r�cursives ?
Code:

1 2 3 4 5 6 7 8 var pomper = function( tableau_de_200Mo ){ var repomper = function( tableau_de_200Mo ){ var truc = .... return truc; } return repomper( tableau_de_200Mo ); } xx = pomper( tableau_de_200Mo );
Et que veut dire "ext�rioriser" la variable dans ce cas ?

"Mais est ce qu'on peut dire que l'utilisation de la m�moire n'influe sur la vitesse que si elle vient � manquer, et que sinon �a ne pose pas trop de probl�me ?"

C'est bien plus complexe que sa, dans l'absolue, quand tu cr�e un tableau de 200Mo, c'est pour t'en servir, tu va surement boucl� dessus, faire des recherche dessus,
et la le proc y tourne.
Une appli, au dela du programme a elle aussi besoin de m�moire, si tu a une appli qui consome 500Mo et qui tu a 512Mo de ram(on fait abstraction de l'os et autre appli),
tu comprend qu'il ne te reste que 12Mo de m�moire utile.

"�a c'est justement un truc que je suis pas sur d'avoir bien saisi dans le fonctionnement g�n�ral du js : le fait qu'une fonction "cr�e une copie" "
Se n'est pas li� au js mais c'est un probl�me g�n�rale.
Code:

1 2 3 4 5 var tableau_de_200Mo = [...]; var pomper=function(tableau_de_200Mo){ // ici en gros l'argument tableau_de_200Mo est une copie (en vrai c'est beaucoup plus complexe que sa) } pomper(tableau_de_200Mo);
Code:

1 2 3 4 5 var tableau_de_200Mo = [...]; var pomper=function(){ // ici tu travail sur le tableau puisqu'il est global, il ni a pas de coipe } pomper();
En passant un argument, il cr�e une copie de l'argument

En php, peut etre a d�ja tu vu sa

Code:

function pomper(&variable)

ici on passe notre variable en r�ference, c'est a dire qu'on lui fournit l'adresse du tableau, il ne cr�e donc pas de copie puisque il sait ou est le tableau originale

C'est un sujet complexe, sa d�pend d'�norm�ment de choses, ne serait ce du navigateur (moteur)

02/06/2016, 19h35
krunch

Ok, donc il faut minimiser les (gros) arguments de fonction et privil�gier les globales dans un scope ...

Ce qui m'�tonne un peu c'est qu'un tableau ou un objet en argument de fonction reste en r�f�rence non ?

Je laisse ouvert pour le cas o� des passants ont des remarques l� dessus ...

Citation:

Envoy� par thejocker9

Exemple tu a besoin d'un tableau de 200Mo, plutot que de l'envoyer � une fonction (qui va cr�e une copie, tu te retrouve avec 400Mo :?), exteriorise ta variable pour que les 2 fonctions y ai acc�s.

Citation:

Envoy� par thejocker9

"�a c'est justement un truc que je suis pas sur d'avoir bien saisi dans le fonctionnement g�n�ral du js : le fait qu'une fonction "cr�e une copie" "
Se n'est pas li� au js mais c'est un probl�me g�n�rale.

Salut,

Cela m'�tonne il me semble que les objets comme les tableaux sont transmis par r�f�rence et non par valeur, il n�y aurait donc pas de copie de faite par la fonction lors de la transmission des arguments...

C'est � confirmer pour JS mais je pense que pour JS c'est comme pour Java... Le contraire m'�tonnerait, ce serait vraiment pas terrible je trouve...

A approfondir...

EDIT : J'ai test� ceci :
Code:

1 2 3 4 5 6 7 8 9 function func(tab){ console.log(tab); // affiche ["un", "deux", "trois"] tab[1] = "2"; } var unTableau = ["un","deux", "trois"]; func(unTableau); console.log(unTableau); // affiche ["un", "2", "trois"]
On voit bien que l�instruction tab[1] = "2"; affecte le tableau "unTableau" ce qui prouve que le tableau "tab" n'est pas une copie du tableau "unTableau" mais la variable tab pointe sur le tableau "unTableau"...

Bonjour,
un petit exercice toujours int�ressant � faire

Code:

1
2
3
4
5
6
7
8
9
10
11
var tab = [ 1, 2, 3, 4, 5];
var tab_2;
function modifTab(t) {
    t[2] = 'deux';
    return t;
}
console.log('tab 1: ', tab);
console.log(tab_2 = modifTab(tab));
console.log('tab 2: ', tab);
tab_2[3] = 'trois';
console.log('tab 3: ', tab);

02/06/2016, 21h33
Beginner.

Merci, je vais regarder...

Juste avant j'ai aussi �dit� mon message pour y post� un exemple...
02/06/2016, 22h10
SylvainPV
https://www.youtube.com/watch?v=bCqtb-Z5YGQ

#Array.map est une des fonctions de base dans l'�criture de JS dans un style fonctionnel.

J'en suis tr�s friand, surtout avec ES6. Par exemple, si on a une liste d'utilisateurs et qu'on veut obtenir la liste des noms de tous les majeurs par ordre du plus jeune au plus vieux, on peut �crire �a:
Code:

1 2 3 4 5 6 users .filter(user => user.age >= 18) .sort((alice, bob) => alice.age - bob.age) .map(user => user.name) .map(name => name.toUppercase())
Chaque op�ration est appliqu�e l'une apr�s l'autre, sans besoin de d�clarer de nouvelles variables ou scopes. Je trouve �a tr�s �l�gant et tr�s pratique � l'usage. La question des performances est secondaire selon moi, ce sont des micro optimisations insignifiantes.
03/06/2016, 11h08
thejocker9

Apr�s diverses �ssais, il semblerai que les objets simples comme String, Boolean, Number (les types natif) soit pass�s par valeur, par contre les tableau, c'est pass� par r�ference.

Citation:

C'est � confirmer pour JS mais je pense que pour JS c'est comme pour Java... Le contraire m'�tonnerait, ce serait vraiment pas terrible je trouve...

Tu avait donc raison Beginner.; ah trop de c pas assez de java :D.

D�sol� donc pour cette fausse information :oops:, d�cidement le js est a part, au moins j'aurait apprit quelque chose meme si je ne l'�xploiterais pas :zoubi:
03/06/2016, 14h07
krunch

Citation:

Chaque op�ration est appliqu�e l'une apr�s l'autre, sans besoin de d�clarer de nouvelles variables ou scopes. Je trouve �a tr�s �l�gant et tr�s pratique � l'usage. La question des performances est secondaire selon moi, ce sont des micro optimisations insignifiantes.

C'est clair que pour la lisibilit� et la maintenance c'est ce qu'il y a de mieux.

Mais il y a des cas o� la performance compte ... Et dans ton exemple :
- le tableau est it�r� 4 fois
- d'apr�s le fiddle de SpaceFrog array.map() est jusqu'� 20 fois plus lente dans Chrome ...

Dans la majorit� des cas je suis d'accord que �a ne g�ne pas, mais dans l'exemple que je donnais (gros tableau it�r� par un code ex�cut� � haute fr�quence) �a g�ne bp plus...