Partie de la série de sortie du Stylo.Bot Behaviour-Aware ASP.NET UI couvre le serveur-surface du tableau de bord remis; Trouver et régler une croissance sans limites couvre la discipline de fiabilité derrière l’État limité; Apprentissage pour devenir plus rapide couvre les travaux antérieurs d’adaptation-cache.

Comment livrer des réponses rapides pour des tableaux de bord complexes sans être dérangés? Vous cessez de les rendre sur le chemin de la demande.

Le problème: parM SK1request fan-out

Un tableau de bord est un type de page trompeurment coûteux.

Arrivée prochainement dans Stylo.Bot

Signal Shingle est l’architecture du tableaux de bord à venir. Le tableau de bord déployé ci-dessus est la surface courante. Sa forme multilatéraleM SK2 sa forme d’widget est le problème que ce design résout

L’opérateur voit un seul tableau de bord; le serveur voit des listes en direct et des vues à fenêtres coûteuses - les agrégats mobiles

flowchart TB
    P[One dashboard page] --> H[Headline counters]
    P --> T[Time-series chart]
    P --> B[Top bots]
    P --> E[Top content pages]
    P --> C[Countries / filters]
    H --> M[Shared hydrated page model]
    T --> M
    B --> M
    E --> M
    C --> M
    M --> S[Versioned widget shingles]
    S --> U[Independent HTMX OOB updates]

    classDef outline stroke:#cbd5e1,stroke-width:1.5px;
    classDef emphasis stroke:#38bdf8,stroke-width:2px;
    class P,H,T,B,E,C,M,S,U outline;
    class M,S,U emphasis;
    linkStyle default stroke:#94a3b8,stroke-width:1.3px;

L’application ASP.NET connue permet à chaque widget de saisir ses propres données , d’amorcer ces appels en parallèle , puis d’attendre tous ceux-ci avant de rendre la page

flowchart LR
    R[One page request] --> W1[Summary query]
    R --> W2[Time-series query]
    R --> W3[Countries query]
    R --> W4[Endpoints query]
    R --> W5[Bot query]
    W1 --> J[Task.WhenAll]
    W2 --> J
    W3 --> J
    W4 --> J
    W5 --> J
    J --> V[Render response]

    classDef outline stroke:#cbd5e1,stroke-width:1.5px;
    classDef danger stroke:#fb7185,stroke-width:2px;
    class R,W1,W2,W3,W4,W5,V outline;
    class J danger;
    linkStyle default stroke:#94a3b8,stroke-width:1.3px;

Il apparaît rapidement avec une personne et un petit ensemble de données: environ dix appels indépendants se chevauchent, donc la page prend approximativement aussi longtemps que son widget le plus lent plutôt qu'en somme.

À l’égard de la Stylo.Bot dashboard, une charge normale de page signifiait environ dix appels parallèles sur le site Web/bordon d’entréeM SK2 La vue quotidienne MSC3 pouvait parcourir plus d’un million de rangéesMska4 Une seule charge silencieuse était déjà multipleM Ska5secondeMka6 Sous un trafic concurrentM ska7 la pMske8 a passé sept secondes parce que chaque visiteur attendaitMSKA9 et commençait à fonctionnerMKA10 autour de dix opérations coûteusesMkka11

Le parallèle est utile. Par -request fan-out is the problemM SK3 À cinq téléspectateurs concurrentsMSC4 environ dix appels deviennent environ cinquante appels compétitifsMST5 A cinquant téléspectators il devient environ cinq cents MST6 Le bassin de connexions de la base de données voit une tempête croissante d’activités indépendantement coûteusesM ST7 Les demandes ralentissentM st8 maintiennent les connexions plus longtempsMst9 et ralentisent davantage les demandes suivantesMSt10

Fan parallèle-out permet de faire apparaître plus rapidement une seule demande en multipliant la pression qui détruit le système sous charge.

Ce n’est pas la bonne courbe d’échelle pour un tableaux de bord.

Pour Stylo, le tableau de bord est le plus précieux lors d’une survole ou d’un incident chez un robot.

La solution: Signal Shingle

Signal Shingle traite chaque widget du tableau de bord comme un pré-rended,automneM SK2contained page fragment . Son identité est celle des données qu'il représente et la façon dont il est renduMSC4 widgetMST5 ligneM ST6 fenêtreM st7 filtres et paramètres d'affichageMst8 La cadence de rafraîchissement n'est pas délibérément une partie de cette identitéMSt9

Son empreinte digitale est simplement widget + normalised parameters + data-surface generation. Une mise à jour de pays ne doit pas invalider une carte d’affichage en direct -viseurs; un filtre modifié ne devrait pas faire froid tous les autres widgets

Ces fragments vivent dans un cache LFU limité. Les lectures chaudes conservent les widgets surveillés résidents

SignalR indique une surface modifiée; le client demande la quantité de widgets affectés; HTMX applique le montant retourné Outre les fragments de bande avec Idiomorphe. Le signal porte un indice nuisible , jamais une copie des données du tableau de bord.

Dans le modèle, signal signifie “considérer la mise à jourM SK1 Établissement d'un réseau de distribution est le résultat adressable indépendamment.

L’architecture sépare le contrat de réponse du travail de réfrigération. La réponse est statique-commeM SK2une rapiditéMSC3un instantané cohérent depuis la cache . Le côté dynamique est un processus distinctMST5 budgétisé qui rafraîchère et fournit des fragments modifiés MST6 La charge peut ralentir le renouvellement sans ralentir la réponse à la pageM ST7

Rendre-Les seuls shingles à côté sont insuffisants. Si chaque erreur déclenche un nouveau scan de base de données , le travail coûteux reste en placeM SK3 Le signal Shingle utilise une cache de deux niveaux - avec une main délibérément étroite

flowchart LR
    D[Gateway<br/>authoritative events] --> B[Incremental window buckets<br/>data stays single-source]
    B --> C[Delivery cache 1<br/>hydrated page result]
    C --> S[Delivery cache 2<br/>versioned OOB widget HTML]
    S --> R[Request path<br/>read + Razor shell]

    T[Schedule tick/poll + LFU demand] --> W[Bounded prewarm waves]
    W --> B
    W --> C
    X[Coalesced SignalR dirty beacon] --> U[HTMX batch update]
    U --> S

    classDef outline stroke:#cbd5e1,stroke-width:1.5px;
    classDef emphasis stroke:#38bdf8,stroke-width:2px;
    class D,B,C,S,R,T,W,X,U outline;
    class C,S,W emphasis;
    linkStyle default stroke:#94a3b8,stroke-width:1.3px;

Caches de projection et de livraison des données

La distinction est faite entre un Modèle et son rendu unités de livraison des widgets. Aucun cache ne devient une autorité pour les données de détectionM SK1

Projection de données: boucles incrémentales

La passerelle est propriétaire des données. Elle contient une projection LFU de boucles à fenêtres incrémentales M SK3 dans la mémoire - en ce qui a trait à l’enveloppement, avec un ensemble de travail, et non un deuxième entrepôt de données.

Utiliser des buckets fins pour six -horaires et 24-charts d'heuresM SK2 roulement horaire pour les fenêtres longues . Le point est qu'une fenêtre demandée fusionne les buquets plutôt que de le répéter.

last 24 hours  → merge 288 five-minute buckets
last 30 days   → merge 720 hourly buckets

not

last 30 days   → scan and aggregate 1,000,000+ event rows again

Nouvelles observations mettent à jour la plus récente bucket. La partie historique n’est pas réexaminéeM SK1 parce qu’une page a été chargée . La passerelle demeure le seul écrivain et le seul endroit qui décide ce que signifie une détection.

Cache de livraison 1: le modèle du contenu hydraté

En amont, le site web cache les modèles de tableaux de bord hydratés , clé par un ensemble de widgets normalisésM SK2 fenêtre, filtres et générationMSC4 Il permet d’établir des liens entre les données authentiques et la traduction

Cacher un modèle plutôt que le HTML complet permet de conserver les valeurs du CSRF, chrome d'authentification , drapeaux et nonces des fonctionnalités sur la demandeM SK2 coque remise où elles appartiennent.

Sur une clé froide, retourner un état de réchauffement clair plutôt que de recomputer synchronement. Seul le matérialisateur tick obtient un nouveau résultat de pageM SK2 Les lectures ultérieures servent la dernière génération réussie , même alors qu’une nouvelle est en volMSC4

Cache de livraison 2: la cache de référence des chaînes

Le tableau de bord est délibérément divisé: la passerelle détient les données ; le site Web détient Razor et la relation avec le navigateurM SK2 Cache de livraison 2 sert des mises à jour mineures localement sans devenir un magasin de données concurrenteMSC4 il ne contient que des versions HTML dérivées de la passerellesMST5 modèle de page appuyéM ST6

Une fois que le modèle de page existe, un widget peut être rendu comme élément OOB et détenu dans la cache de sangle LFU délimitée avec une sécurité TTL. Un sangle chaud passe à côté tant de la composition qu’au rendering RazorM SK2 une erreur lit le résultat de page déjà -de page chaude lorsque possibleMSC4 ne rend que ce widget hx-swap-oob="morph", et stocke le résultat sous son empreinte digitale

Le point final du lot partitionne les widgets en empreintes digitales chaudes et erreurs.

Ce n'est pas un caching redundant. Cache de livraison 1 réponses “qui est le modèle cohérent du tableaux de bordM SK3 Caché de distribution MSC4 réponse MSC5que peut recevoir ce navigateur sur l'île DOMMSC6 La première rend la composition partagéeMST7 la seconde fait des mises à jour partielles presque gratuitesM ST8

Limite du cache: pourquoi ce n'est pas le caching de réponse

Le cache de réponse vaut la peine d’être comparé directement. Un cache normal de réponse stocke une réponse HTTP opaque; Des widgets cachés indépendamment développent des modes d’expiration et de défaillance indépendants . La page peut être chargée rapidement alors qu’elle ne décrit plus un état cohérent.

Les modèles de cache connus sont tous utiles. Ils protègent simplement les différentes frontières :

Niveau-2 shingles sont un cache de sortie, délibérément petit et fragmentéM SK1 en forme de . La différence est que les fragments ne déterminent pas la réalité des données indépendamment. Le modèle du contenu est constitué d’abord , sous une seule générationMSC5 chaque shingle est un rendering de ce modèle

flowchart LR
    D[One authoritative<br/>gateway dataset] --> G[Generation 184]
    G --> M[One hydrated<br/>page model]
    M --> H[Headline shingle<br/>generation 184]
    M --> T[Chart shingle<br/>generation 184]
    M --> B[Bot-list shingle<br/>generation 184]
    M --> C[Country shingle<br/>generation 184]
    H --> P[One coherent page]
    T --> P
    B --> P
    C --> P

    classDef outline stroke:#cbd5e1,stroke-width:1.5px;
    classDef emphasis stroke:#38bdf8,stroke-width:2px;
    class D,G,M,H,T,B,C,P outline;
    class G,M,P emphasis;
    linkStyle default stroke:#94a3b8,stroke-width:1.3px;

Lorsque les données changent, la composition affectée reçoit une nouvelle génération.1 Un navigateur peut voir brièvement celle précédente alors qu’une mise à jour est en vol.2 Mais cette âge est explicite et limité.3 Il n’est jamais un ensemble séparé de caches appartenant à - qui font des allégations contradictoires au sujet de “.

Une autorité, une génération composée, plusieurs fragments de livraison réutilisablesM SK2

SSR première, Amélioration progressive deuxième

Signal Shingle n'est pas une API JSON avec un client-le tableau de bord côté peint au-dessus de la partie supérieureM SK1Le tableau de commande Stylo.Bot est Razor SSR premier: compteurs significatifsM SK1 tableaux, tables , liens et navigation avant que JavaScript ne se démarque Établissement d'un système de gestion des ressources humaines puis améliorer cette page plutôt que de la remplacer.

flowchart LR
    R[GET dashboard] --> S[Razor SSR<br/>complete useful HTML]
    S --> V[Operator can read<br/>and navigate now]
    S --> H[HTMX enhancement]
    S --> A[Alpine enhancement]
    S --> G[SignalR enhancement]
    G --> D[Dirty beacon<br/>not dashboard JSON]
    D --> H
    H --> O[GET OOB widget batch]
    O --> W[Versioned HTML shingles]
    W --> M[HTMX / Idiomorph morph]
    A --> I[Local UI state<br/>menus, filters, affordances]

    classDef outline stroke:#cbd5e1,stroke-width:1.5px;
    classDef emphasis stroke:#38bdf8,stroke-width:2px;
    class R,S,V,H,A,G,D,O,W,M,I outline;
    class S,W,M emphasis;
    linkStyle default stroke:#94a3b8,stroke-width:1.3px;

La pile du navigateur

Razor Rendre la page sur le serveur. HTMX demandes et échanges HTML îles. SignalR porte de petits signaux de changement. Établissement d'un système de gestion des ressources humaines possède l'état d'interaction locale. Idiomorphe mise à jour d’une île tout en préservant des nodes DOM stables tels que l’état de concentration et de rotation.

Si vous en retirez une, la page SSR demeure utile; Ajouter les trois et elle gagne en temps réelM SK1 faible- mises à jour de bureauxMSC3

Pourquoi ce n'est pas un tableau de bord remis par le client-

La raison principale est simple: le tableau de bord doit être utile pour tous les clients sans nécessiter JavaScript . Un navigateur avec scripts désactivé, une connexion lenteM SK3 un client auxiliaireMSC4 un outil d’automatisation ou un crawler reçoit toujours des HTML significatifsMST5 des liensM ST6 des tables et des contrôles MST7 JavaScript améliore l’expérienceM st8 il ne s’agit pas du billet d’admissionMst9

Un client-le tableau de bord remis est bien adapté lorsque l’état d’application locale riche est le produit . Il laisserait ce tableau dépendant du JavaScript avant qu’il ne puisse montrer les donnéesM SK2 Il récréerait également la logique de composition dans le navigateur ou ferait coordonner les API des widgets du navigateur, en le transformant en un autre participant stable à la fraîcheurMSC4 les répétitionsMNK5 les erreurs et la cohérenceMRK6

Le design maintient le tableau de bord universel par défaut: les données et la composition des passerelles sur le serveur , l’affichage des pages sur le site web M SK2 et optionnels courtes - l'état d'interaction vivante dans le navigateur

Renouveler est un travail régulier, pas un effet secondaire accidentel du trafic

Le renouvellement se produit à l’extérieur de la page requise. Il s’agit d’une limite dure: une lecture froide retourne un résultat de réchauffementM SK2 tandis que seul le matérialisateur tick compose . La page requis est une lecture d’un projet cohérentMSC4 jamais une excuse pour commencer un travail coûteux sur les donnéesMNK5

Les coordonnateurs se sont rangés et, récemment, les enveloppes ont été lues. Task.WhenAll portant un nouveau nom.

La limite de coïncidence fait partie de la correction: le boucle refresh obtient un budget de capacité connuM SK1 jamais un ensemble sans limites de connexions. Une demande pleinement chaude n’a aucune composition ou rendering Razor à tout

Orchestre, non une tempêteM SK1 C’est la règle opérationnelle.

Préchauffage est couvert, non caching souhaité

Un cache ne peut pas protéger la première demande si elle se réchauffe seulement après que la demande arrive. Le matérialisateur a donc deux tâches. Défaults de pinnage conserver les choix de fenêtres réelles 6hM SK1 24h+, \7d et \ 30d chaudes Demande-enveloppes comptabilisées filtres de couverture que les gens utilisent réellement, classé par nombre d'accès et recevabilitéM SK1 Une seule demande réelle permet de garder une personne vivante.

flowchart TB
    P[Pinned default windows<br/>6h · 24h · 7d · 30d] --> Q[Warm queue]
    L[Recently read filtered views<br/>LFU hotness order] --> Q
    Q --> G{Tick budget<br/>still available?}
    G -->|yes| W[Bounded warm wave<br/>compose once, store model]
    G -->|no| N[Defer to next tick<br/>serve prior generation]
    W --> H[Delivery cache 1<br/>hydrated page model]
    H --> Z[Delivery cache 2<br/>rendered on demand]

    classDef outline stroke:#cbd5e1,stroke-width:1.5px;
    classDef emphasis stroke:#38bdf8,stroke-width:2px;
    class P,L,Q,G,W,N,H,Z outline;
    class Q,W,H emphasis;
    linkStyle default stroke:#94a3b8,stroke-width:1.3px;

Le préchauffage doit correspondre à la surface réelle du produit. Si l’interface offre quatre fenêtres normales et que le chauffeur en sait une, les trois quarts de la première fenêtre attendue -le chemin de clique est encore froidM SK3

LFU n’est pas seulement l’éviction: il est le signal de la demande

LFU est plus que l’évacuation ici. Accès est le signal de la demande: il décide ce qui reste résident , qui se rafraîchère d’abord par les travaux requisM SK3 et ce qui peut disparaître en toute sécuritéMSC4 Ce qui rend l’espace sans limites de filtre géréableMNK5 Un filtre de pays surveillé tout le jour demeure chaudMRK6 un filtre essayé une fois vieillissanteMMK7 Aucun autre MEK8 tableau de bord populaireMBK9 table nécessaireMZK10

Stabilité sous pression

Les tableaux live traditionnels réagissent à un plus grand trafic en faisant davantage de travail, alors ils deviennent moins utiles au point où les opérateurs les ont le plus besoin . Le signal Shingle inverse cette relation. Le contrôleur de rafraîchissement mesure le coût du rafraichement par rapport à un budgetM SK3 les cycles coûteux prolongent des intervalles efficacesMSC4 ceux peu coûteux contractent vers la cadence requiseMST5

refresh cost <= budget  → preserve requested cadence
refresh cost >  budget  → lengthen effective cadence
cost settles            → cautiously shorten it again

Il s’agit d’une boucle fermée sur la ressource protégée, pas de supposition du RPS brut. Sous charge, le système se déplace vers une prise de vue statique au lieu de créer davantage de travaux de base de données pour maintenir une promesse impossible de vitalité . StyloM SK3 Le Bot devient donc plus calme à mesure que l’incident prend de plus en plus d’ampleur

La charge rend le tableau de bord moins efficace, non plus. C'est pourquoi le modèle décroît plutôt que s'effondre

Il s’agit de la dernière projection cohérente connue.

Statique et dynamique par conception

La séparation ci-dessus donne au tableau de bord un contrat d'intervention rapide et un processus distinct de réfrigération budgétaire. Schémateur - contrôles dûment effectuésM SK2 accélération optionnelle SignalR pour les widgets en direct et raccorder resync maintenir le courant du côté dynamique. La réponse demeure rapide même lorsque la photo devient plus âgéeMSC4 et l'âge reste visibleMNK5

Ainsi, le système peut glisser continuellement entre deux modes utiles:

quiet / cheap refreshes       → dynamic dashboard, short effective cadences
busy / expensive refreshes    → static-like snapshot, longer declared cadences

Il s’agit d’une escalation adaptative intégrée à l’architecture.

La fraîcheur appartient au widget: une invariante non négociable

Non tous les widgets méritent la même fraîcheur. Un graphe de tendance ou un classement des points culminants peut être à quelques minutes ou une heure de retard ; Une liste des visiteurs récents ou des notes courantes a besoin d’une cadence plus étroite

Deux widgets visiblement identiques peuvent demander des cadences différentes. Mettre la cadence dans la clé de cache dupliquait les données

L'invariante est simple:

Une entrée de cache partagée ne doit jamais servir un staler que par l’un ou l’autre de ses consommateurs actifs demandés.

Formellement:

effective cadence(entry) = MIN(requested cadence of every active consumer)

Cadence est un consommateur par plancher, ne fait pas partie de la signatureM SK1 Si un consommateur demande 60 secondes et un autre pour cinq minutes M SK3 une entrée partagée rafraîchère chaque

Un consommateur actif est un court bail de demande renouvelable créé par une demande réelle.

Règles d'honnêteté et de cohérence en chrome

Un système adaptatif doit être honnête quant à son adaptation. Le chrome de widget montre la cadence efficace actuelleM SK1 “à jour tous les 60sMSC4 \“à date de toutes les données

Il faut quelques règles pour garder une projection honnête:

• Cotisations de génération. Chaque chunk/shingle enregistre la génération de données qu'il a construite à partir. Les balises et les timbreaux de génération des réponses sont comparés , afin que l'ancienne mise à jour ne puisse pas superscrire une vue plus récenteM SK3
• Signales couplés. Un détecteur chargé peut produire de nombreux événements par seconde. Le chemin du signal les batte en un seul faisceau polluant et une seule décision de renouveler plutôt que d’allumer le navigateur ou la boucle de réfrigération.
• Resync lors de la réconnexion. Un raccord n’est pas considéré comme une preuve que rien n’a été fait. Une vérification dueM SK1complete la manquante -déterministement l’écart de impulsion.
• Recul de TTL limité. Un morceau conservé n’est pas autorisé à devenir immortuel. Une fois qu’il dépasse la classe - il est lié à une impasse spécifique et ne peut se rafraîchir, il devient froidM SK3 il se réchauffe plutôt que de reposer silencieusement pour toujoursMSC4
• Aucune fuite de contenu. Les shingles vivants peuvent contenir des noms, empreintes digitales ou cotes de pointe. Leur contenu demeure en mémoireM SK2 ne sont pas enregistrés , et tout diagnostic les rédige par défaut

Il s’agit d’une projection dont l’âge et la génération sont limités.

Avantages et échanges

Les avantages sont structurels: latence stable des demandes, génération de pages cohérente d’une seule pageM SK2 travail partagé pour les vues populaires , et SSR utile sans JavaScriptMSC4 Sous pressionMST5 le système sert une projection plus ancienne honnête au lieu de transformer chaque vue de page en plus de pression dans la base de donnéesM ST6

Les coûts sont réels. Cette architecture ajoute un échéancier, les clés de cacheM SK2 le suivi de la génération , les contrats de location et l’observabilité qu’un contrôleur normal n’a pas besoin d’observerMSC4 Une vue filtrée à froid peut montrer un état de réchauffement avant qu’elle ne devienne vivanteMST5 Les opérateurs doivent choisir des limites acceptables de fraîcheur plutôt que de prétendre que chaque surface a besoin de données réelles MST6 les données de temps M ST7 Chaque réplique du site Web a également besoin de son propre cache limité et de son signal de renouvellementM ST8 le contenu du cache est délibérément localM st9 il ne s’agit pas d’une nouvelle autorité partagée M st10

Il est mal adapté pour une application structurée profondément personnalisée où chaque réponse est unique, ou pour une surface qui exige vraiment de l’utilisateur que tous les changements soient visibles immédiatement.

Signal Shingle compose des pièces d’ASP connues.NET : un LFU, SignalRM SK3 composition en battementsMSC4 RazorMNK5 HTMX et un calendrier avec un budget de convergence réelleMRK6 La passerelle demeure authentiqueMMK7 le site web dessert une projectionMBK8 le navigateur reçoit des fragments de petites versionsMGK9

Le tableau de bord demeure rapide parce que l’observation n’entraîne plus les calculs.