यदि आप केवल प्रदर्शन के बारे में परवाह करते हैं, तो इस धागे में अधिकांश सलाह गलत है, और एसपीए युग में अधिक से अधिक गलत हो रही है, जहां हम यह मान सकते हैं कि पृष्ठ जेएस कोड के बिना बेकार है। मैंने एसपीए पृष्ठ लोड समय को अनुकूलित करने और विभिन्न ब्राउज़रों के साथ इन परिणामों को सत्यापित करने में अनगिनत घंटे बिताए हैं। अपने HTML को पुन: ऑर्केस्ट्रेट करके बोर्ड के प्रदर्शन में वृद्धि के साथ, काफी नाटकीय हो सकता है।
सर्वश्रेष्ठ प्रदर्शन पाने के लिए, आपको पृष्ठों को दो-चरण वाले रॉकेट के रूप में सोचना होगा। ये दो चरण मोटे तौर पर <head>
और <body>
चरणों के अनुरूप हैं, लेकिन इनकी बजाय <static>
और के रूप में सोचते हैं <dynamic>
। स्थैतिक भाग मूल रूप से एक स्ट्रिंग स्थिरांक है जो आप प्रतिक्रिया पाइप को जितना संभव हो उतना तेजी से नीचे धकेलते हैं। यह थोड़ा मुश्किल हो सकता है यदि आप कुकीज़ को सेट करने वाले बहुत सारे मिडलवेयर का उपयोग करते हैं (इनको http सामग्री भेजने से पहले सेट करने की आवश्यकता होती है), लेकिन सिद्धांत रूप में यह प्रतिक्रिया बफर को फ्लश कर रहा है, उम्मीद है कि कुछ टेम्प्लेटिंग कोड (रेजर, php, ph) में कूदने से पहले आदि) सर्वर पर। यह मुश्किल लग सकता है, लेकिन फिर मैं इसे गलत समझा रहा हूं, क्योंकि यह तुच्छ के पास है। जैसा कि आप अनुमान लगा सकते हैं, इस स्थिर हिस्से में सभी जावास्क्रिप्ट सम्मिलित और इनवॉइस होने चाहिए। यह कुछ इस तरह दिखेगा
<!DOCTYPE html>
<html>
<head>
<script>/*...inlined jquery, angular, your code*/</script>
<style>/* ditto css */</style>
</head>
<body>
<!-- inline all your templates, if applicable -->
<script type='template-mime' id='1'></script>
<script type='template-mime' id='2'></script>
<script type='template-mime' id='3'></script>
चूँकि इस हिस्से को तार के नीचे भेजने के लिए आपके बगल में कुछ भी खर्च नहीं होता है, आप उम्मीद कर सकते हैं कि क्लाइंट को आपके सर्वर से कनेक्ट होने के बाद यह लगभग 5ms + लेटेंसी के आसपास मिलना शुरू हो जाएगा। मान लिया जाए कि सर्वर यथोचित रूप से बंद है यह विलंबता 20ms से 60ms के बीच हो सकती है। ब्राउजर मिलते ही इस सेक्शन को प्रोसेस करना शुरू कर देगा और प्रोसेसिंग टाइम आमतौर पर फैक्टर 20 या उससे अधिक के ट्रांसफर टाइम पर हावी हो जाएगा, जो कि अब आपके <dynamic>
हिस्से के सर्वर-साइड प्रोसेसिंग के लिए एमॉर्टाइज्ड विंडो है ।
ब्राउज़र के लिए लगभग 50ms लगते हैं (क्रोम, बाकी शायद 20% धीमी) इनलाइन jquery + सिग्नलर + कोणीय + एनजी + चेतन + एनजी टच + एनजी मार्गों + लॉश को संसाधित करने के लिए। यह अपने आप में बहुत अद्भुत है। अधिकांश वेब ऐप में उन सभी लोकप्रिय पुस्तकालयों की तुलना में कम कोड होते हैं, लेकिन मान लें कि आपके पास बस उतना ही है, इसलिए हम क्लाइंट पर विलंबता + 100ms प्रसंस्करण जीतेंगे (यह विलंबता जीत दूसरे ट्रांसफर चंक से आती है)। जब तक दूसरा हिस्सा आता है, हमने सभी js कोड और टेम्प्लेट संसाधित कर लिए हैं और हम डोम ट्रांसफॉर्म को निष्पादित करना शुरू कर सकते हैं।
आपको लगता है कि यह विधि टोलिंग अवधारणा के ऑर्थोगोनल है, लेकिन ऐसा नहीं है। यदि आप, inlining के बजाय, सीडीएन या अपने स्वयं के सर्वर से लिंक करते हैं तो ब्राउज़र को एक और कनेक्शन (एस) और देरी निष्पादन को खोलना होगा। चूंकि यह निष्पादन मूल रूप से नि: शुल्क है (जैसा कि सर्वर साइड डेटाबेस से बात कर रहा है) यह स्पष्ट होना चाहिए कि इन सभी जंपों को बिल्कुल नहीं कूदने की तुलना में अधिक खर्च होगा। अगर वहाँ एक ब्राउज़र quirk कहा गया था कि बाहरी जेएस तेजी से निष्पादित करता है हम माप सकते हैं कि कौन सा कारक हावी है। मेरे माप से संकेत मिलता है कि अतिरिक्त अनुरोध इस स्तर पर प्रदर्शन को मारते हैं।
मैं एसपीए ऐप्स के अनुकूलन के साथ बहुत काम करता हूं। लोगों के लिए यह सोचना आम है कि डेटा वॉल्यूम एक बड़ी बात है, जबकि सत्यता में, और निष्पादन अक्सर हावी होता है। जिन सूचीबद्ध पुस्तकालयों को मैंने सूचीबद्ध किया है उनमें 300kb तक का डेटा है, और यह सिर्फ 68 kb gzipped है, या 200 मी 2 मी 3 जी / 4 जी फोन पर डाउनलोड होता है, जो बिल्कुल विलंबता है कि यह एक ही फोन पर ले जाएगा यदि यह जांचने के लिए कि क्या समान डेटा था इसके कैश में पहले से ही, भले ही यह प्रॉक्सी कैश किया गया हो, क्योंकि मोबाइल विलंबता कर (फोन-टू-टॉवर-विलंबता) अभी भी लागू होता है। इस बीच, डेस्कटॉप कनेक्शन जिनके पास पहले-पहले विलंबता कम होती है, उनमें आमतौर पर उच्च बैंडविड्थ होता है।
संक्षेप में, अभी (2014), यह सभी लिपियों, शैलियों और टेम्पलेट्स को इनलाइन करने के लिए सबसे अच्छा है।
EDIT (MAY 2016)
जेएस अनुप्रयोगों के बढ़ने के लिए जारी है, और मेरे कुछ पेलोड अब 3+ मेगाबाइट की न्यूनतम कोड तक ढेर हो गए हैं, यह स्पष्ट हो रहा है कि बहुत कम से कम सामान्य पुस्तकालयों में अब इनलेट नहीं होना चाहिए।