Comments (3)
ACTLEM
commented on August 11, 2024
A voir si finalement il ne s'agit pas d'une modification de https://github.com/cnumr/best-practices/blob/main/chapters/BP_010_fr.md?
from best-practices.
tbroyer
commented on August 11, 2024
Hmm, pas vraiment. L'idée ici est surtout de stocker localement "l'arche de navigation" de la page (entête / pied de page) et pouvoir ne récupérer auprès du serveur que la "partie utile" de la page.
Les entêtes / pied de page pourraient être inline dans le service worker (même si ce ne serait pas forcément très efficient), et/ou pourraient à l'inverse ne pas être "mises en cache" autrement que le cache HTTP standard (i.e. sans utiliser la Cache Storage API)
C'est indépendant de la mise en cache local du contenu et/ou des assets (autrement que le cache HTTP standard)
Si je regarde greenit.fr par exemple, en comparant la page d'accueil et une page "article" (pretty-printed par les Chrome Dev Tools pour faciliter la comparaison), mis à part des métadonnées qui n'intéresseront grosso modo que les site scrapers (une trentaine de lignes: OpenGraph, Twitter Card, link rel=alternate), les seuls différences dans le <head> (sur 160 à 190 lignes) seront le <title> et un script pour les related posts. Ensuite, le <body> a des class="" différentes, idem pour une entrée de menu (mais ça n'influence même pas son affichage a priori), mais sinon on retrouve la même chose dans les 2 pages (80 lignes quasi-identiques). Ensuite vient le contenu à proprement parler ("partie utile"). Et enfin le pied de page, 110–120 lignes quasiment identiques: les différences sont un script d'analytics et les commentaires Discus (12 lignes en plus dans la page d'article). Le contenu de l'article fait une centaine de lignes.
En déplaçant les parties spécifiques à chaque page en dehors des entêtes / pieds de page, on pourrait donc facilement réutiliser une grande partie de la page, en ne changeant que le "milieu", et donc la "composer" dynamiquement en concaténant les 3 parties : deux qui ne changent pas d'une page à l'autre, et qu'on aura mis en cache, et une autre récupérée auprès du serveur, bien plus petite que la page totale. Pour l'article en question, on économiserait entre 2/3 et 3/4 sur le transfert réseau ! (à condition d'avoir déjà récupéré le service worker, l'entête et le pied de page)
On économise aussi des ressources serveur puisque l'entête et le pied de page n'ont pas besoin d'être "rendus" (par un template) pour chaque page.
On concède par contre 3 requêtes supplémentaires (service worker, entête et pied de page, qu'on espère amortir par la suite ; il ne faudrait idéalement récupérer l'entête et le pied de page qu'à la demande, donc seul le service worker serait une "perte nette" sur une visite d'une seule page), un peu d'espace de stockage (pour la mise en cache, mais ça reste minime) et un peu de traitements (dans le service worker lui-même).
(désolé pour la tirade, je m'en sert également comme une prise de note 😉)
from best-practices.
ACTLEM
commented on August 11, 2024
Ok, c'est plus clair la manière dont va être écrite cette BP. Merci beaucoup d'avoir pris le temps de détailler :-)
from best-practices.
Related Issues (20)
- Suppression BP #55 HOT 2
- Modification BP #75
- Modification BP #85
- [NEW] Limiter le nombre d'appels aux API HTTP
- Modification BP #11
- Modification BP #15
- Modification BP #13
- Modification BP #98
- [NEW]
- Mettre à jour les identifiants V4 dans les bonnes pratiques
- Mettre en avant toute la liste des contributeurs HOT 1
- Ajouter des avertissements sur les différences avec la version imprimée HOT 3
- [NEW] 115 best practices in Japanese version HOT 2
- Define the process for the internationalization of best practices HOT 4
- Create a PDF with the content
- Modification BP #
- Bonjour HOT 1
- Pourquoi Github ? HOT 1
- Modification BP 4019# HOT 3
- Modification BP 003 fr : Correction typo
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from best-practices.