0
Performances client
Performances client ?
Malgré l’augmentation des débits,          le web est lent      Site web      Temps de chargement         TF1             ...
Depuis 5 ans…
Depuis 5 ans…• Poids des pages x3
Depuis 5 ans…• Poids des pages x3• Nombre de composants x2
Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2
Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2   En moyenne, plus de 300 ko par pag...
Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2   En moyenne, plus de 300 ko par pag...
Est-ce utile ?
Est-ce utile ?•   500ms = -20% de traffic pour Google
Est-ce utile ?•   500ms = -20% de traffic pour Google•   100ms = -1% de ventes pour Amazon
Est-ce utile ?•   500ms = -20% de traffic pour Google•   100ms = -1% de ventes pour Amazon•   -30% du poids = +25% d’utilis...
Est-ce utile ?•   500ms = -20% de traffic pour Google•   100ms = -1% de ventes pour Amazon•   -30% du poids = +25% d’utilis...
Pourquoi le client ?
Pourquoi le client ?
Pourquoi le client ?
Pourquoi le client ?
Pourquoi le client ?  80 à 90% du chargement géré par le client      10 à 20% pour l’applicatif serveur
Un peu de réseau
Le mythe de l’ADSL  Offres 8, 20, 28 Mbits
Le mythe de l’ADSL  Offres 8, 20, 28 Mbits (ATM)
Le mythe de l’ADSL  Offres 8, 20, 28 Mbits (ATM)         Pour 8 Mbits :
Le mythe de l’ADSL  Offres 8, 20, 28 Mbits (ATM)        Pour 8 Mbits :  -20% à -25% : 6 Mbits en IP
Le mythe de l’ADSL  Offres 8, 20, 28 Mbits (ATM)         Pour 8 Mbits :   -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbit...
Le mythe de l’ADSL          Offres 8, 20, 28 Mbits (ATM)                  Pour 8 Mbits :            -20% à -25% : 6 Mbits ...
Le mythe de l’ADSL          Offres 8, 20, 28 Mbits (ATM)                  Pour 8 Mbits :            -20% à -25% : 6 Mbits ...
Le mythe de l’ADSL          Offres 8, 20, 28 Mbits (ATM)                  Pour 8 Mbits :            -20% à -25% : 6 Mbits ...
Le mythe de l’ADSL          Offres 8, 20, 28 Mbits (ATM)                  Pour 8 Mbits :            -20% à -25% : 6 Mbits ...
Chargement d’une ressource
Chargement d’une ressourceNavigateur
Chargement d’une ressource                                    TempsNavigateur
Chargement d’une ressourceServeur DNS                                     Temps Navigateur
Chargement d’une ressourceServeur DNS                                     Temps Navigateur
Chargement d’une ressourceServeur DNS                                       Temps    DNS Navigateur
Chargement d’une ressource              ServeurServeur DNS                                       Temps    DNS Navigateur
Chargement d’une ressource              ServeurServeur DNS                                       Temps    DNS Navigateur
Chargement d’une ressource              ServeurServeur DNS                                       Temps    DNS        TCP N...
Chargement d’une ressource              ServeurServeur DNS              P                                       Temps     ...
Chargement d’une ressource              ServeurServeur DNS              P                                             Temp...
Chargement d’une ressource              ServeurServeur DNS              P                                             Temp...
Chargement d’une ressource              ServeurServeur DNS              P                                                 ...
Évaluer les performances
Outils• YSlow + Firebug• WebPageTest
Agir
Chargement d’une page
Chargement d’une page• HTML
Chargement d’une page• HTML •   Images
Chargement d’une page• HTML •   Images •   CSS
Chargement d’une page• HTML •   Images •   CSS •   Images CSS
Chargement d’une page• HTML •   Images •   CSS •   Images CSS •   Javascript
Chargement d’une page• HTML •   Images •   CSS •   Images CSS •   Javascript     •  Exécution
Chargement d’une page• HTML •   Images •   CSS •   Images CSS •   Javascript     •  Exécution• Rendu
Objectifs
Objectifs• Moins de requête HTTP
Objectifs• Moins de requête HTTP• Ressources moins lourdes
Objectifs• Moins de requête HTTP• Ressources moins lourdes• Améliorer le temps de traitement
static.example.org
static.example.org• Domaine ou sous-domaine dédié aux  ressources statiques
static.example.org• Domaine ou sous-domaine dédié aux  ressources statiques• Paralléliser les téléchargements
static.example.org• Domaine ou sous-domaine dédié aux  ressources statiques• Paralléliser les téléchargements• Désactiver ...
static.example.org• Domaine ou sous-domaine dédié aux  ressources statiques• Paralléliser les téléchargements• Désactiver ...
Toutes ressources
Toutes ressources• Expiration     <IfModule mod_expires.c>       ExpiresActive On       ExpiresDefault "access plus 1 mont...
Toutes ressources• Expiration     <IfModule mod_expires.c>         ExpiresActive On         ExpiresDefault "access plus 1 ...
Ressources texte
Ressources texte• GZip<IfModule mod_deflate.c>  AddOutputFilterByType DEFLATE text/css</IfModule>
HTML
HTML• Cache serveur
HTML• Cache serveur• Réduisez le nombre d’éléments
HTML• Cache serveur• Réduisez le nombre d’éléments     document.getElementsByTagName(*).length
CSS & Javascript
CSS & Javascript  • CSS : au début
CSS & Javascript  • CSS : au début  • Javascript : à la fin
CSS & Javascript  • CSS : au début  • Javascript : à la fin
CSS & Javascript  • CSS : au début  • Javascript : à la fin  1. Externalisez
CSS & Javascript  • CSS : au début  • Javascript : à la fin  1. Externalisez  2. Combinez
CSS & Javascript  • CSS : au début  • Javascript : à la fin  1. Externalisez  2. Combinez  3. Minimifiez
« Minimification »
« Minimification »43471 octets   9431 octets
« Minimification »43471 octets            9431 octets               ~ -78%
GZip43471 octets          12920 octets
GZip43471 octets            12920 octets               ~ -70%
« Minimification » + GZip43471 octets    3867 octets
« Minimification » + GZip43471 octets            3867 octets               ~ -91%
Javascript
Javascript• N’utilisez pas de packer
Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués
Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements
Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax ...
Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax ...
Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax ...
Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax ...
Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax ...
Javascript eval() is evil
Javascript eval() is evil NON
Javascript             new is evilnew   Boolean(); // Argl…new   Number(); // Stop…new   String(); // Je souffrenew   Obje...
JavascriptOptimisez vos boucles
Javascript        Optimisez vos bouclesvar users = []; // 1000+ itemsfor (var i = 0; i < users.length; i++) { … }
Javascript            Optimisez vos boucles   var users = []; // 1000+ items   for (var i = 0; i < users.length; i++) { … ...
JavascriptAttention aux fonctions anonymes
Javascript   Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { retur...
Javascript   Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { retur...
Javascript   Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { retur...
JavascriptPré-compiler les RegExp
Javascript               Pré-compiler les RegExpfor (var index = 0, l = links.length; index < l; index++) {  if (links[ind...
Javascript               Pré-compiler les RegExpvar rDomain = /www.mydomain.tld/i;for (var index = 0, l = links.length; in...
Javascript               Pré-compiler les RegExpvar rDomain = /www.mydomain.tld/i;for (var index = 0, l = links.length; in...
Javascriptlength est aussi un setter
Javascript                      length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julie...
Javascript                      length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julie...
Javascript                      length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julie...
Javascriptobj.x === obj["x"]
Javascriptobj.x === obj["x"]var angle = 60, result;if (useSin) {  result = Math.sin(angle);} else {  result = Math.cos(ang...
Javascriptobj.x === obj["x"]var angle = 60;if (useSin) {  return Math.sin(angle);} else {  return Math.cos(angle);}
Javascript            obj.x === obj["x"]var angle = 60;return (useSin) ? Math.sin(angle) : Math.cos(angle);
Javascript      obj.x === obj["x"]return Math[useSin ? "sin" : "cos"](60);
JavascriptMicro-optimisations
JavascriptMicro-optimisations  var a = 1;  var b = 2;  var a = 1, b = 2;
Javascript         Micro-optimisations            var a = 1;            var b = 2;            var a = 1, b = 2;times = tim...
JavascriptMicro-optimisations
JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}
JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {}
JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date(...
JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date(...
JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date(...
JavascriptMicro-optimisations
JavascriptMicro-optimisations    delete obj.x
Javascript       Micro-optimisations            delete obj.xobjet.tres.interessant.mais.bien.cache
Javascript           Utilisez DocumentFragmentvar fragment = document.createDocumentFragment();var div = document.createEl...
JavascriptMinimisez les accès au DOM   $(#box a).click(…);   $(#box a).addClass(…);   $(#box a).attr(…);   var box = $(#bo...
CSS
CSS• Évitez   filter
CSS• Évitez   filter• Évitez   @import
CSS• Évitez   filter• Évitez   @import• Évitez   expression
CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows
CSS• Évitezfilter• Évitez@import• Évitezexpression• Évitez les reflows• Optimisez les sélecteurs
CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows• Optimisez les sélecteurs    #box .footer ul li a...
CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows• Optimisez les sélecteurs    #box .footer ul li a...
Images• Pas de GIF• Optimisez les images• Supprimez les metas (smush.it, pngcrush, jpegtrans)
Images• Pas de GIF• Optimisez les images        +         =     PNG24 (3932 octets)• Supprimez les metas (smush.it, pngcru...
Images• Pas de GIF• Optimisez les images        +         =               +          =     PNG24 (3932 octets)   PNG8 64 c...
Images• Pas de GIF• Optimisez les images        +         =               +          =                    +          =    ...
Images• Pas de GIF• Optimisez les images        +         =                            +          =                    +  ...
Images• Pas de GIF• Optimisez les images        +         =                            +          =                       ...
Images• Pas de GIF• Optimisez les images        +         =                            +          =                       ...
Images
Images• Spécifiez les dimensions
Images• Spécifiez les dimensions• Ne les redimensionnez pas
Images• Spécifiez les dimensions• Ne les redimensionnez pas• Utilisez les sprites
Favicon
Favicon• Pensez-y, évite une 404
Favicon• Pensez-y, évite une 404• Image/icone optimisée
En général
En général✓ Faites le moins de requête DNS
En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP
En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP✓ Évitez les redirections
En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP✓ Évitez les redirections✓ Évitez les 404
Ressources (outils)•   Firebug http://getfirebug.com•   YSlow http://developer.yahoo.com/yslow/•   WebPagetest http://www.w...
Ressources• Comprendre le cache  http://www.mnot.net/cache_docs/index.fr.html• Performance Playground http://jsperf.com• É...
Contact Nicolas Le Gallme@neovov.com
Upcoming SlideShare
Loading in...5
×

Performances

1,166

Published on

Cours sur les performances côté client.

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,166
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

















































  • Transcript of "Performances"

    1. 1. Performances client
    2. 2. Performances client ?
    3. 3. Malgré l’augmentation des débits, le web est lent Site web Temps de chargement TF1 5,0s Allociné 4,0s Facebook 4,6s Skyrock 3,7s Yahoo! France 1,8s DailyMotion 2,4s Le Monde 7,9s Amazon France 3,7s
    4. 4. Depuis 5 ans…
    5. 5. Depuis 5 ans…• Poids des pages x3
    6. 6. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2
    7. 7. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2
    8. 8. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2 En moyenne, plus de 300 ko par page … pour seulement 500 mots
    9. 9. Depuis 5 ans…• Poids des pages x3• Nombre de composants x2• Nombre de balises HTML x2 En moyenne, plus de 300 ko par page … pour seulement 500 mots Source
    10. 10. Est-ce utile ?
    11. 11. Est-ce utile ?• 500ms = -20% de traffic pour Google
    12. 12. Est-ce utile ?• 500ms = -20% de traffic pour Google• 100ms = -1% de ventes pour Amazon
    13. 13. Est-ce utile ?• 500ms = -20% de traffic pour Google• 100ms = -1% de ventes pour Amazon• -30% du poids = +25% d’utilisateurs pour Google Maps
    14. 14. Est-ce utile ?• 500ms = -20% de traffic pour Google• 100ms = -1% de ventes pour Amazon• -30% du poids = +25% d’utilisateurs pour Google Maps• 400ms = 5 à 9% dabandons pour Yahoo!
    15. 15. Pourquoi le client ?
    16. 16. Pourquoi le client ?
    17. 17. Pourquoi le client ?
    18. 18. Pourquoi le client ?
    19. 19. Pourquoi le client ? 80 à 90% du chargement géré par le client 10 à 20% pour l’applicatif serveur
    20. 20. Un peu de réseau
    21. 21. Le mythe de l’ADSL Offres 8, 20, 28 Mbits
    22. 22. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM)
    23. 23. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits :
    24. 24. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP
    25. 25. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IP
    26. 26. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale
    27. 27. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale TV par ADSL : 5Mbits
    28. 28. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale TV par ADSL : 5Mbits Il y a encore du RTC en France
    29. 29. Le mythe de l’ADSL Offres 8, 20, 28 Mbits (ATM) Pour 8 Mbits : -20% à -25% : 6 Mbits en IP -2% à -3% : 5,8 Mbits en TCP/IPDébit théorique maximal sur une ligne optimale TV par ADSL : 5Mbits Il y a encore du RTC en France 3G : 3,6Mbits théorique (~2Mbits en pratique)
    30. 30. Chargement d’une ressource
    31. 31. Chargement d’une ressourceNavigateur
    32. 32. Chargement d’une ressource TempsNavigateur
    33. 33. Chargement d’une ressourceServeur DNS Temps Navigateur
    34. 34. Chargement d’une ressourceServeur DNS Temps Navigateur
    35. 35. Chargement d’une ressourceServeur DNS Temps DNS Navigateur
    36. 36. Chargement d’une ressource ServeurServeur DNS Temps DNS Navigateur
    37. 37. Chargement d’une ressource ServeurServeur DNS Temps DNS Navigateur
    38. 38. Chargement d’une ressource ServeurServeur DNS Temps DNS TCP Navigateur
    39. 39. Chargement d’une ressource ServeurServeur DNS P Temps HTT DNS TCP Navigateur
    40. 40. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur
    41. 41. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur x nombrede domaine
    42. 42. Chargement d’une ressource ServeurServeur DNS P Temps Réponse HTTP HTT DNS TCP Navigateur x nombre x nombre de ressourcede domaine
    43. 43. Évaluer les performances
    44. 44. Outils• YSlow + Firebug• WebPageTest
    45. 45. Agir
    46. 46. Chargement d’une page
    47. 47. Chargement d’une page• HTML
    48. 48. Chargement d’une page• HTML • Images
    49. 49. Chargement d’une page• HTML • Images • CSS
    50. 50. Chargement d’une page• HTML • Images • CSS • Images CSS
    51. 51. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript
    52. 52. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript • Exécution
    53. 53. Chargement d’une page• HTML • Images • CSS • Images CSS • Javascript • Exécution• Rendu
    54. 54. Objectifs
    55. 55. Objectifs• Moins de requête HTTP
    56. 56. Objectifs• Moins de requête HTTP• Ressources moins lourdes
    57. 57. Objectifs• Moins de requête HTTP• Ressources moins lourdes• Améliorer le temps de traitement
    58. 58. static.example.org
    59. 59. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques
    60. 60. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements
    61. 61. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements• Désactiver les cookies
    62. 62. static.example.org• Domaine ou sous-domaine dédié aux ressources statiques• Paralléliser les téléchargements• Désactiver les cookies• Entre 2 et 4 domaines/sous-domaines, pas plus
    63. 63. Toutes ressources
    64. 64. Toutes ressources• Expiration <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/css "access plus 2 weeks" </IfModule>
    65. 65. Toutes ressources• Expiration <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/css "access plus 2 weeks" </IfModule>• ETag ETag: "10C24BC-4AB-457E1C1F" Par défaut : FileETag INode MTime Size Désactiver : FileETag None
    66. 66. Ressources texte
    67. 67. Ressources texte• GZip<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css</IfModule>
    68. 68. HTML
    69. 69. HTML• Cache serveur
    70. 70. HTML• Cache serveur• Réduisez le nombre d’éléments
    71. 71. HTML• Cache serveur• Réduisez le nombre d’éléments document.getElementsByTagName(*).length
    72. 72. CSS & Javascript
    73. 73. CSS & Javascript • CSS : au début
    74. 74. CSS & Javascript • CSS : au début • Javascript : à la fin
    75. 75. CSS & Javascript • CSS : au début • Javascript : à la fin
    76. 76. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez
    77. 77. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez 2. Combinez
    78. 78. CSS & Javascript • CSS : au début • Javascript : à la fin 1. Externalisez 2. Combinez 3. Minimifiez
    79. 79. « Minimification »
    80. 80. « Minimification »43471 octets 9431 octets
    81. 81. « Minimification »43471 octets 9431 octets ~ -78%
    82. 82. GZip43471 octets 12920 octets
    83. 83. GZip43471 octets 12920 octets ~ -70%
    84. 84. « Minimification » + GZip43471 octets 3867 octets
    85. 85. « Minimification » + GZip43471 octets 3867 octets ~ -91%
    86. 86. Javascript
    87. 87. Javascript• N’utilisez pas de packer
    88. 88. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués
    89. 89. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements
    90. 90. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable »
    91. 91. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip
    92. 92. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip • Attention aux requêtes DNS
    93. 93. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip • Attention aux requêtes DNS • Évitez les redirections
    94. 94. Javascript• N’utilisez pas de packer• Évitez les fichiers dupliqués• Utilisez intelligemment les événements• Rendez l’Ajax « cachable » • Minimifiez + GZip • Attention aux requêtes DNS • Évitez les redirections • Configurez les ETag
    95. 95. Javascript eval() is evil
    96. 96. Javascript eval() is evil NON
    97. 97. Javascript new is evilnew Boolean(); // Argl…new Number(); // Stop…new String(); // Je souffrenew Object(); // Arrêtez…new Array(); // Cen est tropnew Function(); // PAN! var bool = false; var nb = 0; var str = ""; var obj = {}; var array = []; var fn = function() {};
    98. 98. JavascriptOptimisez vos boucles
    99. 99. Javascript Optimisez vos bouclesvar users = []; // 1000+ itemsfor (var i = 0; i < users.length; i++) { … }
    100. 100. Javascript Optimisez vos boucles var users = []; // 1000+ items for (var i = 0; i < users.length; i++) { … }for (var i = 0, j = users.length; i < j; i++) { … }
    101. 101. JavascriptAttention aux fonctions anonymes
    102. 102. Javascript Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; };
    103. 103. Javascript Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; }; // Mieux ! function fn(a, b) { return a * b; }
    104. 104. Javascript Attention aux fonctions anonymes$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; }; // Mieux ! function fn(a, b) { return a * b; } var fn = function fn(a, b) { return a * b; }; var obj = { fn: function fn(a, b) { return a * b; } }
    105. 105. JavascriptPré-compiler les RegExp
    106. 106. Javascript Pré-compiler les RegExpfor (var index = 0, l = links.length; index < l; index++) { if (links[index].href.match(/www.mydomain.tld/i)) { // … }}
    107. 107. Javascript Pré-compiler les RegExpvar rDomain = /www.mydomain.tld/i;for (var index = 0, l = links.length; index < l; index++) { if (links[index].href.match(rDomain)) { // … }}
    108. 108. Javascript Pré-compiler les RegExpvar rDomain = /www.mydomain.tld/i;for (var index = 0, l = links.length; index < l; index++) { if (rDomain.test(links[index].href)) { // … }}
    109. 109. Javascriptlength est aussi un setter
    110. 110. Javascript length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent","Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic","Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre","Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane","Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain","Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas","Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien","Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"];
    111. 111. Javascript length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent","Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic","Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre","Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane","Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain","Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas","Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien","Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"]; names.slice(0, 10); // Bien names.length = 10; // Super rapide
    112. 112. Javascript length est aussi un settervar names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent","Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic","Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre","Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane","Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain","Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas","Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien","Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"]; names.slice(0, 10); // Bien names.length = 10; // Super rapide names = []; // Bien names.length = 0; // Terriblement rapide
    113. 113. Javascriptobj.x === obj["x"]
    114. 114. Javascriptobj.x === obj["x"]var angle = 60, result;if (useSin) { result = Math.sin(angle);} else { result = Math.cos(angle);}return result;
    115. 115. Javascriptobj.x === obj["x"]var angle = 60;if (useSin) { return Math.sin(angle);} else { return Math.cos(angle);}
    116. 116. Javascript obj.x === obj["x"]var angle = 60;return (useSin) ? Math.sin(angle) : Math.cos(angle);
    117. 117. Javascript obj.x === obj["x"]return Math[useSin ? "sin" : "cos"](60);
    118. 118. JavascriptMicro-optimisations
    119. 119. JavascriptMicro-optimisations var a = 1; var b = 2; var a = 1, b = 2;
    120. 120. Javascript Micro-optimisations var a = 1; var b = 2; var a = 1, b = 2;times = times || 3;times |= 3; // Valeur numérique uniquement
    121. 121. JavascriptMicro-optimisations
    122. 122. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}
    123. 123. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {}
    124. 124. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime()
    125. 125. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime() Date.now()
    126. 126. JavascriptMicro-optimisations if (value == 3) {} if (value === 3) {}if (1 == 1 || true) {}if (true || 1 == 1) {} new Date().getTime() Date.now() +new Date
    127. 127. JavascriptMicro-optimisations
    128. 128. JavascriptMicro-optimisations delete obj.x
    129. 129. Javascript Micro-optimisations delete obj.xobjet.tres.interessant.mais.bien.cache
    130. 130. Javascript Utilisez DocumentFragmentvar fragment = document.createDocumentFragment();var div = document.createElement(div);…fragment.appendChild(div);document.getElementById(box) .appendChild(fragment.cloneNode(true));
    131. 131. JavascriptMinimisez les accès au DOM $(#box a).click(…); $(#box a).addClass(…); $(#box a).attr(…); var box = $(#box a); box.click(…); box.addClass(…); box.attr(…);
    132. 132. CSS
    133. 133. CSS• Évitez filter
    134. 134. CSS• Évitez filter• Évitez @import
    135. 135. CSS• Évitez filter• Évitez @import• Évitez expression
    136. 136. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows
    137. 137. CSS• Évitezfilter• Évitez@import• Évitezexpression• Évitez les reflows• Optimisez les sélecteurs
    138. 138. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows• Optimisez les sélecteurs #box .footer ul li a span
    139. 139. CSS• Évitez filter• Évitez @import• Évitez expression• Évitez les reflows• Optimisez les sélecteurs #box .footer ul li a span .footer-link span
    140. 140. Images• Pas de GIF• Optimisez les images• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    141. 141. Images• Pas de GIF• Optimisez les images + = PNG24 (3932 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    142. 142. Images• Pas de GIF• Optimisez les images + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    143. 143. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans)
    144. 144. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans) PNG8 64 couleurs (673 octets)
    145. 145. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans) PNG8 64 couleurs (673 octets) PNG8 64 couleurs (628 octets)
    146. 146. Images• Pas de GIF• Optimisez les images + = + = + = PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)• Supprimez les metas (smush.it, pngcrush, jpegtrans) PNG8 64 couleurs (673 octets) PNG8 64 couleurs (628 octets) - 6,7%
    147. 147. Images
    148. 148. Images• Spécifiez les dimensions
    149. 149. Images• Spécifiez les dimensions• Ne les redimensionnez pas
    150. 150. Images• Spécifiez les dimensions• Ne les redimensionnez pas• Utilisez les sprites
    151. 151. Favicon
    152. 152. Favicon• Pensez-y, évite une 404
    153. 153. Favicon• Pensez-y, évite une 404• Image/icone optimisée
    154. 154. En général
    155. 155. En général✓ Faites le moins de requête DNS
    156. 156. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP
    157. 157. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP✓ Évitez les redirections
    158. 158. En général✓ Faites le moins de requête DNS✓ Faites le moins de requête HTTP✓ Évitez les redirections✓ Évitez les 404
    159. 159. Ressources (outils)• Firebug http://getfirebug.com• YSlow http://developer.yahoo.com/yslow/• WebPagetest http://www.webpagetest.org• Yottaa http://www.yottaa.com• YUI Compressor http://developer.yahoo.com/yui/ compressor/• Smush.it http://www.smushit.com/ysmush.it/• SpriteMe http://spriteme.org
    160. 160. Ressources• Comprendre le cache http://www.mnot.net/cache_docs/index.fr.html• Performance Playground http://jsperf.com• Éric Daspet http://performance.survol.fr• Stoyan Stephanov http://www.phpied.com• Steve Souders http://www.stevesouders.com/blog/
    161. 161. Contact Nicolas Le Gallme@neovov.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×