Livre retardé

Dans mon article sur « Règles pour de meilleurs performances », je vous parlait du livre High Performance Web Sites, il devait sorti fin septembre et je viens de recevoir un email d’Amazo, qui m’annonce une sortie pour fin novembre…il va falloir patienter un peu…

En attendant, j’ai choisi de lire Building Scalable Web Sites

Un retour sur ce livre prochainement sur ce blog.

Modification javascript pour les tables

Comme plusieurs d’entre vous veulent connaitre les modifications que j’ai fait pour les tableaux javascript (suite des commentaires sur l’article « Economisez votre serveur : Triez en javascript »

Pour rappel, la page d’exemple se trouve ici : la page des entrainements de MARC78 sur Wanarun

Les modifications de la librairies sortable.js
Ajout d’une variable pour la taille des pages

var maxRows=20;

Ajout de la fonction showPageTable()

function showPageTable(table,number)
{
  for (j=1;j<table>{
    if (j=(maxRows*(number)+1))
    {
      table.rows[j].style.display='none';
    }
    else
    {
      table.rows[j].style.display='';
    }
  }
}

Modification de sortables_init()

//après la ligne
ts_makeSortable(thisTbl);
//j'initiliase mon tableau sur la premiere page
showPageTable(thisTbl,'1');

Dans le php

//il faut définir une variable commune avec le javascript
define("NB_LIGNE_TABLEAU",20);
 
$list=$data["performance"];
$page_str="";
$separator=" | ";
$nb_page=floor(sizeof($list)/NB_LIGNE_TABLEAU)+1;
if ($nb_page&gt;1)
{
        for($i=1;$i&lt;=$nb_page;$i++)
        {
                $page_str.="<a href="#">".$i."</a>";
                $page_str.=$separator;
        }
        echo substr($page_str,0,-strlen($separator));
}

Créer une table temporaire

Parfois, il est préférable ou nécessaire de passer par une table temporaire pour insérer / mettre a jour des données.
Ca vous permet d’insérer les données et eventuellement de vérifier la table temporaire avant de permutter les 2 tables.
Par exemple, vérifier que votre table comporte au moins 10 éléments ou n’est pas vide.

//j'efface la table temporaire si elle existe :
$res=mysql_query("drop table if exists my_table_tmp");
if ($res==false) die("Erreur mysql ".mysql_error());
 
//je récupére la structure de la table maitre
$res=mysql_query("show create table my_table");
if ($res==false) die("Erreur mysql ".mysql_error());
$row=mysql_fetch_row($res);
$create=$row[1];
 
//je substitue le nom de ma table maitre pour créer ma table temporaire
$create=str_replace("my_table","my_table_tmp",$create);
//je crée ma table temporaire.
$res=mysql_query($create);
if (!$res) die("Erreur mysql ".mysql_error());

La requete utilisant RENAME TABLE est pratique pour ce cas :

RENAME TABLE my_table TO my_table_backup, my_table_tmp TO my_table;

en PHP ca donne :

//Je permutte les tables 
$res=mysql_query("RENAME TABLE my_table TO my_table_backup, my_table_tmp TO my_table");
if (!$res) die("Erreur mysql ".mysql_error());

N’oublie pas l’indexation

Une notion que certains développeurs oublient parfois et une erreur de débutant que je vois régulièrement dans des scripts open source. Je vais prendre l’exemple (simplié a l’extrème) d’un blog avec des articles et des categories. J’ai une table avec un champ texte qui contient le texte de mon article, un identifiant (clé primaire) de l’article et une catégorie pour classer l’article (sous forme d’entier).

La création de la table donne ca :

CREATE TABLE `test_index` (`id` INT NOT NULL ,`texte` TEXT NOT NULL ,`categorie` INT NOT NULL ,PRIMARY KEY ( `id` )) ENGINE = MYISAM ;

Tout va bien la plupart du temps mais quand la base commence a prendre du volume, certaines pages deviennent lentes. Dans notre cas, il s’agit de la page par categorie, c’est à dire la page qui regroupe tous les articles d’une même categorie.

La raison de cette lenteur est simple, MySQL est obligé de parcourir toute la table pour extraire les articles de la catégorie désirée.

Il faut donc ajouter un index sur le champ categorie pour accélérer les requetes du type

SELECT * FROM test_index WHERE categorie='1';

Comment ajouter un index avec une commande MySQL :

ALTER TABLE `test_index` ADD INDEX ( `categorie` )

Comment ajouter un index avec PHPMyAdmin :

1. Je choisis ma table

2. je vais dans le menu Structure

3. Je clique sur créer 1 index :

4. Je choisis « categorie » comme champ sur lequel je crée l’index.

5. Je clique sur Save pour enregistrer

6. Je vois la requete de création de l’index

7. mon index est affiché parmis la liste des index

Toutes mes requètes possibles sont optimisés :

SELECT * FROM test_index WHERE id='2';
SELECT * FROM test_index WHERE categorie='6';

Dernière remarque : il n’est jamais trop tard pour créer un index ! la création sera peut-être un peu plus longue que sur une table vide mais ce n’est pas interdit
« Il n’est jamais trop tard pour bien faire »

Règles pour de meilleures performances

La performance est un de mes chevaux de bataille, chaque développeur devrait lire les 13 règles pour une meilleure performancede Yahoo

Voici la conférence de Steve Souders (Chief Perfomance chez Yahoo!)

Steve Souders a aussi écrit un livre « High performance Web site », le livre sort le 21/09 et j’ai fait la précommande. je parlerai donc de ce livre ici.

Javascript : attention aux chargements

Vous avez surement remarqué depuis l’apparition des sites web 2.0 avec l’apparition d’Ajax, le code Javascript des sites a pris de l’embonpoint. Raison à cela : la multiplication des librairies javascript (prototype, script.aculo.us, dojo et autres librairies).

On se retrouve avec 5 / 6 voire 10 includes javascript au début de la page (sans compter les tags google analytics et autres).

Donc parfois la première page est souvent laborieuse à venir . Après je vous accorde que le navigateur fait son boulot et gère correctement le cache mais le chargement de la première page c’est aussi la première impression de l’internaute.

En fait le probleme est très simple, un navigateur ne parallelise pas le chargement des includes javascript, il les lit dans l’ordre car il interprete le code. On se retrouve donc avec une suite de requetes de chargements / interpretations de fichier javascript.

La solution est simple, vous pouvez développer avec une liste de fichiers javascript mais lors de la mise en production, concatenner tous vos fichiers javascript en 1 seul (plus gros mais unique donc un peu moins rapide à charger mais une seule requete et pas d’attente)

Economisez votre serveur : Triez en Javascript

Avec un peu de javascript, on peut assez facilement dimunuer le nombre de requetes vers le serveur et ainsi le soulager de travail inutil. En effet, il est toujours mieux de faire le travail sur le poste du client que sur le serveur !

Un exemple très simple est « les tris sur les tables HTML« , vous avez un tableau triable avec la possibilité de trier selon plusieurs colonnes. En php, c’est un peu long a mettre en place il faut gérer le « ORDER BY« , les différentes clés… pour la plupart du temps une petite liste.

Bien sûr, quand la requete renvoit 10000 élements c’est plus difficile de faire autrement mais est-ce vraiment le cas ?

Personnelement j’utilise une petite libriairies Javascript sortable, qui permet de rendre une table HTML toute simple en veritable petite tableau Excel.

Voici un exemple sur mon site Wanarun. Vous y verrez aussi une petite surprise pour la gestion des pages…

MySQL : On Duplicate Key UPDATE

Une problématique régulière sur un site consiste à mettre a jour des données. Parfois la donnée existe déjà et parfois elle n’existe pas.

Vous pouvez utiliser REPLACE mais le REPLACE est simplement un DELETE suivi d’un INSERT.

Exemple :

Je recois régulièrement les données d’une station météo. Parfois je recois la température, d’autre fois je recois l’humidité…si j’utilise REPLACE quand je mets à jour la température, je vais perdre l’humidité de la station X (X etant ma clé primaire, ma table comporte une ligne par station)

Deux méthodes sont possible :

  1. Je fais un SELECT pour savoir si la station a déjà des données et ensuite je fais soit un INSERT soir un UPDATE.
  2. J’utilise ON DUPLICATE KEY : INSERT INTO donnee_station SET temperature=15, station=’Nancy’ ON DUPLICATE KEY UPDATE temperature=15;

L’avantage de la deuxième méthode : cela réduit le code et je ne fais qu’une requete (meme si au niveau du serveur il en execute 2 :il essaye de faire INSERT si il recoit l’erreur Duplicate key Entry il fait UPDATE)

En résumé c’est plus facile est plus propre.

References:



Check out our best movie collection. Latest CD, DVD, HQ DVD movie downloads. Buy and download movies instantly.