लिंक करने के बजाय HTML में स्टाइल / स्क्रिप्ट एम्बेड क्यों नहीं करें?

Question

हम HTTP अनुरोधों की संख्या को कम करने के लिए सीएसएस और जावास्क्रिप्ट फ़ाइलों को संक्षिप्त करते हैं, जिससे प्रदर्शन में सुधार होता है। परिणाम HTML इस तरह है:

<link rel="stylesheet" href="all-my-css-0fn392nf.min.css">
<!-- later... -->
<script src="all-my-js-0fn392nf.min.js"></script>

अगर हमें सर्वर-साइड / बिल्ड लॉजिक हमारे लिए यह सब करने के लिए मिला है, तो क्यों नहीं इसे एक कदम आगे बढ़ाया जाए और HTML में उन संक्षिप्त शैलियों और लिपियों को एम्बेड किया जाए?

<style>.all{width:100%;}.my{display:none;}.css{color:white;}</style>
<!-- later... -->
<script>var all, my, js;</script>

यह दो कम HTTP अनुरोध है, फिर भी मैंने इस तकनीक को व्यवहार में नहीं देखा है। क्यों नहीं?

Comments

मैं कैशिंग को दोष देता हूं।

Answer 1

क्योंकि जब आप कैशिंग को तोड़कर इसे प्राप्त करते हैं तो HTTP अनुरोधों को सहेजना बहुत कम काम आता है। यदि स्टाइलशीट और स्क्रिप्ट को अलग-अलग परोसा जाता है, तो उन्हें बहुत अच्छी तरह से कैश किया जा सकता है और कई अलग-अलग पेजों पर कई अनुरोध किए जा सकते हैं। यदि वे एक ही एचटीएमएल पेज में निहित हैं, तो उन्हें हर एक के साथ फिर से प्रसारित करना होगा। एक। निवेदन।

इस पृष्ठ का HTML, उदाहरण के लिए अभी 13 KB है। सीएसएस के 180 केबी ने कैश मारा, और इसी तरह जेएस के 360 केबी। दोनों कैश हिट ने समय के साथ मामूली मात्रा में लिया और व्यावहारिक रूप से कोई बैंडविड्थ नहीं ली। अपने ब्राउज़र के नेटवर्क प्रोफाइलर को व्हिप करें और इसे कुछ अन्य साइटों पर आज़माएँ।

Comments

यदि आप एक ही पृष्ठ ऐप स्टाइल साइट कर रहे हैं, तो कोड का विशाल बहुमत एक पृष्ठ के लिए विशिष्ट था तो यह अभी भी कुछ समझ सकता है?

— जॉन

जॉन: यदि पृष्ठ पर केवल एक बार जाया जाता है, तो हाँ। यदि कई बार दौरा किया गया है, तो सभी एम्बेडेड सामान सिर्फ एक बार और कैश किए गए के बजाय कई बार प्रसारित होते हैं।

— कोनरक

ध्यान देने की एक और अच्छी बात यह है कि इन्हें अलग से परोसने से आप संसाधनों के खनन की अनुमति देते हैं ताकि वे आकार में छोटे हो जाएँ।

— maple_shaft

@maple_shaft कृपया विस्तृत करें, आप संसाधनों को सामान्य के रूप में छोटा क्यों नहीं कर सकते और फिर उन्हें शामिल कर सकते हैं?

@ जॉन्ब सीडीपीएन या आईएसपी में स्थानीय कैशिंग के प्रभावों को नहीं भूलता है। Google की संभावना के लिए जावास्क्रिप्ट के लिए मेरा अनुरोध कभी भी Google तक नहीं पहुंचता है, भले ही मुझे स्थानीय रूप से कैश की कमी हो, क्योंकि एक अन्य व्यक्ति जो उसी isp का उपयोग करता है, वह पहले से ही isp को डेटा कैश करने का कारण बना होगा।

Answer 2

केवल इसलिए कि वेब प्रदर्शन वास्तव में मायने रखता है! 99% बार यह आपको तेजी से अंतिम-उपयोगकर्ता प्रतिक्रिया समय देगा।

वेलोसिटी कॉन्फिडेंस के कुछ एग्जाम्स यहां दिए गए हैं।

• बिंग - एक पेज जो 2 सेकंड धीमा था, जिसके परिणामस्वरूप राजस्व / उपयोगकर्ता में 4.3% की गिरावट आई।
• Google - 400 मिलीसेकंड देरी से खोजों / उपयोगकर्ता में 0.59% की गिरावट हुई।
• याहू ! - 400 मिली सेकेंड की मंदी के कारण फुल-पेज ट्रैफ़िक में 5-9% की गिरावट आई।
• शॉपज़िला - 5 सेकंड में अपनी साइट को गति देने से रूपांतरण दर 7-12% बढ़ गई, खोज इंजन विपणन से सत्रों की संख्या दोगुनी हो गई, और आवश्यक सर्वरों की संख्या आधे में कट गई।
• मोज़िला - अपने लैंडिंग पेजों को 2.2 सेकंड में शेविंग करने से डाउनलोड रूपांतरणों में 15.4% की वृद्धि हुई, जिसका अनुमान है कि वे हर साल 60 मिलियन अधिक फ़ायरफ़ॉक्स डाउनलोड करेंगे।
• नेटफ्लिक्स - एक एकल अनुकूलन, गज़िप संपीड़न को अपनाना, जिसके परिणामस्वरूप 13-25% स्पीडअप होता है और उनके आउटबाउंड नेटवर्क ट्रैफ़िक में 50% की कटौती होती है।

स्टीव सौडर्स से, वेब प्रदर्शन अनुकूलन में अग्रणी,

अंतिम-उपयोगकर्ता प्रतिक्रिया समय का 80-90% सीमा पर खर्च किया जाता है - पहले यहां शुरू करें।

बाहरी फ़ाइलों का उपयोग करने से तेज़ पृष्ठ उत्पन्न होते हैं क्योंकि जावास्क्रिप्ट और सीएसएस फ़ाइलें ब्राउज़र / नेटवर्क / प्रॉक्सी द्वारा कैश की जाती हैं (जैसा कि कैश हेडर के साथ HTTP प्रोटोकॉल में परिभाषित किया गया है)। HTML डॉक्यूमेंट में हर बार डाउनलोड होने वाले HTML डॉक्यूमेंट में जावास्क्रिप्ट और सीएसएस इनस्टॉल होते हैं। यह उन HTTP अनुरोधों की संख्या को कम करता है जिनकी आवश्यकता होती है, लेकिन HTML दस्तावेज़ का आकार बढ़ाता है। यदि आप Jquery जैसी स्क्रिप्ट्स का उपयोग कर रहे हैं, तो 300 KB स्क्रिप्ट्स को फिर से लिखना आसान है और यह विश्वास न करें कि सभी के पास कम विलंबता के साथ 100 MBits / s बैंडविड्थ है, जो एक एकल एप्लिकेशन-ब्राउज़र चला रहा है- जो आपकी वेब साइट पर खोला गया है। 99% बार यह आपको तेजी से अंतिम-उपयोगकर्ता प्रतिक्रिया समय देगा।

जिस आवृत्ति के साथ बाह्य जावास्क्रिप्ट और सीएसएस घटकों को HTML दस्तावेज़ों की संख्या के सापेक्ष कैश किया गया है वह भी महत्वपूर्ण है। यदि आपकी साइट के उपयोगकर्ताओं के पास प्रति सत्र कई पृष्ठ दृश्य हैं और आपके कई पृष्ठ समान स्क्रिप्ट और स्टाइलशीट (बंडलों) का उपयोग करते हैं, तो कैश्ड बाहरी फ़ाइलों से अधिक संभावित लाभ है।

लेकिन इनलाइनिंग -sometimes- सिंगल पेज एप्लिकेशन या वेब साइट्स के लिए प्रति सत्र एक सिंगल पेज व्यू के साथ बेहतर है। कोई स्वर्ण नियम नहीं है, और आम तौर पर इसे भूल जाते हैं क्योंकि यह मुख्य रूप से बहुत विशिष्ट वेब साइटों को चिंतित करता है जो वास्तव में अंत-उपयोगकर्ता के प्रदर्शन से जुड़े होते हैं।

आप यहां पढ़ सकते हैं कि प्रदर्शन क्यों मायने रखता है (अस्वीकरण: मैं लेखक हूं)

Answer 3

HTTP का नवीनतम संस्करण 1999 में वापस बनाया गया था। 1999 में, हर कोई डायल-अप के साथ इंटरनेट से जुड़ा था। इंटरनेट बहुत धीमा था । 16 साल बाद, चीजें बहुत हद तक आगे बढ़ गई हैं, लेकिन हमारे द्वारा उपयोग किए जाने वाले प्रोटोकॉल नहीं हैं।

उत्तर जो हमें इनलाइन नहीं करना चाहिए 'क्योंकि यह कैशिंग के साथ हस्तक्षेप करता है' थोड़ा भ्रामक है, विशेष रूप से सुपरफास्ट इंटरनेट के युग में। जब आप वास्तव में गणना करते हैं, तो अक्सर कैश-वार्म और कैश-कोल्ड उपयोगकर्ताओं के साथ लोड होने के बीच नगण्य अंतर होता है यदि आपने इनलाइन किया है। तथ्य यह है कि है एक छोटा सा फर्क स्वाभाविक है क्योंकि आप inlined है नहीं है, लेकिन HTTP / 1.1 की अनम्य डिजाइन की वजह से।

SPDY प्रोटोकॉल सर्वर पुश नामक कुछ को लागू करता है । यह अनिवार्य रूप से HTML दस्तावेज़ से और प्रोटोकॉल में इनलाइनिंग लेता है। एक बुद्धिमान सर्वर को पता चल जाएगा कि क्लाइंट के पास पहले से कौन से संसाधन हैं। एक गूंगा सर्वर सब कुछ परवाह किए बिना भेज देगा - जो अभी भी एक प्रदर्शन लाभ होगा, लेकिन बैंडविड्थ के संदर्भ में खर्च हो सकता है। यदि ब्राउज़र के कैश में सामग्री है, तो यह आने वाली प्रतियों को छोड़ सकता है। अतिरिक्त संसाधनों को भेजने से पहले HTML लोड होने तक सर्वर इंतजार करता है - सिद्धांत रूप में ब्राउज़र सर्वर पुश को रद्द करने के लिए एक संकेत भेज सकता है।

HTTP / 2.0 SPDY पर आधारित है और सबसे अधिक संभावना सर्वर पुश को लागू करेगा, लेकिन आप सिद्धांत रूप में आज SPDY का उपयोग शुरू कर सकते हैं। इसलिए वास्तविक कारण जो हम इनलाइन नहीं करते हैं, वह विरासत में से एक है - वर्तमान में मौजूद प्रोटोकॉल पुराने हैं और 'प्रोटोकॉल-लेवल इनलाइनिंग' को प्राप्त करने के लिए पर्याप्त लचीले नहीं हैं।

Comments

दिलचस्प जवाब, लेकिन "विरासत" के बजाय आप वर्तमान में इनलाइनिंग नहीं करने का कारण देते हैं क्योंकि यह वर्तमान वेब प्रोटोकॉल बुनियादी ढांचे के लिए सबसे उपयुक्त है। यह विरासत होगा अगर हर कोई अभी भी n साल के समय में वही काम कर रहा है जब HTTP / 2.0 / SPDY पूरी तरह से तैनात है ;-)

— andybuckley

क्या आप एक उद्धरण दे सकते हैं, गणना स्केच कर सकते हैं, या कम से कम "सुपरफास्ट" के लिए बॉलपार्क नंबर दे सकते हैं? ऑनलाइन (खर्च करने के लिए ग्राहक:) ग्राहकों को सभ्य दुनिया के पहले देशों में अभी भी कभी-कभी या - अक्सर - सैकड़ों मेगाबाइट प्रति सेकंड से कम बैंडविड्थ के साथ ब्राउज़ किया जा सकता है। मैं शायद ही कभी तीन एमबी / एस तक पहुंचता हूं, अक्सर 700 केबी / एस से कम होता है। एक अलग बिंदु के रूप में, आप ओपी के सुझाव के तरीके में एक इनलाइन नहीं देते हैं (वास्तव में, आप कारण नहीं देते हैं ), आप प्रोटोकॉल को अनुकूलित करने के लिए कारण देते हैं।

मेरा 3G कनेक्शन बिल्कुल "सुपर फास्ट" नहीं है, न ही मेरा फोन बिल अनावश्यक डेटा की सराहना करता है। मत भूलो - सभी मोबाइल डेटा उपयोग टीथरिंग और 3 जी सक्षम टैबलेट / लैपटॉप के साथ फोन पर नहीं है। Esp। लैपटॉप के साथ धारणा एक घर ब्रॉडबैंड कनेक्शन पर वाईफ़ाई / ईथरनेट है। जब दूर से टेदरिंग की सराहना नहीं की गई ...

— AnonJr

Answer 4

कैशिंग और चिंताओं को दूर करने के अलावा, जो अन्य उत्तर उठाते हैं, मैं एक और, अधिक अस्पष्ट समस्या को उजागर करना चाहूंगा: पार्सिंग ।

HTML में दिखाई देने वाला जावास्क्रिप्ट इस उदाहरण में पार्सिंग मुद्दों में चल सकता है:

<html>
<head>
<script>
function myfunc() {
    if ("</style> isn't a problem")
        return "but </script> is"
}
</script>
<style>
body::after {
  content: '</script> is okay, but not </style>'
}
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

... जिसका अर्थ है कि आपको HTML में ट्रिगर होने वाले कुछ वर्णों से बचने के लिए अपनी स्क्रिप्ट को बदलना होगा। जब आप बाह्य संसाधनों के रूप में CSS और JavaScript की आपूर्ति करते हैं तो यह समस्या दूर हो जाती है, क्योंकि उन्हें अब 'पैरेंट' पार्सिंग प्रसंग को ध्यान में नहीं रखना है।

यदि आप अपनी सामग्री को XML के रूप में परोसते हैं, तो आपके पास CDATA अनुभागों का उपयोग करके इसके चारों ओर एक आंशिक तरीका है। CDATA, हालांकि, एक समान मुद्दे के साथ आता है:

<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<script>
// <![CDATA[
function myfunc() {
    if ("</script> is no longer a problem")
        return "but ]]> is"
}
// ]]>
</script>
<style>
<![CDATA[
body::after {
  content: 'same ]]> issue here'
}
]]>
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

इनलाइनर्स सावधान रहें।

Answer 5

इसकी प्रस्तुति की शैली से सामग्री को अलग करना आमतौर पर कम http अनुरोधों की तुलना में एक बड़ा लाभ है।

सभी स्टाइल को अलग करना, पुन: उपयोग और साझा की गई फ़ाइलों को सक्षम और प्रोत्साहित करता है।

फ़ाइलों की सामग्री भी अधिक स्थिर होगी और सर्वर और क्लाइंट दोनों के लिए कैशिंग के लिए उपलब्ध होगी जो उस पृष्ठ और अन्य पेजों पर जाएँ।

हालांकि आप विशिष्ट प्रश्न के लिए ... यदि सर्वर को स्वयं को छोटा करने के लिए बनाया गया है, तो यह संपत्ति को बनाए रखने और मुद्दों को डीबग करने के लिए कठिन बनाता है। हालाँकि कई फ्रेमवर्क फ़ाइल स्तर पर ऐसा करते हैं, जैसे सभी सीएस और सभी js। उदाहरण के लिए रेल ढांचे पर रूबी अब उत्पादन के लिए अपनी संपत्ति को छोटा करता है। 5-10 अतिरिक्त http अनुरोध आमतौर पर अड़चन नहीं हैं, इसकी अधिक अगर 100+ http अनुरोध हैं (जो आपको अक्सर छवियों के साथ मिलते हैं)।

वास्तव में पृष्ठों में कोड सहित वास्तव में अतिरिक्त कदम से बड़े पृष्ठों का नुकसान होगा जिसे आपको डाउनलोड अनुक्रम को सावधानीपूर्वक प्रबंधित करना होगा और पृष्ठ बाकी (अब बड़े) पृष्ठ के बिना अक्सर सामग्री प्रदर्शित करने में सक्षम नहीं होगा। डाउनलोड किया जा रहा है।

Comments

स्पष्ट करने के लिए, क्या आप कह रहे हैं कि शैली और सामग्री को अलग करने से डेवलपर्स को लाभ होता है, या अंतिम उपयोगकर्ता के ब्राउज़र में प्रदर्शन का लाभ मिलता है?

मैं कह रहा हूं कि कंपनी को समग्र लाभ आम तौर पर व्यावसायिक शर्तों में अनुरोधों में कमी से बड़ी जीत है।

— माइकल डुरंट

आप महसूस करते हैं कि ओपी अलग-अलग फाइलों के साथ विकसित करने की वकालत कर रहा है और केवल तैनाती के दौरान कॉन्फेंसिंग, मिनिफिकेशन, ऑबफ्यूजेशन और "रेगुलर" कॉन्टेनेटेशन के साथ है? आपको अपना अनुरक्षण कोड बेस होना चाहिए और प्रदर्शन लाभ भी खाएं। स्रोत कोड को छोटा करने और कई JS / CSS फाइलों को एक में समेटने जैसी अन्य कोड मैनिफ़ॉर्मेशन अनुकूलन के साथ यह आम बात है।

मुझे इसका एहसास नहीं है। शब्द "उन संक्षिप्त शैली और स्क्रिप्ट को HTML में एम्बेड करते हैं?" मुझे उलझा दिया।

— माइकल ड्यूरेंट

बस स्पष्ट होने के लिए, मुझे वास्तव में यह सुझाव देने का मतलब था कि @delnan ने अपनी टिप्पणी में मेरी ओर से क्या स्पष्ट किया है। क्षमा करें यदि मेरे प्रश्न का वाक्यांश अस्पष्ट था।

— ग्लैडस्टोन

Answer 6

1. डुप्लिकेट कोडिंग कम से कम करें। समय बचाने के लिए (आप शैली और जेएस फ़ंक्शन को एक पृष्ठ के लिए कोडित कर सकते हैं)।
2. बदलाव का प्रयास कम से कम करें। (यदि आपका ग्राहक आपको वेब साइट का बटन रंग बदलने के लिए कहता है। आपको एक पृष्ठ एक करके जाना होगा)।
3. लोड समय कम करें (यदि आपका CSS और JS डुप्लिकेट है तो इसका मतलब है कि अलग-अलग पृष्ठों का आकार बढ़ने और डाउनलोड होने में समय लगता है। लेकिन आम CSS JS को बार-बार डाउनलोड करने की आवश्यकता नहीं है)।
4. दूरस्थ उपयोग। (आप अपने सामान्य सीएसएस जेएस को दूरस्थ स्थान पर रख सकते हैं। वही होस्टेड सर्वर को नहीं)
5. बग फिक्सिंग समय कम करें। यदि एक फ़ंक्शन में बग है, तो आपको एम्बेडेड JS और CSS में बग्स को ठीक करने के लिए पृष्ठ पर जाने की आवश्यकता है।
6. एसईओ बढ़ाने के लिए (बस मेटा डेटा के साथ अलग सामग्री)
7. क्लीनर और कोड की समझ (यदि आप सभी को एक फ़ाइल डिबग और कोड स्पष्टता में एम्बेड करते हैं, और प्रत्येक पृष्ठ बहुत लंबा पृष्ठ होगा)।
8. इसके अतिरिक्त यह आपको उत्पाद के आकार को कम करने में मदद करेगा।
9. लेकिन फिर भी आप एक ही पृष्ठ में सबसे अनोखी चीज़ को एम्बेड करने पर विचार कर सकते हैं।

Answer 7

हमें HTML में शैलियों / लिपियों को एम्बेड नहीं करना चाहिए क्योंकि

एंबेडेड शैलियों / स्क्रैप को हर पेज के अनुरोध के साथ डाउनलोड किया जाना चाहिए:

इन शैलियों को ब्राउज़र द्वारा कैश नहीं किया जा सकता है और किसी अन्य पृष्ठ के लिए फिर से उपयोग किया जा सकता है। इस वजह से, यह सीएसएस / जेएस की एक न्यूनतम राशि को यथासंभव एम्बेड करने की सिफारिश की गई है।

इसके बजाय हम लिंकिंग coz का उपयोग करते हैं जब हम css / लिपियों को जोड़ने के लिए लिंकिंग का उपयोग करते हैं

कई पेज अनुरोधों के लिए साइट की गति बढ़ जाती है:

जब कोई व्यक्ति पहली बार आपकी वेबसाइट पर जाता है तो उसका ब्राउज़र चालू पृष्ठ का HTML और लिंक की गई सीएसएस और जेएस फाइल डाउनलोड करता है। जब वे दूसरे पृष्ठ पर जाते हैं, तो उनके ब्राउज़र को केवल नए पृष्ठ का HTML डाउनलोड करने की आवश्यकता होती है, CSS / JS फ़ाइल को कैश किया जाता है, इसलिए उसे फिर से डाउनलोड करने की आवश्यकता नहीं है। यह एक बड़ा अंतर बना सकता है, खासकर यदि आपके पास एक बड़ी शैली और स्क्रिप्ट फ़ाइल है।