J'ai récemment commencé à entrer dans la zone d'optimisation de la préformance et de la charge de charge côté client, de compresser CSS / JS, de la gzipping, de faire attention à Yslow, etc.
Je me demande, tout en essayant d'atteindre toutes ces micro-optimisations, quels sont les avantages et les inconvénients de servir des fichiers PHP en tant que CSS ou JavaScript?
Je ne suis pas tout à fait sûr où le goulot d'étranglement est, s'il en existe un. Je supposerais qu'entre un fichier CSS et PHP identiques, le fichier CSS "pur" serait légèrement plus rapide simplement car il n'a pas besoin d'analyser le code PHP. Cependant, dans un fichier PHP, vous pouvez avoir plus de contrôle sur des en-têtes pouvant être plus importants (?).
actuellement je fais actuellement un Je préférerais utiliser PHP avec .htaccess car il est beaucoup plus simple, mais à la fin je utiliserai la meilleure méthode. filemtime () Vérifiez sur un fichier "Trigger" et avec une partie PHP Voodoo écrit un seul fichier CSS compressé de celui-ci, combiné à plusieurs autres fichiers dans un groupe défini. . Cela crée un fichier comme CSS / groupname / 301469778.CSS , que le modèle PHP prend et met à jour les balises HTML avec le nouveau nom de fichier. Cela semblait être la méthode la plus sûre, mais je n'aime pas vraiment que le cache de serveur se rende rempli de fichiers Junk CSS après plusieurs modifications. Je ne me soucie pas non plus de cela pour les petits fichiers "assistant" CSS uniquement chargés pour certaines pages.
MOD_REWRITE Les fichiers à utiliser l'extension CSS / JS pour tout cas d'interprétation d'une mauvaise interprétation des navigateurs? Vous ne pouvez pas faire mal? Pas nécessaire?
@imports ou un fichier php avec plusieurs lishfile () appels?
5 Réponses :
Vous parlez de servir des fichiers statiques via PHP, il y a vraiment peu de points que cela puisse être toujours plus lent que Apache servant un fichier normal. Un CSS @Import sera plus rapide que le fichier de lecture () de PHP (), mais les meilleures performances seront gagnées en servant un fichier CSS minifié qui combine tous les CSS dont vous avez besoin à utiliser.
Si cela ressemble à vous êtes sur la bonne voie cependant. Je conseillerais de pré-traiter votre CSS et de sauvegarder votre disque. Si vous devez définir des en-têtes spéciaux pour des choses comme la mise en cache, faites cela dans votre directive VirtualHost ou votre fichier .htaccess.
Pour éviter de nombreuses fichiers en cache, vous pouvez utiliser une simple convention de dénomination de fichiers pour votre CSS minifiée. Par exemple, si votre fichier CSS principal appelé MAINT.CSS et IT références Réinitialisez.CSS et Forms.css via @imports, la version minifiée pourrait être appelée MAIN.MIN.CSS
Lorsque ce fichier est régénéré, il le remplace simplement. Si vous incluez une référence à ce fichier de votre HTML, vous pouvez envoyer la demande à PHP si le fichier n'existe pas, combiner et minime le fichier (via quelque chose comme Lorsque vous mettez à jour votre CSS, supprimez la version MAIN.MIN.CSS et elle se régénérera automatiquement.
Merci pour les commentaires. La raison pour mettre à jour le nom du fichier lui-même est de s'assurer que les utilisateurs qui ont déjà la version mise en cache d'un fichier CSS téléchargent le système mis à jour (s'il existe). Étant donné que le nom du fichier change, le navigateur le verra en tant que nouveau fichier et ne pas utiliser la version mise en cache.
Combien plus rapide est @import que liselfile () , juste curieux?
Si vous êtes inquiet pour les mises à jour, ajoutez simplement un faux paramètre d'obtention de votre fichier CSS, par exemple:
La différence avec @ Import / Readfile est que le client n'a besoin que de télécharger 1 fichier dans le boîtier READFILE () , donc, outre les frais généraux initiaux, il y a cela à considérer. J'ai également lu plusieurs fois que l'utilisation d'une chaîne de requête n'est pas assez fiable pour déclencher le téléchargement du nouveau fichier. Peut citer si nécessaire.
Nous développons une application Web de grande taille DHTML / AJAX avec environ 2 Mo de code JavaScript et ils se chargent toujours rapidement avec certaines optimisations:
Essayez de réduire le numéro numéro d'URL de script inclus. Nous utilisons un script PHP simple qui charge un tas de fichiers .js et les envoie en une aller au navigateur (tous concaténés). Cela chargera votre page un être cache convivial. Notre page HTML est également générée via PHP et l'URL aux scripts contient un hachage dépendant de la modification des fichiers. Le script PHP ci-dessus qui combine les fichiers .js, vérifie ensuite les en-têtes de cache HTTP et définit une longue heure d'expiration de sorte que le navigateur ne doit même pas charger des scripts externes la seconde fois que l'utilisateur visite la page.
gzip compresse les scripts. Cela réduira votre code d'environ 90%. Nous n'avons même pas besoin de minimiser le code (ce qui facilite le débogage).
Donc, oui, en utilisant PHP pour envoyer les fichiers CSS / JS peut améliorer le temps de chargement de votre page, en particulier pour les grandes pages. Edit: Vous pouvez utiliser ce code Pour combiner vos fichiers: utilise fichiers_hash () pour générer une chaîne de hachage unique qui modifie chaque fois que vos fichiers source modifient et combinent_files () pour envoyer les fichiers combinés au navigateur. Ainsi, utilisez fichiers_hash () lors de la génération du code HTML pour la balise et combinez_files () dans le script PHP chargé via cette balise. Il suffit de placer le hachage dans la chaîne de requête de l'URL. Assurez-vous de spécifier la même liste $ dans les deux cas.
Alors, dis-tu qu'il n'y a pas d'inconvénients, seulement des avantages? Lorsque vous dites que vous utilisez un hachage, voulez-vous dire comme style.css # v1 ? Est-ce fiable en ce qui concerne les téléchargements clients style.css # v2 quand il devient disponible? Comme je l'ai commenté, j'ai lu que l'Ajout d'une chaîne de requête n'est pas fiable, cette méthode semble similaire. De plus, je suis conscient que la réduction des demandes est une bonne chose, mais qu'en est-il de la vitesse lorsqu'il servait le contenu avec PHP? Je suppose que le PHP ne compile pas à CSS tant que le client est demandé par le client, car la page est chargée. Cela n'affectera-t-il pas à quel point le CSS / JS est-il disponible?
En fait ça dépend. Utilisation de PHP pour servir un seul fichier CSS de 100 octets ne le fera plus plus rapidement. Mais servant 20 fichiers lourds .js avec une seule demande HTTP PHP permettra de charger votre page dans les 1-2 secondes au lieu de plus de 10 secondes. Bien sûr, cela dépend également de votre installation PHP, mais généralement du code PHP est pré-compilé avec un accélérateur.
J'ai ajouté le code dans ma solution. Je ne parlais pas d'URL-Hash, mais au lieu de MD5-Hashes, c'est-à-dire une chaîne qui change lorsque le modTime de vos fichiers source change. Dans le cadre de la chaîne de requête, elle rend l'URL unique et veille à ce que le navigateur charge la version la plus récente du code. Je ne vois pas pourquoi cela ne devrait pas être fiable. Essayez-le et voyez avec Firebug si la page charge plus rapidement.
Merci pour l'échantillon de code, mais je ne veux pas me concentrer sur "Comment faire", j'ai déjà cela, comme je l'ai dit dans le poste d'origine. La question concerne les performances en utilisant php pour servir CSS / JS. J'ai également mentionné deux fois maintenant que la chaîne de requête n'est probablement pas assez fiable pour forcer un nouveau téléchargement sur la révision (qui est à côté du point). J'aimerais entendre des réponses sur les points de balle de ma question, précisément s'il y a des inconvénients à l'utilisation de PHP, que personne n'a encore touché. Peut-être que la réponse est "non, il n'y a pas d'inconvénient." Ne sera pas plus rapide! == sera plus lent
@Madmartigan: Veuillez fournir cette citation sur la méthode de la chaîne de requête peu fiable.
@DO G: En fait, je l'ai eu à l'envers, apparemment, le problème est que le fichier ne peut pas être mis en cache du tout. HTML5 Boilerraler Intro sur YouTube mentionne quelque chose à ce sujet à 4: 30.
OK, ce sont des situations assez rares (affectant négativement performance ). Quoi qu'il en soit, en fonction de votre installation PHP, vous pourrez peut-être utiliser Path_Info. C'est-à-dire que votre URL va au-delà de l'emplacement de script, comme /some/path/getstyles.php/version123 . Pour naviguer / proxy, il s'agit d'une URL entièrement valide sans chaîne de requête. Le serveur le comprend habituellement de toute façon, mais comme indiqué que cela dépend de l'installation du serveur. Essayez simplement cela avec n'importe quel script PHP sur votre site, en ajoutant "/ foo". Ensuite, vérifiez si vous obtenez une erreur. Sachez que cela affecte les chemins CSS relatives pour le navigateur.
@Udo g: Comme je l'ai dit, j'utilise déjà une méthode qui modifie le nom du fichier réel sur un horodatage pour être du côté de sécurité (crée une nouvelle copie des fichiers finaux compressés / combinés). Cependant, je suis curieux: quel est le point de hachage le filemtime () avant de l'ajouter au nom du fichier? Pourquoi l'horodatage seul est-il suffisant?
..Parce que nous combinons généralement 20-30 fichiers ensemble et nous voulons envisager chaque fichier horodatage au lieu des derniers. Le hash est juste une méthode de réduction de la longueur de la chaîne de requête (au lieu de mettre chaque horodatage unique).
@Duo g: merci pour toutes vos contributions! J'apprécie vraiment cela, espérons que je n'ai pas quitté Snarfy :) C'est bon d'entendre que les gens le font et que je n'ai rien à craindre. Je veux laisser cela ouvert pour un autre jour ou deux et voir si quelqu'un d'autre a quelque chose à partager.
OK, voici vos réponses directes:
Il est impossible de vous donner une réponse beaucoup plus concrète car elle dépend un lot
+1 Intéressant sur le fichier ReadFile () vs @import .. C'est ce à quoi je m'attendais, mais @simonrjones n'est pas d'accord, et vous semblez certain. Je serais intéressé à lire davantage à ce sujet si vous avez des ressources à partager. Je sais que je divise vraiment les cheveux, mais c'est ce qu'est l'optimisation. Je voudrais sauter les étapes min / combines pour certains fichiers / groupes, mais craigné que l'utilisation de PHP pour les servirait peut avoir un impact négatif en quelque sorte. Je l'ai fait plusieurs fois auparavant, mais je ne suis pas au courant de chaque cas de bord. Merci pour les réponses.
Le seul impact négatif sur lequel je peux penser lors de l'utilisation de PHP est qu'il peut être réellement plus lent, mais cela dépend du nombre de fichiers, de leur taille et de votre installation PHP. Le seul moyen de clarifier est de comparer les deux méthodes dans la pratique. Selon votre projet, vous pouvez également avoir la possibilité de pré-combiner les scripts dans un fichier statique (c.-à-d. Le faire hors ligne). Quoi qu'il en soit, tout est question de vitesse et de gestion de projet et c'est à vous de peser les solutions.
Je voudrais ajouter une mise à jour à ce sujet: Si vous utilisez http2, il n'est pas nécessaire ou sage de hiérarchiser la réduction du nombre de demandes HTTP. Http2 permet aux demandes de se produire en parallèle et de combiner des fichiers genre de défaites le but de cela.
tandis que plus lent, un avantage / raison pourriez-vous avoir à le faire consiste à placer du contenu dynamique dans les fichiers du serveur, mais de les avoir toujours semblables à être JS ou CSS du point de vue du client.
Comme ceci par exemple , Passer l'environnement de PHP à JavaScript: P>
var environment = <?=getenv('APPLICATION_ENV');?>
// More JS code here ...
Je suis curieux pourquoi vous avez besoin d'en-têtes communs dans les fichiers CSS ou JavaScript. Je vois rarement des fichiers CSS / JS nécessitant des modifications lorsqu'il est servi au client. La plupart des PHP que je vois utilisés sur les fichiers HTML, même pour certains identifiants ou variables de configuration utilisés par votre code JavaScript sont généralement insérés dans les fichiers HTML au lieu de toucher les fichiers JavaScript.
Sauf si vous ne faites que l'ajout d'en-têtes, la mise en attente avec JS Files vous empêchera de les minier ou de les optimiser à l'aide de minificateurs, d'optimiseurs et de compilateurs. Pour CSS, en fonction des éléments dynamiques dont vous avez besoin pour ajouter (c'est pourquoi vous avez besoin de PHP), vous pouvez empêcher de compacter les fichiers CSS aussi. Vous perdez beaucoup plus que la surcharge de l'utilisation de PHP.
@Stephen Chung: Mettre le JS / CSS directement dans la source HTML signifie qu'il ne peut pas être mis en cache séparément du document HTML. Je me demandais également si vous utilisiez PHP pour définir des en-têtes comme expire et dernier mod du temps par "Emballage" dans PHP était une bonne idée. Je ne suis pas clair sur ce que vous entendez par «Muketing avec des fichiers vous empêche de les élever». Si j'envoie la sortie du fichier au ministère, cela ne doit pas faire une différence.
@Madmartigan, je ne suggère pas la fusion de CSS / JS dans votre HTML. Je ne fais que remarquer que vous n'avez vraiment pas besoin d'utiliser PHP avec les fichiers CSS / JS. Si vous envisagez de définir des dates d'expiration, etc. Pour eux, il devrait y avoir des moyens plus simples de le faire sur votre serveur Web.
@Stephen Chung: Bien que je conviens qu'il n'y ait aucun besoin , il y a certainement de nombreux avantages à utiliser PHP pour CSS / JS. Ma question est de savoir si il y a ou non des inconvénients, ce qu'ils sont, et si cela devrait être évité ou utilisé uniquement sur la situation.
@Madmartigan, bien un piège que je peux voir, c'est que, à chaque fois que vous modifiez votre fichier JS ou CSS, vous devez exécuter des minificateurs dessus, puis ajouter dans votre code PHP. C'est une étape supplémentaire, mais pas une grande partie d'une mauvaise chose, j'admets.