Lire en direct les logs apache est une obsession de geek nerd parano. C'est le trainspotting du dev. Des lettres blanches sur fond noir, à l'espacement fixé, commandées dans un terminal qui se déroule dans une fièvre syncopée. Dans un silence glaçant. Ou feutré (oui, parce que le bruit d'imprimantes à aiguilles, on trouve ça que dans les films d'Hollywood).
Imbitable, lourd, cette “occupation” permet de se tenir au courant des dernières tentatives d'attaque automatisées, de bots de moteurs de recherche, des comportement incohérents de sites, des kikoolol qui piquent vos images pour les mettre dans leurs skyblogs, les gougnafiers qui pompent votre site pour les mettre avec de la pub... Mais aussi d'analyser le comportement de logiciels clients, les navigateurs, pour mieux optimiser vos applicatifs.
Prenons mon site professionnel
Dedans, il y a une image en .png ARGB (relire l'article à ce sujet), mais j'établis une simple discrimination dans la CSS pour servir au brontosaure MSIE6 la “même” image (forcément moins jolie) en .png palettée. Comme ceci :
h1 { background : url(dascritchcomIE6.png); } html > body h1 { background : url(dascritchcom.png); }
Dans les faits (à une seule exception, lire plus bas), et jusqu'à la semaine dernière, tous les navigateurs ne chargeaient qu'une seule image. MSIE6 chargeait la sienne, les autres la normale. Mais jamais les deux à la fois.
Petit gourmand, va.
Prenons Google Chrome (User-agent déclaré : « Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13 » . Risible en complexité), et voyons ce qui se passe avec :
Document appelé | Referee déclaré |
---|---|
/dascritchcom.css | http://dascritch.com/ |
/degrad.png | http://dascritch.com/ |
/dascritchcomIE6.png | http://dascritch.com/ |
/dascritchcom.png | http://dascritch.com/ |
Comme on le remarque, Google Chrome charge les deux images. Mais n'en affichera au final qu'une seule. À l'heure où j'écris ces lignes, Google Chrome n'est disponible que depuis une semaine. Et n'est même pas au stade de Béta. Ce qui veut dire qu'il est très très loin d'être optimisé ou même sécurisé (d'ailleurs, il est fortement recommandé de ne pas surfer n'importe où avec !).
L'optimisation ici consisterait à ne charger que les images réellement utilisées. Safari, Opera, MSIE et Firefox ne chargent les images décrites dans les CSS que si le moteur éprouve le besoin de les afficher. Si un bloc est déclaré dans votre CSS comme ayant grosbalourd.jpg en background, mais que la balise en question n'est pas dans votre page HTML, normalement, le navigateur ne le charge pas. Ce n'est pas le cas avec Google Chrome.
En fait, ce comportement se retrouve dans Konqueror, le navigateur web de l'environnement KDE sous Linux, dont le moteur KHTML a été la base qu'Apple a choisie pour créer Webkit pour son Safari. Néanmoins, Apple a optimisé en supprimant ce comportement, ce qui n'est pas le cas de l'équipe de Google Chrome.
Hypothèses :
- Soit c'est un défaut d'optimisation. Et dans ce cas, il est totalement prématuré de travailler à ce stade d'écriture sur l'accélération et l'optimisation des ressources d'un logiciel aussi complexe alors que d'autres choses sont à coder en priorité. Surtout qu'ils en sont qu'à la version “0.2.149.29”.
- Soit c'est une volonté de Google dans son navigateur de rendre encore plus réactive les actions dynamiques (manipulations JS+DOM comme les appels AJAX/JSON), vu que l'intention du moteur de recherche (décrite dans la bd par Scott McCloud) en pré-cachant les éléments graphiques de décoration. Mais surtout de rendre encore plus attractives ses applications web, de manière à ce qu'elles ne souffrent pas de la comparaison avec les logiciels (Google Documents versus Microsoft Office, par exemple)
Vues les volontés communes des navigateurs open-source d'accélération du moteur Javascript (l'interpréteur bytecode du SquirrelFish dans Webkit, l'arrivée du JIT dans TraceMonkey de Gecko, et le code pré-machine virtualisé du V8 de Google) pour rendre les applications web dynamiques encore plus réactives, ce... particularisme (?) pourrait se répercuter dans les autres navigateurs modernes. Et donc devenir la norme, et donc obliger à repenser certaines CSS (j'en ai vu qui approchaient les 120ko) voir le design général d'un site. Pas mal de web-designers et web-developpeurs vont devoir remettre en cause leurs méthodes de travail.
À propos de modernité des navigateurs, rappelons que MSIE est incapable de garder en cache les éléments dynamiques comme les images dans les CSS, ce qui rend la navigation sur certains sites pénibles. Par exemple, chaque fois que sur mon site vous allez dans la colonne de droite choisir une puce, MSIE recharge la puce, ce qui la fait clignoter. Ce comportement aberrant oblige les webdesigners à développer des techniques comme le sprite.
Dis-moi d'où tu viens...
Autre chose que l'on remarque, c'est la colonne Referee. C'est une des méthodes pour déterminer pourquoi un élément d'un site a été chargé (il en existe plusieurs), et les origines de traffic comme je l'avais précédemment expliqué. Dans le cas des logs Apache, cette colonne est parfois renseignée. Car ce champ est déclaratif lors de l'envoi d'une requête à un serveur web (il se fait avant les cookies). Opera, les proxys d'entreprises,... ne renvoient pas d'information. Seul le moteur Gecko (celui de Firefox) indique qu'il charge une image parce qu'elle est décrite dans la CSS, les autres font référence au document HTML.
Document appelé | Referee déclaré | Navigateur (User-agent déclaré visible par survol) |
---|---|---|
/dascritchcom.png | http://dascritch.com/ | Safari 3.1 sur Mac OSX |
/dascritchcomIE6.png | http://dascritch.com/ | Google Chrome béta 2 sur MS-Win Vista |
/dascritchcom.png | http://dascritch.com/ | Google Chrome béta 2 sur MS-Win Vista |
/dascritchcom.png | http://www.dascritch.com/dascritchcom.css | Firefox 3 sur Linux |
/dascritchcom.png | http://dascritch.com/ | MSIE 7 sur MS-Win XP |
/dascritchcomIE6.png | http://dascritch.com/ | MSIE 6 sur MS-Win XP |
/dascritchcomIE6.png | http://dascritch.com/ | Konqueror 3.5 sur Linux |
/dascritchcom.png | http://dascritch.com/ | Konqueror 3.5 sur Linux |
Néanmoins, le raisonnement ne se fait pas jusqu'au bout, puisqu'une image appelée par un Javascript (DOM, AJAX, JSON, etc...) est referée comme venant du document HTML. Un manque de cohérence dans la politique Firefox qui mérite bien un ticket bugzilla.
À noter que certains lecteurs de flux RSS basés sur Webkit (tous ceux sur Mac) renvoient improprement l'adresse racine du site.
Moralité
Ami développeur qui travaille en entreprise, quand tu t'emmerdes, ouvre ta console, loggue-toi en ssh à ton serveur, et lis tes logs apache. À défaut, tu peux toujours naviguer avec links pour lire bashfr.
De loin, ça fait illusion.
5 réactions
1 De Anthony - 10/09/2008, 21:44
J'avoue que même si le but de Google est d'accélérer l'affichage, il me semble que google est conscient du problème de bande passante mondiale qui est de plus en plus bouchée. N'est-ce pas paradoxal de télécharger des images inutiles et qui vont donc consommer de la BP pour ton serveur, et plus globalement sur le net.
Personellement j'opte plutot sur la troisième option, ils ont pris un moteur, ont commencé à developper leur navigateur, il y a eu une fuite (la BD) et ils se sont empréssés de publier le browser pour contrôler l'idée que le monde exterieur commençait à se faire. Ils ont simplement marqué béta dessus (vu que c'est leur marque de fabrique, quelque part) plutot que de la noter pre-alpha... :D
Et je te rassure, non ce n'est pas être cinglé que de mater les logs apache, c'est juste que ce n'est passionnant que lorsque c'est toi qui a décidé de les lire ;)
2 De VRic - 11/09/2008, 14:12
"Sur" une plate-forme et "sous" un OS. Donc dans ton tableau c'est "sous" partout, sauf éventuellement la première ligne si tu lui enlèves "OSX".
C'est quoi la technique sprite ?
N'est-il pas un peu tard pour publiciter l'appel du 18 juin de Firefox 3 ?
Me reste-t-il du chorizo ?
Qui veut gagner des binious ? http://images.google.com/images?cli...
3 De enflammee - 11/09/2008, 19:49
Je comprends rien, alors rien du tout... 0_°
4 De Mitch 74 - 22/09/2008, 15:27
sauf erreur de ma part, la technique 'sprite' est de charger les images via Javascript, de les affecter à un objet, mais de ne pas afficher cet objet - à ce moment-là, l'image est en cache (elle est chargée) pour Javascript donc IE peut l'afficher sans rappeler le serveur s'il y a un appel pour cette même image dans le CSS.
Ce bug est ancien (IE6) mais comme il n'intervient que lorsque le CSS bricole le DOM (notable depuis IE 7 seulement, sous IE 6 'fallait se lever tôt parce que IE6 ne supportait pas :hover sur d'autres éléments que les A avec HREF), ben il n'a pas été corrigé.
Une autre méthode est de charger l'image via CSS, mais dans un élément pas visible normalement.
Personnellement j'utilise une 3e méthode qui a l'immense avantage de diminuer le nombre de requêtes: les 2 (voire plus) états de l'image sont en fait contenus dans le même fichier, et j'utilise un changement de valeur de background-position dans un objet de type bloc: pour des pseudo-puces, c'est super.
Inconvénient, ça marche pas partout. Autre inconvénient, les vieux vieux navigateurs affichent n'importe quoi. Troisième inconvénient, pas moyen de faire de déductions via les logs Apache :p
5 De Mitch 74 - 26/09/2008, 11:46
Complètement HS: la dernière fois qu'on a causé, je parlais du Spirou de Y. Chaland. Ben ça y est, il est réédité! J'l'ai vu à la Fnac, version colorisée - je ne sais pas si la couleur est de Chaland, mais bon, vàlà.