interface Web
js tutoriel
Comment nodejs implémente le chargement asynchrone des pages bigpipe
Comment nodejs implémente le chargement asynchrone des pages bigpipe
Cet article partage avec vous une solution pour utiliser nodejs combiné avec bigpipe pour charger des pages de manière asynchrone et constitue également une orientation pour l'optimisation future des performances front-end.
Présentation de Bigpipe
La première solution de chargement de page asynchrone de Facebook qui réduit les requêtes HTTP et charge rapidement le premier écran. Il s'agit d'une direction pour l'optimisation des performances frontales.
Comparaison entre BigPipe et AJAX
AJAX est principalement XMLHttpRequest Le front-end demande au serveur de manière asynchrone d'obtenir des données dynamiques et de les ajouter à la page Web. De telles requêtes aller-retour prennent du temps et la technologie BigPipe n'a pas besoin d'envoyer des requêtes XMLHttpRequest, ce qui permet de gagner du temps. Un autre avantage de la réduction des requêtes est une réduction directe de la charge du serveur. Une autre différence est que le serveur attend avant la requête AJAX. La page est en attente après la demande. BIGPIPE peut fonctionner en parallèle sur les front-ends et back-ends, ce qui apporte également des améliorations d'efficacité.
Inconvénients de Bigpipe
Problèmes de référencement. Le contenu d'affichage dynamique de Facebook est principalement constitué de pages personnalisées orientées client. Les exigences en matière de référencement ne sont pas élevées. Et si la technologie BIGPIPE est utilisée sur Taobao, les problèmes de référencement seront évidents. Je ne sais pas dans quelle mesure Baidu prend en charge la recherche de ce type de page dynamique. En fait, il y aura également ce problème lors de l'utilisation d'ANGULARJS pour lier dynamiquement des données. , les pages ayant des besoins en matière de référencement doivent soigneusement réfléchir à l'opportunité d'utiliser la technologie BIGPIPE. (On sait que la recherche GOOGLE est optimisée pour le référencement d'ANGULAR.) Quant à Baidu -. -Regardez l'image ci-dessous pour connaître
Implémentation de NODEJS
js introduit par la page bigpipe.js
var Bigpipe=function(){
this.callbacks={};
}
Bigpipe.prototype.ready=function(key,callback){
if(!this.callbacks[key]){
this.callbacks[key]=[];
}
this.callbacks[key].push(callback);
}
Bigpipe.prototype.set=function(key,data){
var callbacks=this.callbacks[key]||[];
for(var i=0;i<callbacks.length;i++){
callbacks[i].call(this,data);
}
}
Code du serveur app.js
var express = require('express');
var path = require('path');
var http = require('http');
var ejs = require('ejs');
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.get('/index.html', function (req, res) {
res.render('index', { title: "测试" }, function (err, str) {
res.write(str)
})
var Pagelets_list ={
pagelet1:false,
pagelet2:false
}
var data = {is: "true"};
function is_end(Pagelets) {
Pagelets_list[Pagelets]=true;
for (x in Pagelets_list) {
if(!Pagelets_list[x]){
return;
}
}
res.end();
return;
}
function Pagelets(Pagelets) {
res.write('<script>bigpipe.set("' + Pagelets + '",' + JSON.stringify(data) + ');</script>');
is_end(Pagelets)
}
setTimeout(function(){Pagelets("pagelet1");},1000);
setTimeout(function(){Pagelets("pagelet2");},3000);
});
http.createServer(app).listen(3000);Code frontal index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>zchq88-bigpipe</title>
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p id="test1">loading......</p>
<p id="test2">loading......</p>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script src="/js/bigpipe.js"></script>
<script>
var bigpipe=new Bigpipe();
bigpipe.ready('pagelet1',function(data){
$("#test1").html("test1 ready");
})
bigpipe.ready('pagelet2',function(data){
$("#test2").html("test2 ready");
})
</script>
</body>
</html>Résumé
En fait, la mise en œuvre spécifique de la technologie Bigpipe nécessite la coopération du code serveur Lors du développement, j'ai l'impression que les fonctions comptent pour 20%. , et l'optimisation représente 80 % de la charge de travail. Optimisation La difficulté est souvent plus élevée que le développement. Une éventuelle compréhension de la pile complète est également requise. Alors maintenant, nodejs en tant que couche intermédiaire qui sépare les extrémités avant et arrière est une solution que je pense personnellement plus raisonnable. Si le front-end et le back-end complètent la séparation de la couche intermédiaire de nodejs, la mise en œuvre de la technologie Bigpipe sera une optimisation que le front-end pourra réaliser indépendamment. Améliorez le temps de chargement du premier écran. Et l'amélioration du temps de chargement de l'ensemble de la page Web aura un certain effet sur l'augmentation du nombre de vues.
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Introduction à Node.js se connectant à postgreSQL et effectuant des opérations sur les données
nodejs utilise ztree pour se déplacer entre deux divs
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Nodejs est-il un framework backend ?
Apr 21, 2024 am 05:09 AM
Node.js peut être utilisé comme framework backend car il offre des fonctionnalités telles que des performances élevées, l'évolutivité, la prise en charge multiplateforme, un écosystème riche et une facilité de développement.
Comment connecter Nodejs à la base de données MySQL
Apr 21, 2024 am 06:13 AM
Pour vous connecter à une base de données MySQL, vous devez suivre ces étapes : Installez le pilote mysql2. Utilisez mysql2.createConnection() pour créer un objet de connexion contenant l'adresse de l'hôte, le port, le nom d'utilisateur, le mot de passe et le nom de la base de données. Utilisez connection.query() pour effectuer des requêtes. Enfin, utilisez connection.end() pour mettre fin à la connexion.
Quelle est la différence entre les fichiers npm et npm.cmd dans le répertoire d'installation de nodejs ?
Apr 21, 2024 am 05:18 AM
Il existe deux fichiers liés à npm dans le répertoire d'installation de Node.js : npm et npm.cmd. Les différences sont les suivantes : différentes extensions : npm est un fichier exécutable et npm.cmd est un raccourci de fenêtre de commande. Utilisateurs Windows : npm.cmd peut être utilisé à partir de l'invite de commande, npm ne peut être exécuté qu'à partir de la ligne de commande. Compatibilité : npm.cmd est spécifique aux systèmes Windows, npm est disponible multiplateforme. Recommandations d'utilisation : les utilisateurs Windows utilisent npm.cmd, les autres systèmes d'exploitation utilisent npm.
Y a-t-il une grande différence entre nodejs et java ?
Apr 21, 2024 am 06:12 AM
Les principales différences entre Node.js et Java résident dans la conception et les fonctionnalités : Piloté par les événements ou piloté par les threads : Node.js est piloté par les événements et Java est piloté par les threads. Monothread ou multithread : Node.js utilise une boucle d'événements monothread et Java utilise une architecture multithread. Environnement d'exécution : Node.js s'exécute sur le moteur JavaScript V8, tandis que Java s'exécute sur la JVM. Syntaxe : Node.js utilise la syntaxe JavaScript, tandis que Java utilise la syntaxe Java. Objectif : Node.js convient aux tâches gourmandes en E/S, tandis que Java convient aux applications de grande entreprise.
Nodejs est-il un langage de développement back-end ?
Apr 21, 2024 am 05:09 AM
Oui, Node.js est un langage de développement backend. Il est utilisé pour le développement back-end, notamment la gestion de la logique métier côté serveur, la gestion des connexions à la base de données et la fourniture d'API.
Quelle est la relation entre nodejs et npm ?
Apr 21, 2024 am 06:09 AM
Node.js est un environnement d'exécution JavaScript et npm est son gestionnaire de packages. Les deux travaillent ensemble pour permettre aux développeurs d'écrire des programmes côté serveur en JavaScript, d'utiliser des modules tiers et de gérer facilement les modules.
Comment connecter nodejs à mycat
Apr 21, 2024 am 06:16 AM
Étapes pour connecter MyCAT à Node.js : installez la dépendance mycat-ts. Créez un pool de connexions, spécifiez l'hôte, le port, le nom d'utilisateur, le mot de passe et la base de données. Utilisez la méthode de requête pour exécuter des requêtes SQL. Utilisez la méthode close pour fermer le pool de connexions.
Pour quels projets nodejs est-il adapté ?
Apr 21, 2024 am 05:45 AM
Node.js convient aux types de projets suivants : Applications réseau et serveur Applications basées sur des événements Applications en temps réel Applications gourmandes en données Outils et scripts en ligne de commande Microservices légers
