SSR AvecCSR

1.SSR

(Server Side Rendering) ：Méthodes de rendu traditionnelles,La page complète rendue par le serveur au client.Cela réduit le nombre de fois que le client passe au serveurhttpDemande,Accélérer la vitesse correspondante,.Généralement utilisé pour optimiser les performances du premier écran.Réduction d'une demande de données,Parce qu'une fois que vous avez demandé, la page rendue est retournée au client,EtCSRC'est vous qui accédez d'abord au serveur,Obtenir la correspondancehtmlFichier retourné au client,Vous devez également envoyer une demande au serveur pour obtenir les données correspondantes,Rendre les données sur le client.

1.1SSRLes avantages de

    Par exempleSEO–(Optimisation des moteurs de recherche)Parce que l'accès à une demande,Retour à la page entièreHTMLStructure,Contient toutes les données à présenter,Donc, par exemple, un moteur de recherche ou un crawler récupère des données,Et capable de faire des statistiques sur le nombre de clics sur un lien,Comme Baidu

Actuellement utiliséMV*Projets architecturaux,La plupart sont des séparations avant et arrière,Les données sont générées dynamiquement,C'est pas bon.SEOOptimisation EtSSRPour une haute performance de rendu du premier écran–La page du premier écran est chargée depuis le serveur,Demande de traitement de données indépendamment de l'interface avec le serveur;

1.2 SSRLes inconvénients de

Les performances dépendent toutes du serveur Le développement de l'interface frontale n'est pas très opérable

2.CSR

CSR(Client Side Rendering)：Est une méthode de rendu actuellement populaire,Il dépend de l'exécution du clientJS, La première fois qu'un utilisateur envoie une demande, il n'obtient qu'une petite partie de l'orientation HTMLCode. La deuxième demande demandera plus de HTMLStringJSDocumentation. Deux demandes seront envoyées

2.1CSRLes avantages de

FPLe plus rapide Meilleure expérience client , Parce qu'avant que les données ne soient mises à jour , Les cadres de page et les éléments sont disponibles à domProduit, .Ainsi, la page ne saute pas lorsque l'utilisateur clique sur l'action ,Juste à traversjs Page d'action

FP：Un seul. div Noeud racine.ParVUEPar exemple,div#app Enregistrer un vidediv FCP：Cadre de base contenant les pages,Mais il n'y a pas de contenu de données.ParVUEPar exemple,ChaquetemplateDansdivCadre,Correspondant àVUECycle de viemounted FMP：Contient tous les éléments et données de la page.ParVUEPar exemple, Affichage complet de la page après la mise à jour des données à la page via l'interface ;Correspondant àVUEDans le cycle de vie deupdated

Bref, C'est l'épissage des données. HTML La question des chaînes de caractères fait la différence entre le serveur et le client .

2.2 CSRInconvénients

C'est pas bon.SEO– Les données sur les reptiles sont mauvaises. ~~ La vitesse globale de chargement est lente

3.Différences entre les deux

L'avantage du rendu côté serveur est le bloc de vitesse de rendu du premier écran , En termes simples, il n'a pas besoin de faire des allers - retours répétés entre le client et le serveur . Mais de nombreux facteurs, comme sa performance, influencent l'expérience utilisateur ,Par exemple,：Vitesse du réseau, Nombre de personnes actives en ligne , Emplacement physique du serveur, etc . Le rendu client est l'inverse du rendu serveur , Le chargement du premier écran est lent en raison d'interactions multiples avec le serveur . Mais une fois ces demandes complétées , L'expérience utilisateur est beaucoup mieux lorsque l'utilisateur interagit avec la page .

Pour prendre un exemple de vie réelle ： Si vous achetez à manger dans un supermarché ,ParSSRDu point de vue, Chaque fois que vous achetez au supermarché, mangez et partez , Chaque fois que vous avez faim, vous devez aller au supermarché .Et deCSRDu point de vue, C'est que vous achetez beaucoup de matières premières au supermarché et que vous les ramenez à la maison pour les cuisiner vous - même , Plus de réfrigérateur. , De cette façon, chaque fois que vous avez faim, vous n'avez pas besoin de courir au supermarché à chaque fois , Le seul problème est que vous devez prendre le temps de choisir les ingrédients .

  Optimisation des performances des pages Web

      Optimiser le chargement du premier écran ,Réduire le temps d'écran blanc, Améliorer les performances de chargement ： 2、 Accélération ou diminution HTTP Demande de perte ：UtiliserCDN Charger la Bibliothèque publique , Utiliser un cache fort et négocier un cache , Utiliser la convergence des noms de domaine , Utilisation de petites images Base64Remplacer,UtiliserGetDemande au lieu dePostDemande,Paramètres Access-Control-Max-Age Réduire les demandes de pré - inspection , .Utilisez votre navigateur lorsque vous sautez à l'intérieur d'une page vers un autre nom de domaine ou demandez des ressources pour un autre nom de domaine prefetch Pré - analyse, etc. ; 3、Chargement différé： Bibliothèques non essentielles 、 Chargement différé de l'image hors premier écran ,SPA Chargement paresseux des composants, etc. ; 4、 Réduire le volume du contenu demandé ：Activer le serveurGzipCompression,JS、CSSFusion par compression de fichiers,DiminutioncookiesTaille,SSR Sortie directe après rendu HTMLAttendez.; 5、Principes de rendu du navigateur：Optimiser les chemins de rendu critiques, Réduire au minimum le blocage du rendu JS、CSS; 6、 Optimiser l'expérience d'attente des utilisateurs ： L'écran blanc utilise la barre de progression de chargement 、loadingFig.、 Remplacement de l'écran squelettique, etc. ;

1.Cache fort et cache de négociation

Un cache fort est utiliséhttpDansExpiresEtCache-ControlDeux champs pour contrôler,Temps de cache utilisé pour représenter la ressource Négocier le cache：La première fois qu'un navigateur demande une ressource,Serveur retournéheaderAjouterLast-Modify,Etag,Last-modifyEst l'heure à laquelle la ressource a été modifiée pour la dernière fois;Lorsque le navigateur demande à nouveau la ressource,requestL'en - tête de la demande pour contientIf-Modify-Since,La valeur est retournée avant le cacheLast-Modify.Reçu par le serveurIf-Modify-SinceAprès,Déterminer si le cache a été touché ou non en fonction de la dernière modification de la ressource;Parmi euxEtag：webLorsque le serveur répond à une demande,Indique au navigateur l'identité unique de la ressource actuelle sur le serveur, Et la deuxième fois

Access-Control-Max-Age： Quand le cache peut être mis en cache

Face avant par httpMécanisme de mise en cache：Cache fort（expiresEtcache-control）、Négocier le cache（Etag/If-None-MatchEtLast-Modified/If-Modified-Since）_Silam LinBlog de-CSDNBlogs_Négocier le cache

2.Une pagewebApplication 

SPA Un seulWebApplication de la page,Est de charger un seulHTMLPage et mise à jour dynamique de la page lorsque l'utilisateur interagit avec l'applicationWebApplication, Est une application qui fonctionne dans un navigateur , La page ne sera pas rechargée pendant l'utilisation . Comme toutes les applications , Il est conçu pour aider les utilisateurs dans leurs tâches ,Par exemple,“Documentation”Ou“GestionWebServeur”

SPA_mongkey_kingBlog de-CSDNBlogs_spa

 3. Divergence des noms de domaine et convergence des noms de domaine

Nom de domaine divergent Le nom de domaine divergent est de briser la limite du Navigateur pour le nombre de demandes simultanées pour le même nom de domaine , Demander plusieurs noms de domaine pour le même service en utilisant le nom de domaine divergent , Pour augmenter la concurrence dans une certaine mesure ;Bien sûr., Parce que l'établissement d'une nouvelle demande exige un certain coût , Par conséquent, la divergence des noms de domaine et la convergence des noms de domaine doivent être effectuées. trade off, En général, le nombre de noms de domaine dispersés est 2-4- Oui.;

Convergence des noms de domaine .La convergence des noms de domaine consiste à placer des ressources statiques sous un nom de domaine sans divergence , Il s'agit principalement de répondre aux besoins de développement du terminal mobile ;En généralDNS C'est une opération coûteuse , Et l'extrémité mobile en raison de la largeur de bande du réseau et du temps réel 、 Limites des ressources, etc. , Ces frais généraux sont mortels pour l'expérience utilisateur du mobile , La convergence des noms de domaine est donc nécessaire ;

Le nom de domaine divergent est pc Pour profiter de la capacité de téléchargement parallèle multithreadé du navigateur . Et la convergence des noms de domaine avec les terminaux mobiles ,Amélioration des performances,Parce quedns L'analyse est une analyse itérative de l'arrière vers l'avant , Si vous avez trop de noms de domaine, les performances peuvent être réduites ,AjouterDNSFrais généraux de résolution pour.

DNS Pré - analyse： Le navigateur met en cache le nom de domaine de la page lors du chargement de la page , De cette façon, vous n'avez pas besoin de cliquer sur la connexion dans la page actuelle DNSAnalyse de,Réduire les temps d'attente des utilisateurs,Améliorer l'expérience utilisateur.