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
Prochain SlideShare
Chargement dans…5
×

Performances

1 426 vues

Publié le

Cours sur les performances côté client.

Publié dans : Formation
  • Soyez le premier à commenter

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

×