Twitter बूटस्ट्रैप का उपयोग करने का सबसे अच्छा अभ्यास क्या है, इसे CDN से संदर्भित करें या मेरे सर्वर पर एक स्थानीय प्रतिलिपि बनाएँ?
चूंकि बूटस्ट्रैप विकसित हो रहा है, मुझे डर है कि अगर मैं सीडीएन को संदर्भित करता हूं, तो उपयोगकर्ता समय के साथ अलग-अलग वेबपेजों को देखेगा, और कुछ टैग भी टूट सकते हैं। ज्यादातर लोगों की पसंद क्या है?
जवाबों:
दोनों ¯ \ _ (ツ) _ / क्यों नहीं? स्कॉट हैनेलमैन ने प्रदर्शन लाभ के लिए सीडीएन का उपयोग करने पर एक शानदार लेख लिखा है, लेकिन सीडीएन नीचे होने की स्थिति में एक स्थानीय प्रतिलिपि पर इनायत से वापस गिर रहा है ।
बूटस्ट्रैप के लिए विशिष्ट, आप स्थानीय फॉलबैक के साथ CDN से लोड करने के लिए निम्न कार्य कर सकते हैं :
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap CSS local fallback -->
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "lib/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>.visibleके लिए परीक्षण के बजाय वर्गrgb(51, 51, 51) .hiddenऔर Boostrap.d-none 3.x या 4 के लिए अपडेट किया गयाDocument.createElement()बूटस्ट्रैप कक्षाएं लागू Window.getComputedStyle()करने, परीक्षण करने के लिए उपयोग करने display:noneऔर फिर सशर्त रूप से js का उपयोग करके एक स्टाइलशीट सम्मिलित करने के लिए एक परीक्षण तत्व बनाने की आवश्यकता है ।सर्वोत्तम प्रथाओं पर आपके प्रश्न के लिए, उत्पादन वातावरण में सीडीएन का उपयोग करने के लिए बहुत अच्छे कारण हैं :
- यह उपलब्ध समानता को बढ़ाता है।
- यह मौका बढ़ाता है कि कैश-हिट होगा ।
- यह सुनिश्चित करता है कि पेलोड जितना संभव हो उतना छोटा होगा ।
- यह आपके सर्वर द्वारा उपयोग किए जाने वाले बैंडविड्थ की मात्रा को कम करता है।
- यह सुनिश्चित करता है कि उपयोगकर्ता को भौगोलिक रूप से निकट प्रतिक्रिया मिलेगी ।
आपके संस्करण संबंधी चिंता के लिए, कोई भी CDN नमक में अपने वजन के बराबर है, जिससे आप लाइब्रेरी के एक विशिष्ट संस्करण को लक्षित कर सकते हैं ताकि आप गलती से प्रत्येक रिलीज़ के साथ ब्रेकिंग परिवर्तन न ला सकें।
document.writeके अनुसार mdn पर document.write
नोट : जैसा
document.writeकि दस्तावेज़ स्ट्रीम को लिखता है ,document.writeएक बंद (लोड) दस्तावेज़ पर कॉल करने से स्वचालित रूप से कॉल होता हैdocument.open, जो दस्तावेज़ को साफ़ कर देगा ।
हालांकि, यहां उपयोग जानबूझकर किया गया है। DOM पूरी तरह से लोड होने से पहले और सही क्रम में कोड को निष्पादित करने की आवश्यकता है। यदि jQuery विफल हो जाता है, तो बूटस्ट्रैप को लोड करने का प्रयास करने से पहले हमें इसे दस्तावेज़ इनलाइन में इंजेक्ट करना होगा, जो jQuery पर निर्भर करता है।
HTML आउटपुट लोड के बाद :
इन दोनों उदाहरणों में, हालांकि, हम तब भी कॉल कर रहे हैं जब दस्तावेज़ अभी भी खुला है, इसलिए इसे संपूर्ण दस्तावेज़ को बदलने के बजाय सामग्री को इनलाइन करना चाहिए। यदि आप अंत तक प्रतीक्षा कर रहे हैं, तो आपको document.body.appendChildगतिशील स्रोतों को सम्मिलित करने के लिए प्रतिस्थापित करना होगा।
एक तरफ : MVC 6 में, आप लिंक और स्क्रिप्ट टैग सहायकों के साथ ऐसा कर सकते हैं
<body>तत्व होगा। यह उत्तर एक .hiddendiv के साथ कुछ मार्कअप जोड़ता है और फिर यह देखने के लिए एक परीक्षण करता है कि क्या यह दिखाई दे रहा है $('#bootstrapCssTest').is(':visible'):। उस वर्ग में समय के साथ शायद बहुत कम परिवर्तन होने की संभावना है।
विशिष्ट साइट पर निर्भर करता है।
क्या आपके पास कई उपयोगकर्ता हैं? क्या आप बैंडविड्थ उपयोग की परवाह करते हैं? क्या प्रदर्शन एक मुद्दा है (CDN प्रतिक्रियाओं को गति दे सकता है )?
आप किसी विशिष्ट संस्करण से लिंक कर सकते हैं:
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
या
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
इस तरह आपको लाइब्रेरी अपडेट के बारे में चिंता करने की ज़रूरत नहीं है, अपडेट रखने के लिए यह एक बेहतर अभ्यास है।
मुझे यकीन नहीं है कि डेवलपर्स की पसंद के बारे में सटीक आंकड़े क्या हैं, लेकिन आप यहां देख सकते हैं और देख सकते हैं कि अरबों अनुरोधों को बूटस्ट्रैप सीडीएन को भेजा जाता है, जिसका अर्थ है कि यह मजबूत और उपयोग करने के लिए सुरक्षित है।
मैंने काइलमिट के उत्तर को संपादित करने की कोशिश की, लेकिन मंच एक गलत इंडेंट कोड के रूप में चिह्नित कर रहा था, यहां तक कि यह भी नहीं था, इसलिए मैं अपना योगदान सही बोल रहा हूं:
जैसा कि प्रश्न को टैग किया गया है चहचहाना-बूटस्ट्रैप विषय (और केवल नहीं चहचहाना-बूटस्ट्रैप -3 ), हो सकता है कि यह बूटस्ट्रैप के नए संस्करण के लिए प्रतिक्रिया को अद्यतन करने में सहायक हो।
चूंकि चौथा संस्करण में तत्वों को छिपाने के लिए रूपरेखा ने एक नया वर्ग जोड़ा है, इसलिए हमें इस मामले में .d-noneइसके बजाय उपयोग करना चाहिए .hidden।
उस मामले पर बाकी सब कुछ वैसा ही रहता है, केवल लिबास संस्करण को छोड़कर!
@KyleMit को धन्यवाद। फ़ॉल बैक का एक और तरीका 'विंडो' ऑब्जेक्ट को निम्न के रूप में उपयोग कर रहा है -
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
</script>यह इस तरह से काम करता है - यदि CDN लिंक काम करता है, तो 'विंडो' ऑब्जेक्ट में 'jQuery' की संपत्ति उपलब्ध होगी, जो स्क्रिप्ट के दूसरे भाग अर्थात document.write को मिलेगी, जो स्थानीय कॉपी को इंगित करता है।
मूल प्रश्न का उत्तर - आपके सर्वर और बैंडविड्थ को प्रभावित किए बिना CDN के कई लाभ हैं जैसे त्वरित डाउनलोड। स्थानीय प्रति होने का अपना लाभ है (एक गिरावट वापस व्यवस्था के रूप में)। इंट्रानेट पर, प्रॉक्सी सेटिंग्स, सुरक्षा नीतियों के कारण, CDN लिंक काम नहीं कर सकता है या यदि CDN लिंक डाउन है तो यह काम नहीं कर सकता है। सीधा जवाब दोनों के पास है।
लगभग सभी सार्वजनिक CDN बहुत विश्वसनीय हैं। हालाँकि, यदि आप उस समय के उस अंश के बारे में चिंतित हैं जब एक CDN नीचे हो सकता है, तो आप बूटस्ट्रैप CDN से एक बूटस्ट्रैप को लोड कर सकते हैं , और पहला सीडी डाउन होने की स्थिति में वैकल्पिक CDN पर वापस आ सकते हैं।
<html>
<head>
<!-- Bootstrap CSS CDN with Fallback -->
<link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous">
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN with Fallback -->
<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script>
<!-- Bootstrap JS CDN with Fallback -->
<script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script>
</body>
</html>आपकी दूसरी चिंता के बारे में: इस पोस्ट के लिंक बूटस्ट्रैप और jquery के हार्ड कोडेड संस्करण हैं। इसलिए, भले ही बूटस्ट्रैप और jquery लाइब्रेरी लगातार विकसित हो और नई सुविधाएँ प्राप्त हों, आपकी साइट समय के साथ समान रहेगी।
rgb(51, 51, 51)जोखिम भरा लगता है - क्या होगा अगर कोई रंग बदलता है और इसे अपडेट करना भूल जाता है? क्या अधिक स्थिर संपत्ति का उपयोग किया जा सकता है?