आप बिना पागल हो जाने के जटिल dashboards के लिए तेजी से प्रतिक्रियाएं कैसे प्रदान करते हैं

समस्या

यह एक यूआरएल की तरह दिखता है, लेकिन यह वास्तव में एक रचना इंजन है जो एक पृष्ठ धारण करता है

ऑपरेटर एक dashboard को देखता है।

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;

परिचित ASP.NET क्रियान्वयन में प्रत्येक विजेट अपने डेटा लेता है

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;

यह एक व्यक्ति और एक छोटी डेटासेट के साथ तेजी से दिखता है : नौ स्वतंत्र कॉलों को एक दूसरे में मिलाया जाता है | , | इसलिए पृष्ठ को उनके योग की बजाय इसकी सबसे धीमी विजेट के रूप में लगभग उतना ही समय लगता है \ . | जब पृष्ठ लोकप्रिय हो जाता है तो अंकगणित परिवर्तन होते हैं

पर स्टिलियो Dashboard, एक सामान्य पृष्ठ लोड का अर्थ लगभग वेबसाइट के ऊपर नौ समानांतर कॉल है। Task.WhenAll लगभग दस महंगे ऑपरेशनों और प्रत्येक दर्शक एक और दस शुरू कर रहा था

समांतरता उपयोगी है।

समांतर पंखा-- बाहर एक एकल अनुरोध को लोड के तहत सिस्टम को नष्ट करने वाले दबाव को गुणा करके तेजी से दिखता है

यह एक dashboard के लिए गलत scaling वक्र है।

समाधान: सिग्नल शिंगल

सिग्नल शिंगल प्रत्येक dashboard औज़ार को पहले के रूप में व्यवहार करता है।

इसकी अंगुली छाप बस है widget + normalised parameters + data-surface generation. एक देश अद्यतन एक जीवित को अवैध नहीं बनाना चाहिए।

ये खंड बाधित LFU कैश में रहते हैं

सिग्नलआर का कहना है कि एक सतह बदल गया है; क्लाइंट प्रभावित विजेट बैच के लिए पूछता है ; एचटीएमएस प्रतिफलित बाहर लागू करता है-\of\M SK3\band fragments with Idiomorph.\ The signal carries a dirty hint\MSC5\ never a copy of the dashboard data\MST6\

पैटर्न में संकेत का अर्थ है “प्रारंभ करने के बारे में सोचें शिंगल स्वतंत्र रूप से पता योग्य परिणाम है

रेंडर-साइड shingles अकेले अपर्याप्त हैं. यदि प्रत्येक चूक एक नए डाटाबेस स्कैन ट्रिगर करता है तो , महंगा काम बचा रहता है।

flowchart LR
    D[Gateway<br/>authoritative events] --> B[Incremental window buckets<br/>data stays single-source]
    B --> C[Level 1 : content cache<br/>hydrated page result]
    C --> S[Level 2 : shingle cache<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;

दो कैश स्तर : डाटा प्रामाणिक रहता है

भिन्नता एक रचना के बीच है नमूना और उसके प्रतिपादित विजेट वितरण इकाई. किसी भी कैश का पता लगाने के लिए अधिकार नहीं बनता

परत 1 : वृद्धित्मक बकेट

गेटवे डेटा का स्वामित्व रखता है।

छह के लिए सूक्ष्म बकेट का उपयोग करें

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

नया अवलोकन नवीनतम बकेट को अद्यतन करता है. ऐतिहासिक भाग फिर से नहीं स्कैन किया गया है क़्योंकि एक पृष्ठ लोड किया गया था

कैश स्तर 1 : हाइड्रोटेड सामग्री कैश

उपस्ट्रीम, वेबसाइट हाइड्रोटेड डैशवॉल मॉडलों को कैश करती है।

एक मॉडल को पूरा HTML के बजाय कैशिंग करता है CSRF मानों को रखता है

एक ठंडे कुंजी पर,\केवल टिक मैटिरियलाइजर ही नए पृष्ठ परिणाम का अर्जन करता है.\अंतिम पठन नवीनतम सफल पीढ़ी को सेवा देता है\ ,\जब भी नया एक उड़ान में होता है

कैश स्तर 2 : स्िंगल रेंडर कैश

Dashboard को जानबूझकर विभाजित किया गया है : गेटवे डेटा का स्वामित्व रखता है

एक बार एक पृष्ठ मॉडल मौजूद है, एक औजार को OOB तत्व के रूप में रेंडर किया जा सकता है और एक सुरक्षित TTL के साथ सीमाबद्ध LFU shingle कैश में रखा जाता है। hx-swap-oob="morph", और परिणाम अपने अंगुली छाप के नीचे भंडारित करता है

बैच अंतबिंदु विज़ेटों को गर्म अंगुलियों के छापें और चूक में विभाजित करता है।

यह redundant caching नहीं है।

कैश सीमा: क्यों यह प्रतिक्रिया कैश नहीं है

प्रतिक्रिया कैशिंग प्रत्यक्ष रूप से तुलना करने के लिए उपयुक्त है. एक सामान्य प्रतिक्रिया कैस एक अपारदर्शी HTTP जवाब को भंडारित करता है।

पसंदीदा कैशिंग पैटर्न सभी उपयोगी हैं

पैटर्न | क्या यह भंडारित करता है |---|---|---|---| HTTP प्रतिक्रिया कैश क्रें | डोनट | - | छेद |/ | आंशिक कैश | МSK3 | गतिशील छिद्रों के साथ एक कैश शेल | एमएसके4 | या स्वतंत्र रूप से कैश किए गए खंड | मएसके5 | पृष्ठ जिनका क्रोम स्थिर है और जिनकी छोटी गतिशील क्षेत्र वास्तव में स्वतंत्र हैं। | सिग्नल शिंगल | | | एक हाइड्रोटेड |, | जेनरेशन | - | स्टांपेड पृष्ठ मॉडल और संस्करणित विजेट वितरण खंड | एमस्क4 | यह डैशबोर्ड जिसके भागों को स्वतंत्र रूप से अद्यतन किया जाना चाहिए और एक स्थिति को वर्णन करने के लिए जारी रखें | कैश सीमा संगठित प्रक्षेप है

स्तर-2 चिंगल्स हैं एक आउटपुट कैश

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;

जब डेटा परिवर्तन होते हैं, तब प्रभावित संरचना एक नई पीढ़ी को प्राप्त करती है।

एक प्राधिकृति, एक संगठित प्रौद्योगिकी

SSR पहला-,-प्रगामी वृद्धि दूसरा

सिग्नल शिंगल एक क्लाइंट के साथ JSON API नहीं है।

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;

एचटीएमएस HTML के लिए पूछता है और वापसी द्वीप को बदल देता है।

ताजा करना एक अनुसूचित कार्य है, ट्रैफिक का एक दुर्घटनात्मक गौण प्रभाव नहीं

पृष्ठ अनुरोध के बाहर Refresh होता है।

समन्वयक कतारों को चिपकाया गया और हाल ही में। Task.WhenAll एक नया नाम पहनते हुए

समवर्ती सीमा सहीता का हिस्सा है : रिफ्रेश लूप एक ज्ञात क्षमता बजट प्राप्त करता है

Orchestrated, not a storm. यह कार्यात्मक नियम है

पूर्व वार्मिंग कवरेज है

एक कैश प्रथम अनुरोध को सुरक्षित नहीं कर सकता है यदि यह केवल गर्म होता है बाद कि अनुरोध आ जाता है . तो materializer दो कार्य है पिन्ड डिफ़ॉल्ट वास्तविक विंडो विकल्प गर्म रखें मांग कवर फिल्टर लोग वास्तव में उपयोग करते हैं

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[Level 1 content cache]
    H --> Z[Level 2 shingle cache<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;

पूर्व वार्मिंग वास्तविक उत्पाद सतह से मिलना चाहिए. यदि यूआई चार सामान्य विंडो प्रदान करता है और वार्मर एक जानता है

LFU केवल निर्वासन नहीं है : यह मांग संकेत है

LFU यहाँ निष्कासन से अधिक है।

स्थिर की ओर अनुकूल

पारंपरिक लाइव डेस्प्लेट अधिक कार्य करते हुए अधिक ट्रैफिक के प्रति प्रतिक्रिया देते हैं।

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

यह सुरक्षित संसाधन पर एक बंद लूप है।

लोड करता है Dashboard कम काम करते हैं

“स्थैतिक” असफल नहीं है।

डिज़ाइन द्वारा एक स्थिर यंत्र

स्थिर आधा प्रतिक्रिया संविदा है | : | एक तीव्र |, | कैश स्तरों से सुसंगत स्न्यापसॉट | . | गतिशील आधा एक अलग बजटित प्रक्रिया है \ : | अनुसूचक |- | देय जाँचों द्वारा चलाया गया | एमSK5 | जीवंत विजेट के लिए वैकल्पिक सिग्नल आर त्वरण | मस्क6 | और एक पुनर्संयोजित पुनः समन्वयन |मस्क7 | प्रतिक्रिया जल्दी रहती है जब भी स्न्याप्च अधिक पुराना हो जाता है

इस तरह सिस्टम दो उपयोगी मोडों के बीच लगातार स्लाइड कर सकता है

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

कि वास्तुकला में निर्मित अनुकूलन स्केलिंग है

ताजगी विजेट से संबंधित है एक non-negotiable invariant

हर विजेट एक ही ताजगी का हकदार नहीं है. एक प्रवृत्ति ग्राफ या अंतिम बिंदु वरीयता मिनट या एक घंटे पीछे हो सकती है।

दो दृश्य रूप से समान विजेट विभिन्न कैडेन्स के लिए पूछ सकते हैं

अपरिवर्ती सरल है

एक साझा कैश प्रविष्टि कभी भी अपने सक्रिय उपभोक्ताओं के अनुरोध से अधिक स्टेलार को सेवा नहीं देनी चाहिए

औपचारिक रूप से

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

कैडेन्स एक प्रति - उपभोक्ता है फर्शहस्ताक्षर का हिस्सा नहीं है।

ईमानदार क्रोम और सुसंगतता नियम

एक अनुकूलन प्रणाली को अपने अनुकूलन के बारे में सच्ची होना चाहिए।

एक प्रोजेक्ट को ईमानदारी रखने के लिए कुछ नियमों की आवश्यकता है

• उत्पादन स्टैंप प्रत्येक खंड/शिंगल यह डेटा उत्पादन अभिलेखित करता है कि यह इस से बनाया गया था।
• समन्वयित संकेत एक व्यस्त डिटेक्टर से प्रति सेकंड में कई घटनाएं उत्पन्न हो सकती हैं. संकेत पथ ब्राउज़र या रिफ्रेश लूप को फायरहोस करने के बजाय उन्हें एक गंदे बीकन और एक रिफ्रेच निर्णय में बैच करता है
• पुनः कनेक्शन पर पुनः समन्वयन करें. पुनः कनेक्शन का यह प्रमाण नहीं माना जाता कि कुछ भी नहीं हुआ है
• सीमाबद्ध TTL अपवर्तन. एक बनाए गए टुकड़े को अमर होने की अनुमति नहीं दी जाती
• कोई सामग्री लीक नहीं लाइव शिंगल्स में नाम शामिल हो सकते हैं।

यह एक प्रक्षेपण है जिसकी आयु और पीढ़ी सीमाबद्ध हैं

समस्या और समाधान

यहाँ एक तालिका में पूरा व्यापार है

क्रें |---|---|---| पृष्ठ अनुरोध | आरंभ करता है एन डेटा लेता है और प्रतीक्षा करता है डेटा कार्य | प्रति आगंतुक बार दोहराता है विजेट अद्यतन | प्रत्येक विजेट स्वतंत्र रूप से ले जा सकता है प्रतियोगिता Task.WhenAll ट्रैफिक के साथ विस्तार करता है | मापित लागत बजट के साथ सीमाबद्ध रिफ्रेश तरंगों | फ़िल्टर किए गए दृश्य | | | Either uncached or unbounded || | Hot combinations stay live | МSK3 | cold ones LFU लोड प्रतिक्रिया | अधिक ट्रैफिक से अधिक काम पैदा करता है | ताजगी | अप्रत्यक्ष और प्रायः असंगत | विफल मोड | | | धीमी अनुरोध |, | पूल समाप्ति |

सिग्नल शिंगल से परिचित एपीएसपी0 नेट टुकड़े बनाता है।

रेंडरिंग को अनुरोध पथ से बाहर ले जाएँ