Comment H5+C3 optimise l'interface front-end

Cette fois, je vais vous montrer comment optimiser l'interface front-end avec H5+C3. Quelles sont les précautions pour optimiser l'interface front-end avec H5+C3. Ce qui suit est un cas pratique. , jetons un coup d'oeil.

L'optimisation du front-end du site Web est quelque chose qui intéresse de nombreuses personnes maintenant, et c'est également une tâche nécessaire pour de nombreuses personnes maintenant. Alors, comment utiliser HTML et CSS pour une meilleure optimisation front-end ? L'article suivant vous apporte quelques conseils sur l'optimisation front-end. Si vous êtes intéressé, découvrons-le ensemble.

Contenu Web

Réduire le nombre de requêtes http

La majeure partie du temps de réponse du site Web est consacrée au téléchargement de ressources Web. Les ressources font référence ici à : images, CSS, JS et Flash, etc. Réduire le nombre de demandes dont nous parlons ici est la clé pour raccourcir les délais de réponse.

D'une manière générale, il peut être divisé en deux types :

La première consiste à réduire le nombre de demandes en simplifiant la conception des pages.

Deuxièmement, les scripts ou fichiers CSS plus complexes sur les pages Web peuvent utiliser plusieurs scripts ou les regrouper dans un seul fichier. Les images utilisent des Sprites CSS (technologie d'épissage d'images) pour combiner plusieurs images en une seule, puis utilisent CSS pour contrôler où afficher. l'image, réduisant ainsi le nombre de requêtes. Pour ce contenu, vous pouvez vous référer au Positionnement CSS dans la section ci-dessous sur JD.com.

Évitez les sauts de page

Quel est le but d’éviter les sauts de page ? Autrement dit, lorsque le client reçoit la réponse sautée du serveur, il renvoie la demande en fonction de l'adresse spécifiée par l'emplacement dans la réponse du serveur. En d'autres termes, la redirection 301

couramment utilisée en SEO. Par exemple :

Maintenant, je veux que les étudiants qui visitent l'ère du code source entrent sur le forum du code source. Voici comment implémenter la redirection 301 côté serveur

. Réécrire le moteur activé

RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//C'est l'adresse demandée par le client

RewriteRule ^(.*)$ http://bbs.itsource.cn/$1 [R=301,L]//Il s'agit de la page Web réellement vue par le client

Chargement paresseux

Le chargement paresseux dont nous parlons ici nécessite que nous sachions d'abord quel est le plus petit contenu initialement chargé sur la page Web, et le contenu restant peut être implémenté à l'aide du chargement paresseux.

La plus typique est que Javascript peut retarder le chargement du contenu. Cette méthode consiste d'abord à s'assurer que la page Web peut bien afficher l'effet de page normal sans javascript lors du développement de la page Web, puis à en compléter une partie en retardant le processus. chargement du script. Effets fonctionnels avancés.

Chargement en avant

Cette méthode est juste à l'opposé de la méthode ci-dessus, ce qui signifie que certaines ressources de la page Web sont chargées à l'avance. Elle est divisée en trois catégories :

. 1. Chargement anticipé inconditionnel

Cette méthode consiste à charger un autre contenu immédiatement après le chargement de la page Web. Par exemple, Taobao chargera des images combinées une fois le chargement terminé

. 2. Chargement conditionnel

Déduisez le contenu qui doit être chargé en fonction des informations saisies par l'utilisateur, telles que la recherche Baidu.

Chargement comme prévu

C'est un peu plus avancé. Cette situation se produit généralement lorsqu'une page Web est repensée. En raison du comportement d'accès de l'utilisateur, il existe un cache local de l'ancienne page Web, mais le concepteur ne peut pas le pré-ajouter. une partie du cache vers l'ancienne page Web. Le contenu peut être utilisé dans le nouveau site Web. Dans ce cas, la nouvelle page Web téléchargera d'abord certaines ressources dans la zone locale.

Réduire le nombre d'éléments DOM

S'il y a trop d'éléments dans la page Web, cela affectera également les performances de la page Web, et cela augmentera également la charge de la page Web et l'exécution du script. Vous pouvez y penser lorsque nous l'utilisons habituellement. JS, si nous voulons obtenir certains effets, devons-nous d'abord trouver les informations pertinentes sur l'élément DOM, puis effectuer les opérations associées ? S'il y a trop d'éléments dans notre page Web, y aura-t-il un décalage horaire très évident ? Par conséquent, la réduction du nombre d’éléments DOM affecte toujours les performances des pages Web.

Divisez le contenu selon le nom de domaine

Souvent, lorsque nous examinons d'autres grands sites Web, l'adresse de l'image est différente du nom de domaine principal du site Web, et plusieurs noms de domaine sont utilisés pour stocker les ressources associées. Alors pourquoi sont-ils utilisés de cette manière ? En fait, les navigateurs imposent généralement des restrictions sur le nombre de connexions de téléchargement pour le même nom de domaine. La division du contenu téléchargé en fonction des noms de domaine peut indirectement augmenter le nombre de connexions de téléchargement parallèles dans le navigateur. Améliore considérablement la capacité globale des ressources de téléchargement du site Web. Obtenant ainsi l’effet d’optimisation des performances.

Réduire le nombre d'iframes

Auparavant, nous avons expliqué comment utiliser iframe, mais dans les projets réels, veuillez prêter attention à ses avantages et inconvénients lors de son utilisation.

Avantages :

Peut être utilisé pour charger du contenu plus lent, les scripts peuvent être téléchargés en parallèle

Inconvénients :

Utiliser une iframe avec du contenu vide consommera également du temps de chargement et empêchera la page de se charger

Évitez le 404

404 est une ressource de serveur commune introuvable. Premièrement, elle affecte l'expérience utilisateur et ouvre une page qui renvoie des informations inutiles. Deuxièmement, un script externe doit être chargé dans la page Web et un 404 est renvoyé. Cela bloque non seulement le téléchargement d'autres scripts, mais le client analysera également le contenu téléchargé (404) en tant que Javascript.

CSS

Épinglez la feuille de style en haut

Étant donné que le contenu Web est chargé de haut en bas, nous faisons de notre mieux pour mettre des styles CSS dans l'en-tête de la page Web pour accélérer le chargement de la page Web. Ceci est très important pour les pages Web avec beaucoup de contenu, du moins ce sera le cas. ne fait pas attendre les utilisateurs pour une page. Sur un écran blanc, cette expérience utilisateur est également assez bonne.

Si nous plaçons la feuille de style en bas, il y aura une situation dans laquelle le navigateur refusera d'afficher la page Web téléchargée, car la plupart des navigateurs s'efforcent d'éviter de la redessiner lors de sa mise en œuvre. C'est donc aussi un point important.

Évitez les expressions CSS

Certains amis familiers avec CSS3 de base ont toujours admiré sa puissante capacité d'ouverture et aiment utiliser certaines expressions CSS pour définir dynamiquement les propriétés CSS. Il est pris en charge dans IE5 ~ IE8 et les expressions seront ignorées dans d'autres navigateurs.

Le problème avec les autres expressions CSS est qu'elles sont recalculées beaucoup plus de fois que nous le pensons. Nous essayons donc d'éviter de les utiliser pour éviter une surcharge de performances excessive causée par une utilisation inappropriée.

Utilisez la balise de lien au lieu de @import

Dans la conception des pages Web, essayez d'utiliser des balises de lien pour référencer CSS et évitez d'utiliser @import. La raison est très simple. Vous pouvez comprendre qu'il s'agit simplement de mettre le style CSS au bas du contenu de la page Web. .

Photo

Optimiser les images

Dans la production de pages Web, nous constaterons que les images telles que les bannières se chargent très lentement et affectent également la vitesse du site Web, allant de quelques centaines de Ko à quelques mégaoctets. Y a-t-il donc de la place pour l’optimisation de telles images ? ?

Aujourd'hui, j'aimerais vous présenter une plateforme d'optimisation d'images. C'est Zhitu.com

vers laquelle les designers se tournent souvent. Comme vous pouvez le constater, la différence entre l'image originale et l'image optimisée (Smart Image) est supérieure à 500K. Si pour un site Web contenant de nombreuses images, nous optimisons toutes les images de l'ensemble du site, alors vous pouvez imaginer, c'est ainsi. beaucoup de trafic sera économisé ! Je recommande donc fortement ces optimisations d’images.

Évitez les src d'image vide

Lorsque nous utilisons la balise img , essayez d'éviter d'utiliser un src d'image vide, car un src d'image vide amènera toujours le navigateur à envoyer une requête au serveur, ce qui est une perte totale de temps et de ressources du serveur. . Surtout lorsque votre site Web est visité par de nombreuses personnes chaque jour, les dommages causés par de telles demandes vides ne peuvent être ignorés

Optimiser le Sprite CSS

Disposez les images horizontalement dans Spirite, tandis que la disposition verticale augmentera la taille du fichier

 ; Dans Spirite, combiner des couleurs rapprochées peut réduire le nombre de couleurs. La situation idéale est inférieure à 256 couleurs afin de s'adapter au format PNG8

; Ne laissez pas de grands espaces au milieu de l’image de l’Esprit. Cela n'augmente pas beaucoup la taille du fichier, mais nécessite moins de mémoire pour que l'agent utilisateur décompresse l'image en une carte de pixels.

Ne redimensionnez pas les images en HTML

Évitez d'utiliser de grandes images pour redimensionner l'image afin qu'elle s'adapte à la page. Si vous avez besoin d'une petite image, utilisez simplement une petite image. La raison est très simple. Il peut obtenir le meilleur effet pour différents appareils, au lieu de charger de grandes images pour obtenir l'effet global, cette dépense est encore assez importante. ère de site Web ciblé.

Utilisez un favicon.ico petit et pouvant être mis en cache

Généralement, les sites Web d'entreprise ou les webmasters aiment ajouter un fichier d'icône favicon.ico Que votre serveur l'ait ou non, le navigateur tentera de demander cette icône. Nous devons donc nous assurer que cette icône existe et que le fichier est aussi petit que possible, de préférence inférieur à 1k. Définir un délai d'expiration long

. Résumé :

Enfin, cet article s'adresse principalement aux webdesigners débutants. Le contenu de cet article ne concerne que le HTML, le CSS, le Javascript, les images, etc. Bien entendu, il existe d'autres méthodes, que nous soulignerons dans le prochain article.

Bien sûr, avez-vous reçu certains des conseils d’optimisation front-end courants mentionnés ci-dessus ? Veuillez ne pas avoir d'erreurs similaires à celle-ci dans votre page Web, sinon cela affectera vraiment l'expérience utilisateur. Après tout, c'est l'ère du WEB2.0 Si les utilisateurs ne sont pas satisfaits de votre page Web, c'est bien. Négatif pour les développeurs, donc afin de créer des pages Web meilleures et plus remarquables, nous accordons autant d'attention que possible à ces petits détails.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser les liens H5

Comment utiliser le formatage de texte H5

H5+C3+JS pour obtenir des effets de saut au sol

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!