# सिग्नल शिंगल1 उच्च निष्पादन ASP2 नेट बहुविज़ेट साइटों के लिए एक नया वास्तुकला **आप बिना पागल हो जाने के जटिल dashboards के लिए तेजी से प्रतिक्रियाएं कैसे प्रदान करते हैं** [TOC] --- ## समस्या यह एक यूआरएल की तरह दिखता है, लेकिन यह वास्तव में एक रचना इंजन है जो एक पृष्ठ धारण करता है ![एक डेस्प्लेट डैशवेयर: सारांश कंटर्स, एक समयM SK2 श्रेणी चार्टMSC3 बोट सूचीMST4 अंतबिंदु और देश दृश्य सभी एक पृष्ठ साझा करते हुए स्वतंत्र अद्यतन सतहों को बनाए रखते हैं](/articleimages/signal-shingle-dashboard.jpeg) ऑपरेटर एक dashboard को देखता है। ```mermaid 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 क्रियान्वयन में प्रत्येक विजेट अपने डेटा लेता है ```mermaid 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; ``` यह एक व्यक्ति और एक छोटी डेटासेट के साथ तेजी से दिखता है : नौ स्वतंत्र कॉलों को एक दूसरे में मिलाया जाता है | , | इसलिए पृष्ठ को उनके योग की बजाय इसकी सबसे धीमी विजेट के रूप में लगभग उतना ही समय लगता है \ . | जब पृष्ठ लोकप्रिय हो जाता है तो अंकगणित परिवर्तन होते हैं पर [स्टिलियो](https://stylo.bot) 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 अकेले अपर्याप्त हैं. यदि प्रत्येक चूक एक नए डाटाबेस स्कैन ट्रिगर करता है तो , महंगा काम बचा रहता है। ```mermaid flowchart LR D[Gateway
authoritative events] --> B[Incremental window buckets
data stays single-source] B --> C[Level 1 : content cache
hydrated page result] C --> S[Level 2 : shingle cache
versioned OOB widget HTML] S --> R[Request path
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 : वृद्धित्मक बकेट गेटवे डेटा का स्वामित्व रखता है। छह के लिए सूक्ष्म बकेट का उपयोग करें ```text 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 चिंगल्स *हैं* एक आउटपुट कैश ```mermaid flowchart LR D[One authoritative
gateway dataset] --> G[Generation 184] G --> M[One hydrated
page model] M --> H[Headline shingle
generation 184] M --> T[Chart shingle
generation 184] M --> B[Bot-list shingle
generation 184] M --> C[Country shingle
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 नहीं है। ```mermaid flowchart LR R[GET dashboard] --> S[Razor SSR
complete useful HTML] S --> V[Operator can read
and navigate now] S --> H[HTMX enhancement] S --> A[Alpine enhancement] S --> G[SignalR enhancement] G --> D[Dirty beacon
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
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 दो कार्य है **पिन्ड डिफ़ॉल्ट** वास्तविक विंडो विकल्प गर्म रखें **मांग** कवर फिल्टर लोग वास्तव में उपयोग करते हैं ```mermaid flowchart TB P[Pinned default windows
6h · 24h · 7d · 30d] --> Q[Warm queue] L[Recently read filtered views
LFU hotness order] --> Q Q --> G{Tick budget
still available?} G -->|yes| W[Bounded warm wave
compose once, store model] G -->|no| N[Defer to next tick
serve prior generation] W --> H[Level 1 content cache] H --> Z[Level 2 shingle cache
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 यहाँ निष्कासन से अधिक है। --- ## स्थिर की ओर अनुकूल पारंपरिक लाइव डेस्प्लेट अधिक कार्य करते हुए अधिक ट्रैफिक के प्रति प्रतिक्रिया देते हैं। ```text refresh cost <= budget → preserve requested cadence refresh cost > budget → lengthen effective cadence cost settles → cautiously shorten it again ``` यह सुरक्षित संसाधन पर एक बंद लूप है। > लोड करता है Dashboard कम काम करते हैं “स्थैतिक” असफल नहीं है। ### डिज़ाइन द्वारा एक स्थिर यंत्र स्थिर आधा प्रतिक्रिया संविदा है | : | एक तीव्र |, | कैश स्तरों से सुसंगत स्न्यापसॉट | . | गतिशील आधा एक अलग बजटित प्रक्रिया है \ : | अनुसूचक |- | देय जाँचों द्वारा चलाया गया | एमSK5 | जीवंत विजेट के लिए वैकल्पिक सिग्नल आर त्वरण | मस्क6 | और एक पुनर्संयोजित पुनः समन्वयन |मस्क7 | प्रतिक्रिया जल्दी रहती है जब भी स्न्याप्च अधिक पुराना हो जाता है इस तरह सिस्टम दो उपयोगी मोडों के बीच लगातार स्लाइड कर सकता है ```text quiet / cheap refreshes → dynamic dashboard, short effective cadences busy / expensive refreshes → static-like snapshot, longer declared cadences ``` कि वास्तुकला में निर्मित अनुकूलन स्केलिंग है --- ## ताजगी विजेट से संबंधित है एक non-negotiable invariant हर विजेट एक ही ताजगी का हकदार नहीं है. एक प्रवृत्ति ग्राफ या अंतिम बिंदु वरीयता मिनट या एक घंटे पीछे हो सकती है। वर्ग | विशिष्ट विज़ेट | | | बेस कैडेन्स || | क्यों |---|---|---:|---| संकलित | सारांश | लाइब्रेरी | | | हाल ही में आने वाले |, | सत्र | МSK3 | नाम | मस्क4 | अंक | एमस्क5 | खतरे |मस्क6 | एक मिनट के आसपास | मास्क7 | ऑपरेटर वर्तमान गति की खोज कर रहा है दो दृश्य रूप से समान विजेट विभिन्न कैडेन्स के लिए पूछ सकते हैं अपरिवर्ती सरल है > एक साझा कैश प्रविष्टि कभी भी अपने सक्रिय उपभोक्ताओं के अनुरोध से अधिक स्टेलार को सेवा नहीं देनी चाहिए औपचारिक रूप से ```text 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 नेट टुकड़े बनाता है। रेंडरिंग को अनुरोध पथ से बाहर ले जाएँ