begin process at 2012 02 11 17:08:06
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Astuces

 > CJO - CSS AND JAVASCRIPT OPTIMIZER

CJO - CSS AND JAVASCRIPT OPTIMIZER


 Information sur la source

Note :
8 / 10 - par 3 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Astuces Classé sous :cjo, webinventif, javascript, css, compression Niveau :Débutant Date de création :10/08/2007 Vu / téléchargé :5 035 / 233
Auteur : x_mec

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (27)
Ajouter un commentaire et/ou une note

 Description

Avec l’engouement pour le web 2.0 et ses effets javascript en tous genres, vos pages sont de plus en plus lourdes, elles incluent de nombreux fichiers javascript et css.

CJO va vous aidez mettre de l’ordre dans tout ça !

CJO va vous permettre:

    * de rassembler tout vos fichiers javascript en un seul et unique fichier js
    * de rassembler tout vos fichiers css en un seul et unique fichier css
    * de compresser à la volée vos fichiers css et js
    * de forcer et régler la durée de mise en cache de vos fichiers

Et tout ça en à peine 3 lignes de codes !



Présentation
------------

C’est en fait un ensemble de classes php qui ont été assemblées de manière à pouvoir en tirer pleinement profit le plus simplement possible.

Ma méthode utilise:

    * la version en php du Packer de Dean Edwards, un compresseur/obfuscateur de JavaScript.
    * CSSTidy dans sa version php, compresseur et optimiseur de CSS
    * une petite classe de mise en cache, déniché je ne sais plus où
    * et des petites astuces perso.

Donc je le précise, je me suis juste contenté d'assembler les sources pour faciliter l'implémentation ! Et n'etant pas très à l'aise en php, il y a très certainement de meilleurs façon "d'assembler" tout ça ...

Source

  • <?php
  • //array of .js files
  • $my_files = array('/js/swfobject.js','/js/prototype.js','/js/scriptaculous.js','/js/popup.js');
  • //@param [array of files, cache folder, time to cache (sec), compress?]
  • $my_param = array($my_files,'../cache/',60*60*12,true);
  • //include the php file for processing
  • require( '../optimizer/ultimate_optimizer.php' );
  • ?>
<?php
     //array of .js files
     $my_files = array('/js/swfobject.js','/js/prototype.js','/js/scriptaculous.js','/js/popup.js');
     //@param [array of files, cache folder, time to cache (sec), compress?]
     $my_param =  array($my_files,'../cache/',60*60*12,true);
     //include the php file for processing
     require( '../optimizer/ultimate_optimizer.php' );
?>

 Conclusion

1. uploadez les classes sur votre serveur (dans cette exemple je les met dans un dossier “optimizer” situé à la racine)
2. créer un fichier php (nommé le par exemple “import_js.php”) et mettez le code précédant à l'intérieur (avec vos fichiers .js)
3. uploader le fichier php sur votre serveur (moi je l’ai placé dans le même dossier que les .js)
4. remplacez vos imports multiples par l’import unique du fichier php
     <script type="text/javascript" src="/js/import_js.php"></script>
5. Et pour finir, créer un fichier “cache” situé à la racine.

Sujet d'origine: http://www.webinventif.fr/wiki/tutoriels/javascrip t/cjo_css_and_javascript_optimizer
Sujet en anglais (enfin si on veut ^^): http://www.webinventif.fr/wiki/tutoriels/javascrip t/cjo_css_and_javascript_optimizer

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture GENERATEUR D'ONGLET DE NAVIGATION PHP par pos123
FORMATER UN LIEN YOUTUBE, DAILYMOTION OU VIMEO POUR L'UTILIS... par kgb93
Source avec Zip Source avec une capture PAGINATION + FICHIER CSS par profdi
Source avec Zip Source avec une capture SYSTEME D'AUTHENTIFICATION PHP AVEC PROTÉCTION KEYLOGGER par mtrix000
Source avec Zip Source avec une capture GENERATEUR DE BOUTONS DE PARTAGES POUR RESEAUX SOCIAUX par cod57
Toutes les sources de la catégorie Astuces

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture PAGINATION + FICHIER CSS par profdi
Source avec Zip Source avec une capture PAGINATION JAVASCRIPT PHP MYSQL par cod57
Source avec Zip NAVIGATOR (+CSSDETECTOR) par xXVoxPopuliXx
Source avec Zip COMPRESSER (MINIMISER) UN FICHIER CSS par shevabam
Source avec Zip APPLICATION E-COMMERCE par lassadf

Commentaires et avis

Commentaire de MATHIS49 le 10/08/2007 22:05:13

" * de rassembler tout vos fichiers javascript en un seul et unique fichier js
* de rassembler tout vos fichiers css en un seul et unique fichier css"

Tu as pensé à la modularité quasi nécessaire d'un site Internet ?

Commentaire de x_mec le 11/08/2007 10:01:33

Oui !

Je ne vois pas où est le problème, lorsqu'il faut rajouter un .js ou .css, on édite le fichier php au lieu d'éditer la page ...

Ou alors je n'ai pas vraiment compris le sens de ta remarque, si tu pouvais développer un petit peu ;)

Commentaire de TheSin le 11/08/2007 11:26:53

La modularité, soit par exemple un fichier css et un fichier javascript par page qui en a besoin, sans compter les fichier "general.*" qui eux seront toujours chargés.
Ce qui permet de séparer chaque code spécifique à une page, et par la suite, réutiliser tout ce code découper ailleurs, sur un aute site par exemple, sans toucher au code d'origine.
Personnellement, je ne vois pas trop à quoi servent ces optimisations, surtout compresser les fichiers css en 1 seul, imaginons que dans 2 fichiers css je déclare le meme bloc pour le paramétrer différemment, bin c'est fichu :(.

Bonne idée tout de même, pour ceux qui ne tirent pas profit de cette modularité ;-)
(aka découper un site en modules)

Commentaire de x_mec le 11/08/2007 14:35:12

C'est certains que ce astuce prend toute son ampleur avec des sites basé sur des templates, donc quand toutes les pages sont faites sur le mème modèle ...

Mais je dis que ça reste tout de mème très modulable ! Un exemple:

Ton site se constitue de:
-style1.css
-style2.css
-effets1.js
-effets2.js
-et 15 pages html

Tu embarques tous tes .css et .js sur tes pages, sauf sur 5 d'entre elle où tu ne dois pas inclure "style2.css". Et bien c'est simple, tu fais un 2ème petit fichier.php pour ces 5 pages en supprimant "style2.css" du tableau ! C'est tout !

Donc ça reste assez modulable, bon c'est certains que ça se révèle moins utile pour les css car la méthode de compression est un peu spéciale, mais pour les fichier .js là ça reste selon moi une très bonne technique !

Mais je ne sais pas, j'dois avoir un sens logique différent, vu que vous avez l'air de penser que ça ne sert à rien (alors que bizarrement cette même technique de regroupement que j'avais développé mais en full javascript et sans compression avait fait un carton, reprise sur des sites allants de l'espagne au japon ^^)

Commentaire de TheSin le 11/08/2007 16:10:27

pour le JS, bon, ca peut être pratique, en effet, même si personnellement je ne fais pas comme ca quand je module un site.
Même avec moteur de templates, ça ne me servirait pas, car dans l'architecture des fichiers et de code pour mes sites, c'est un fichier general.css pour tout se qui se répercute sur toutes les pages, idem pour le JS, et ensuite, un fichier CSS et JS est ajouté automatiquement s'il est créé pour le template à afficher.
Après, bon, je trouve ça étonnant de ne pas devoir utiliser un CSS sur 1 certaine page, car dans ce cas, bin c'est que soit on a pas les même éléments, soit on réinitialise certains éléments spéciallement pour cette page.

Sinon, comme dit, en effet, c'est très pratique pour le JS si on veut absolument avoir une compilation des fichiers.
D'un autre coté, y'a-t-il un gain de performances significatif apporté au script final alors que les fichiers JS et CSS sont générallement placé en cache HTTP ?

Commentaire de Rudy3212 le 14/08/2007 00:11:26

Personnellement regroupé tout les fichiers en 1 seul.
N'allège rien du tout donc aucune utilité.
Le reste peut avoir un petit impact mais avec l'adsl de nos jour on est plus au kilo près.

Personnellement quand je code le javascript et le css, je sépare volontairement les fichiers, pour l'edition c'est quand même beaucoup plus pratique.

Un js pour le bbcode ...
Faut pas tout mélangé.

Pour le css.
Un css pour la mise en page, un css pour la modification des input... un css pour le texte (gras, taille, couleur....).

C'est quand meme beacoup mieux je trouve.

Je ne met pas de note, car sinon je te mettrer pas la moyenne, mais j'ai même pas regarder le code donc pas de note.

Commentaire de x_mec le 14/08/2007 10:10:34

@Rudy3212 et TheSin

Je ne comprend pas où est le problème !

Tout tes fichiers reste séparés ! CJO les regroupent (et les compressent) juste pendant la durée définie du cache (12 heures dans l'exemple). Une fois la durée terminée (ou tout simplement si vous n'activez pas le cache dans les paramètres cjo), il importera DYNAMIQUEMENT tout les fichiers js et css.
Donc au final l'utilisateur ne voit qu'un fichier, mais il y en a toujours plusieurs, comme des simple includes quoi ! Ne venez pas me dire que personne utilise des includes sous prétexte qu'au final ça ne ressort qu'un seul fichier ! Alors que c'est là tout l'avantage ....

Et même si comme tu le dis, avec l'adsl le poids importe peu, je peux te jurer qu'essayer de faire comprendre ça à un client qui me commande un site et qui roule encore en 512, c'est pas facile ;)

@TheSin
Et l'autre avantage aussi pour le cache, c'est que comme tu le dis, en général les fichier sont placé automatiquement en cache, mais du coup si tu fais une modif css il ne la verront pas tout de suite. Alors qu'avec cjo, tu réinitialise le cache toi-mème en virant le fichier généré :)

Commentaire de TheSin le 14/08/2007 10:39:16

C'est drôle ça, moi j'ai toujours vu les modifications de suite, sans jamais avoir eu à forcer la remise en cache. Remarque, ça doit venir de ma politique de mise en cache ou je ne sais quoi, ptetre du navigateur, surement la méthode de cache qui change, entre une simple durée de vie, ou si le navigateur regarde la date de modification des fichiers cache / serveur.
Je veux bien croire que ça puisse servir, donc pourquoi pas.
Enfin je trouve que si c'est de l'ouverture de fichiers coté serveur, là pourquoi pas utiliser ce genre de système, mais pour javascript/css, bon, voilà quoi, je l'ai expliqué au paragraphe précédent.

Et pourquoi ton client ne passe pas sur des serveurs dédiés au Web ? J'ai un peu de mal à comprendre comment des entreprises se permettent encore d'héberger sur du 512, ou site à fréquentation régulière...
A moins que tu parles de 512 en down, bin là le poids de ces fichiers importe peu, j'y était au 512, et là je suis à peine en 1024 sur du 20 Mbps théorique ....

Commentaire de x_mec le 14/08/2007 11:32:25

Yep, ah non attend, je parle de 512 c'est chez le client, à son domicile quoi !

Tu auras beau lui expliqué qu'il n'y a que lui qui est en 512, qu'en économisant 60ko la plupart des visiteurs ne sentiront pas la différence ... il en à rien a faire ! Et malheureusement ils sont nombreux à faire la chasse au kilos superflus (je me retrouve des fois à compresser des image jpg avec une qualité de 40%, vraiment crade)

Mais il faut voir plus loin, imagine que la compression te fasse gagné 50 ko sur tes css et js, et que ton site ai bcp de visiteurs, genre 1.000.000 de pages vues par mois. Au total tu economise 50 Go de bande passante !

:)

Commentaire de TheSin le 14/08/2007 12:00:46

oui, bon, c'est à voir, mais bon, ton client est un imbécile compréhensible ^^
Donc source utile pour les cas comme le tient ;-)

Commentaire de x_mec le 14/08/2007 12:02:39

lol, oui voilà ^^

Commentaire de Rudy3212 le 14/08/2007 12:23:54

60Ko en 512 sa représente rien.
512 / 8 = 64

Soit 1 Seconde...

Commentaire de x_mec le 14/08/2007 12:25:51

Oui, j'vais te filer le numero de tel du client pour lui expliquer ^^

Et encore une fois, ça sert dans d'autres cas ;)

Commentaire de Rudy3212 le 14/08/2007 13:12:34

Non mais le faite de compresser les fichiers (de les rendre plus compacte) ne va gagner meme pas une demi seconde sur le temps de chargement avec du 512.

Mais en faite c'est un système de cache alors ?
Il assemble les fichier juste pour un temps donnée dans une cache ?
Mais les fichiers sont toujours séparé ?

Commentaire de x_mec le 14/08/2007 13:16:54

Oui voilà tout as fait !

Tu peut définir la durée de mise en cache, cjo assemblera (et compressera, mais cette option est optionnelle) les différents fichiers en un seul. Ainsi tant que le fichier global qui est en cache n'a pas atteint la durée de validité, c'est lui qui est fourni aux visiteurs, et une fois la durée atteinte, il va rechercher à nouveau les différents fichiers et les ré-assemble :)

Commentaire de Rudy3212 le 14/08/2007 13:21:10

Alors ce système peut être bien :P,
J'avait pas compris sa au début ^^.

Quelque idée d'amélioration, au lieu de tout réassembler, ce qui doit mettre quelque seconde.
Tu pourrai par exemple, calculer le md5 de chaque fichier, et au temps donnée, vérifier si le md5 a changé.

La vérification mettra a mon avis moins de temps que le réassemblage.
Donc gain de temps en général, sauf dans le cas ou le md5 est différent.

Car il fait la vérification + l'assemblage

Commentaire de x_mec le 14/08/2007 14:22:12

Ah non, le script php "die" si la vérification par md5 réussie ! Donc pas de réassemblage ...

Commentaire de Rudy3212 le 14/08/2007 14:27:19

Ha ben si tu le fait déja alors ton système est parfait xD,
afin presque :P.

Tu a l'air d'etre assez acro au milliseconde.
Mais tu utilise un obfuscateur de JavaScript qui ralenti l'execution.

Sa se contredi pas un peu ?.
Juste la compression et pas obfuscation qui ne sert a rien a part ralentir.

Commentaire de x_mec le 14/08/2007 14:37:41

En fait c'est surtout que j'ai pas vraiment le temps (ni les moyens) de faire juste un compresseur, là j'ai utilisé le script de dean qui fait les 2. Faudrait faire des test de vitesses pour voir, mais je ne suis pas certain que ça ralentisse tant que ça ... preuve en est, bcp de framework javascript (comme jquery) propose des versions packagée avec cette méthode ...

A voir ...

Commentaire de Rudy3212 le 14/08/2007 14:42:01

Bon je met une note, 8.

Bonne continuation

Commentaire de x_mec le 14/08/2007 14:45:57

Thanks ;)

Commentaire de Guilloch le 14/08/2007 19:30:00

Bon, c'est pas trop mal fichu, et même si cela n'est pas utile pour tout le monde ca a le mérite de pouvoir en aider certain.

Commentaire de zeguizmo le 30/10/2007 20:03:52

Juste une petite remaque pour ceux qui n'auraient pas bien compris : la différence ne se fait pas sur un client mais sur des milliers, des dizaines de milliers voire meme des centaines de milliers selon l'importance du site.

Dans ce cas, être passé de 80ko à 20ko pour un pauvre fichier js représente un gain de bande passante énorme.

Reste a savoir si le gain de bande passante n'est pas compromis par le temps (et l'intensité) d'utilisation du proc pour compresser tout ca via php. Tout dépend des priorités ... la vitesse d'execution coté client ou coté serveur. Des benchs sont à faire, fort à parier qu'ils dépendront énormément de vos configs respectives. Il est évident que dans certains cas cette méthode sera très efficace.

J'espère en avoir eclairé quelques uns ...

Bonne soirée.

Commentaire de x_mec le 31/10/2007 12:56:44

@zeguizmo

Oui voilà, c'est a grande echelle que ça prend son importance ! ça limite les accès aux fichiers externes.

Et ce n'est pas compromis par le temps de compression php, car php ne le compresse qu'une fois toute les 12 heures dans l'exemple, et tu peux carrement mettre une fois tout les 10 jours, donc après ça reste juste un accès à un fichier texte (non dynamique) unique, gain de poids, gain de temps et on epargne le serveur en evitant les accès multiple ;)

Commentaire de zeguizmo le 10/11/2007 11:09:54

Salut,

J'ai testé ton code car il m'avait l'air plus poussé que celui que j'utilise actuellement.

Je suis extrêmement surpris du résultat : les temps d'executions des scripts compressés par ton code sont hallucinants : 600ms en local pour parser un code js de 40ko ... (63ms non compressé ...). Je ne parle pas du temps de compression (plus de 4secondes ...) mais bien du temps de chargement du fichier en provenance du cache !

Je n'arrive pas a comprendre d'ou vient le problème ...

Même les css sont extrêmement longs ! 80ms pour un css de 3ko !

D'autres personnes rencontrent les mêmes problèmes ?

Commentaire de x_mec le 11/11/2007 11:20:07

Tu parle du temps pour executer la compression + mise en cache ou du temps pour recuperer le fichier déjà present en cache (car tout l'interet est là) ?

Moi j'ai des temps "normaux" ...

Commentaire de zeguizmo le 25/01/2008 11:20:08 8/10

Salut,

Désolé de répondre si tardivement,j'ai résolu le probleme et oublié ce post.

Je parlais du temps pour récupérer le fichier présent dans le cache, d'ou le probleme !

Les tests que j'effectuais étaient réalisés a l'aide d'un xamp sous windows .. apres reboot du serveur, les temps se sont calmés. Donc le serv devait etre en train de péter un pti plomb :) Depuis ca lui est arrivé deux trois fois à mon xamp de me jouer des tours de ce genre, mais un reboot du pc (et donc du serveur) regle le probleme.

Merci a toi, c'est très utile et il est plus performant que le mien :)

Bonne continuation.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

menu dynamique en php/javascript/css [ par informatique7 ] je veux faire un menu dynamique d'un site web en php ou en javascript sous cette forme xxxxx      yyyy       zzzz        kkkk      hhhhh    xxxx1  xxx php, javascript, css html [ par dsbr2008 ] Salut tout le monde, j'ai un petit problème c'est qu'à partir d'une page web que je veux l'imprimer, oui ca marche l'impression, sauf qu'en tête et pi comment redéfinir l'icone qui doit être affiché pour les fichiers CSS et Javascript ??? [ par nicomilville ] Salut tout le monde, j'ai un problème, suite a une mauvaise manipulation les fichiers CSS et Javascript apparaissent sans icone et je veut qu'ils retr [Choix livres]Html/Css/Javascript/Php/Ajax! [ par sachie ] Bonjour à tous , j'ai décidé de fortifier mes connaissances par les livres! Mon principal souci vient du web, trois mois de formations mais cinq sans Probleme css pour site [ par H0MME ] Bonjour,je débute en CSS et comme vous allez pouvoir le voir sur mon site il y a quelques problemes http://tictackilla.free.fr/rocket/je n'arrive pas adapter javascript avec php [ par isamm2008 ] bjr a tous,je voulais savoir si c possible d'integrer un tel code javascript dans une fonction php par ex: dans le cas d'un site multi-langues les ale Javascript dans flash [ par minine66 ] Bonjour a tousJe ne sais pas si je suis dans le bon thème mais une chose est sûre c'est que j'ai besoin d'un coup de main.Je suis en train de créer un CSS sous "classe" [ par zen69 ] Bonjour à tous.Bon je suis entrain de faire un fichier CSS  pour un site, et je tente de faire quelque choses qui me parait simple a priori mais je n' demande d'aide pour du css [ par stomy95 ] Bonjour a tous , Qui pourrai me renseigné j'ai trouver sur internet plein de codes pour changé la couleur d'un lien ou bannière dés qu'il ya eu un cli CSS MAP et AREA [ par gabs77 ] Bonjour, Je voudrais savoir si on peut combiner du CSS avec les balises AREA ???En fait, j'ai une image PNG avec un fond transparent que j'affiche en


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (16 Go)
Entre 0€ et 0€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Beautiful woman in a bikini meditating on the beach
Photo Tropical Location With Palm Tree and Woman Holding Umbrella 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,154 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)