HTML फ़ाइल में जावास्क्रिप्ट कहाँ रखें?

210

कहो कि मेरे पास एक काफी मोटी जावास्क्रिप्ट फ़ाइल है, जो लगभग 100kb या तो पैक है। फ़ाइल से मेरा मतलब है कि यह एक बाहरी फ़ाइल है <script src="...">जिसे HTML में ही चिपकाया गया है, न कि इसके माध्यम से ।

HTML में इसे रखने के लिए सबसे अच्छी जगह कहाँ है?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

क्या प्रत्येक विकल्प के बीच कोई कार्यात्मक अंतर होगा?

javascript  html  optimization 
— nickf
स्रोत
— इवर

जवाबों:

175

याहू! ब्राउज़र डाउनलोड करने के तरीके के कारण असाधारण प्रदर्शन टीम आपके पृष्ठ के निचले भाग में स्क्रिप्ट रखने की सलाह देती है ।

बेशक लेवी की टिप्पणी "इससे पहले कि आपको इसकी आवश्यकता है और जल्द ही नहीं" वास्तव में सही उत्तर है, अर्थात "यह निर्भर करता है"।

— वाल्टर रम्सबी
स्रोत
4
उदाहरण के लिए, यदि आप jQuery के सामान का एक समूह बनाने जा रहे हैं, तो इससे पहले कि आप वास्तव में इसका उपयोग करने की कोशिश करें, आपको पुस्तकालय की आवश्यकता होगी।
— ब्रायनएच
58
इसके अलावा, याहू ईपीटी ने जेएस को सबसे नीचे रखने की सिफारिश की है, क्योंकि जेएस लोड होने और फिर निष्पादित होने पर ब्राउज़र को एकल-थ्रेडेड मोड में जाना चाहिए। यदि स्क्रिप्ट सिर में है या सामग्री के बीच में है, तो यह ब्राउज़र जेएस से निपटने के दौरान "विराम" देगा। जेएस को सबसे नीचे रखकर, सामग्री लोड हो जाएगी और आम तौर पर दिखाई देगी ताकि उपयोगकर्ता इसे पढ़ना शुरू कर सके, जबकि ब्राउज़र अभी भी जेएस के साथ काम कर रहा है।
— ब्रायनएच
1
नमस्ते। क्या हम इस तरह से कोड $(function () {...})को पेज के नीचे भी डालते हैं , या इसे अंदर होना चाहिए <head>?
— थांग फाम
7
मुझे उम्मीद है कि "आपके पृष्ठ के नीचे" का जिक्र यहाँ से परे नहीं है </body>?
— Mr_Green
1
आधुनिक ब्राउज़र "डेफर" विशेषता को भी पढ़ सकते हैं। आप स्क्रिप्ट टैग पर defer = "defer" सेट कर सकते हैं जो <body> के निचले भाग में नहीं है, और जब ब्राउज़र उन लोगों को देखता है, तो वह पहले html के बाकी हिस्सों को लोड करना समाप्त कर देगा और फिर वापस जाकर सामग्री की व्याख्या करेगा। स्क्रिप्ट टैग। यदि आप किसी प्रकार के फ्रेमवर्क का उपयोग कर रहे हैं, जहां आपके पास पृष्ठ का पूर्ण नियंत्रण नहीं है, तो यह मददगार है। इस लेख में खुदाई करें और ध्यान दें कि यह एक जीवित दस्तावेज है इसलिए कुछ जानकारी पुरानी है: stackoverflow.com/questions/5250412/…
— LinuxDisciple
75

इसके लिए सबसे अच्छी जगह आपको ज़रूरत से पहले ही है और जल्दी नहीं है।

इसके अलावा, आपके उपयोगकर्ताओं के भौतिक स्थान के आधार पर, अमेज़ॅन की S3 सेवा जैसी सेवा का उपयोग करने से उपयोगकर्ताओं को आपके सर्वर की तुलना में शारीरिक रूप से उनके करीब एक सर्वर से इसे डाउनलोड करने में मदद मिल सकती है।

क्या आपका js स्क्रिप्ट आमतौर पर jQuery या प्रोटोटाइप की तरह उपयोग किया जाने वाला lib है? यदि हां, तो Google और याहू जैसी कई कंपनियां हैं, जिनके पास वितरित नेटवर्क पर आपके लिए इन फ़ाइलों को प्रदान करने के लिए उपकरण हैं।

— लेवी रोसोल
स्रोत
60

अंगूठे के एक नियम के रूप में, <script>टैग लगाने के लिए सबसे अच्छी जगह पृष्ठ के नीचे है, </body>टैग से पहले । कुछ इस तरह:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

क्यों?

स्क्रिप्ट के कारण समस्या यह है कि वे समानांतर डाउनलोड ब्लॉक करते हैं। HTTP / 1.1 विनिर्देश बताता है कि ब्राउज़र प्रति होस्टनाम समानांतर में दो से अधिक घटकों को डाउनलोड नहीं करते हैं। यदि आप कई होस्टनाम से अपनी छवियों की सेवा करते हैं, तो आप समानांतर में होने के लिए दो से अधिक डाउनलोड प्राप्त कर सकते हैं। हालांकि एक स्क्रिप्ट डाउनलोड हो रही है, हालांकि, ब्राउज़र अलग होस्टनाम पर भी कोई अन्य डाउनलोड शुरू नहीं करेगा। अधिक...

सीएसएस

थोड़ा-सा ऑफ-टॉपिक, लेकिन ... शीर्ष पर स्टाइलशीट रखें।

याहू पर प्रदर्शन पर शोध करते समय!, हमने पाया कि एचएएडी को दस्तावेज़ में ले जाने वाले स्टाइलशीट पेजों को तेजी से लोड करते दिखाई देते हैं। ऐसा इसलिए है क्योंकि HEAD में स्टाइलशीट डालने से पेज को उत्तरोत्तर रेंडर करने की अनुमति मिलती है। अधिक...

आगे की पढाई

याहू ने एक बहुत अच्छा मार्गदर्शक जारी किया है जो एक वेबसाइट को गति देने के लिए सर्वोत्तम प्रथाओं को सूचीबद्ध करता है। निश्चित रूप से पढ़ने लायक: https://developer.yahoo.com/performance/rules.html

— Martynas
स्रोत
1
"स्क्रिप्ट के कारण समस्या यह है कि वे समानांतर डाउनलोड ब्लॉक करते हैं।" - यह अब सच नहीं है: w3.org/TR/html5/scripting-1.html#attr-script-async
— क्वेंटिन
4

जावास्क्रिप्ट के 100k के साथ, आपको इसे फ़ाइल के अंदर कभी नहीं रखना चाहिए। एक बाहरी स्क्रिप्ट जावास्क्रिप्ट फ़ाइल का उपयोग करें। नरक में कोई मौका नहीं है आप कभी भी केवल एक HTML पृष्ठ में कोड की इस राशि का उपयोग करेंगे। संभवतः आप पूछ रहे हैं कि आपको जावास्क्रिप्ट फ़ाइल को कहाँ लोड करना चाहिए, इसके लिए आपको पहले ही संतोषजनक उत्तर मिल चुके हैं।

लेकिन मैं यह बताना चाहता हूं कि आमतौर पर, आधुनिक ब्राउज़र gzip ped Javascript फाइलों को स्वीकार करते हैं ! बस x.jsफ़ाइल को gzip करें x.js.gz, और उस srcविशेषता को इंगित करें । यह स्थानीय फाइल सिस्टम पर काम नहीं करता है, इसके लिए आपको एक वेबसर्वर की आवश्यकता होती है। लेकिन स्थानांतरित बाइट्स में बचत भारी हो सकती है।

मैंने इसे फ़ायरफ़ॉक्स 3, एमएसआईई 7, ओपेरा 9 और गूगल क्रोम में सफलतापूर्वक परीक्षण किया है। यह स्पष्ट रूप से सफारी 3 में इस तरह से काम नहीं करता है।

अधिक जानकारी के लिए, इस ब्लॉग पोस्ट को देखें , और एक और बहुत ही प्राचीन पृष्ठ जो फिर भी उपयोगी है क्योंकि यह बताता है कि वेबसर्वर यह पता लगा सकता है कि कोई ब्राउज़र gzipped Javascript स्वीकार कर सकता है या नहीं। यदि आपका सर्वर पक्ष गतिशील रूप से gzipped या सादा पाठ भेजने का विकल्प चुन सकता है, तो आप सभी वेब ब्राउज़र में पृष्ठ को प्रयोग करने योग्य बना सकते हैं।

— बार्ट
स्रोत
8
आपने ओपी के सवाल को गलत समझा। वह पूछ रहा था कि स्क्रिप्ट टैग लगाने के लिए HTML में कहां है। वह पहले से ही एक बाहरी फ़ाइल का उपयोग कर रहा था, स्क्रिप्ट को इनलाइन नहीं कर रहा था। जाहिर है, यह अप्रैल '09 में सवाल को संपादित करने से पहले कम स्पष्ट था। शायद इस जवाब को हटा दें?
— मार्क अमेरी
@ लिंड्रो मुझे लगता है कि यह इसलिए है क्योंकि लोग हमेशा वास्तविक प्रश्न को ध्यान में नहीं रखते हैं फिर भी इस तरह के एक उपयोगी के रूप में उत्तर पर विचार करते हैं। बहरहाल, इस सवाल का जवाब है उपयोगी नहीं लेकिन जरूरी प्रासंगिक। यह बेहतर हो सकता है अगर वोट अप टूलटिप में अधिक स्पष्ट शब्दांकन हो, जैसे 'यह उत्तर उपयोगी और प्रासंगिक है'।
— व्यान्डब
1
Gzipped Javascript पर: आप बस अपने वेबसर्वर को इसे संपीड़ित करने के लिए कॉन्फ़िगर कर सकते हैं ... (या nginx के gzip_static मॉड्यूल / विकल्प जैसे कुछ का उपयोग करें) (और अन्य ग्राहकों के लिए गनज़िप) जो कम से कम सही सामग्री-प्रकार हेडर भेजना चाहिए, gzip के रूप में चिह्नित एन्कोडिंग के साथ, संभवतः बेहतर ब्राउज़र समर्थन के परिणामस्वरूप
— Gert van den Berg
4

जावास्क्रिप्ट को शीर्ष पर रखने से यह नीटर प्रतीत होता है, लेकिन कार्यात्मक रूप से, HTML के बाद जाने के लिए बेहतर है। इस तरह, आपकी जावास्क्रिप्ट नहीं चलेगी और लोड होने से पहले HTML तत्वों को संदर्भित करने का प्रयास करें। जब आप वास्तविक इंटरनेट कनेक्शन पर पेज लोड करते हैं तो इस तरह की समस्या अक्सर स्पष्ट हो जाती है, विशेष रूप से धीमी गति से।

आप अन्य जावास्क्रिप्ट कोड से हेडर तत्व जोड़कर जावास्क्रिप्ट को डायनामिक रूप से लोड करने का भी प्रयास कर सकते हैं, हालांकि यह केवल तभी समझ में आता है जब आप हर समय कोड का उपयोग नहीं कर रहे हों।

— मथायस वंडेल
स्रोत
3

कुज़िल का उपयोग करके आप विभिन्न तरीकों का उपयोग करके स्क्रिप्ट टैग के विभिन्न प्लेसमेंट के पेज लोड पर प्रभाव का परीक्षण कर सकते हैं: इनलाइन, बाहरी, "HTML टैग", "document.write", "JS DOM तत्व", "iframe", और "XHR eval"। । मतभेदों की व्याख्या के लिए सहायता देखें । यह स्टाइलशीट, चित्र और iframes का परीक्षण भी कर सकता है।

— सैम हस्लर
स्रोत
1

उत्तर निर्भर करता है कि आप जावास्क्रिप्ट की वस्तुओं का उपयोग कैसे कर रहे हैं। जैसा कि पहले ही बताया गया है कि हेडर के बजाय फ़ुटवेयर पर जावास्क्रिप्ट फ़ाइलों को लोड करने से निश्चित रूप से प्रदर्शन में सुधार होता है, लेकिन इस बात का ध्यान रखा जाना चाहिए कि जिन वस्तुओं का उपयोग किया जाता है, उन्हें बाद में आरंभिक रूप से पाद लेख पर लोड किए जाने से बेहतर बनाया जाए। एक और तरीका फ़ोल्डर में रखी गई 'js' फाइलों को लोड करना है जो सभी फाइलों के लिए उपलब्ध होगा।

— GustyWind
स्रोत
0

जैसा कि दूसरों ने कहा है, यह सबसे अधिक संभावना बाहरी फ़ाइल में जाना चाहिए। मैं <head /> के अंत में ऐसी फ़ाइलों को शामिल करना पसंद करता हूँ। यह तरीका मशीन फ्रेंडली की तुलना में अधिक मानवीय अनुकूल है, लेकिन इस तरह मुझे हमेशा पता है कि जेएस कहां है। यह स्क्रिप्ट फ़ाइलों को कहीं और (इम्हो) शामिल करने के लिए केवल पढ़ने योग्य नहीं है।

मुझे आपको वास्तव में हर आखिरी एमएस को निचोड़ने की आवश्यकता है फिर आपको संभवतः याहू को कहना चाहिए।

— निडर
स्रोत
0

स्क्रिप्ट्स को बॉडी टैग के अंत में शामिल किया जाना चाहिए क्योंकि इस तरह HTML को ब्राउज़र द्वारा पार्स किया जाएगा और स्क्रिप्ट लोड होने से पहले प्रदर्शित किया जाएगा।

— जोस सालगाडो
स्रोत
0

प्रश्न का उत्तर निर्भर करता है। इस स्थिति में 2 परिदृश्य हैं और आपको अपने उपयुक्त परिदृश्य के आधार पर चुनाव करना होगा।

परिदृश्य 1 - महत्वपूर्ण स्क्रिप्ट / स्क्रिप्ट की आवश्यकता होनी चाहिए

यदि आप जिस स्क्रिप्ट का उपयोग कर रहे हैं वह वेबसाइट को लोड करने के लिए महत्वपूर्ण है, तो इसे अपने HTML दस्तावेज़ के शीर्ष पर रखने की सिफारिश की जाती है <head>। कुछ उदाहरणों में शामिल हैं - एप्लिकेशन कोड, बूटस्ट्रैप, फोंट, आदि।

परिदृश्य 2 - कम महत्वपूर्ण / विश्लेषणात्मक स्क्रिप्ट

ऐसी स्क्रिप्ट भी उपयोग की जाती हैं जो वेबसाइट के दृश्य को प्रभावित नहीं करती हैं। सभी महत्वपूर्ण खंडों को लोड करने के बाद ऐसी स्क्रिप्ट को लोड करने की सिफारिश की जाती है। और उस का उत्तर दस्तावेज़ के नीचे होगा अर्थात, <body>समापन टैग से पहले आपके नीचे । कुछ उदाहरणों में शामिल हैं - Google विश्लेषिकी, हॉटज़ार, आदि।

बोनस - async / defer

आप ब्राउज़रों को यह भी बता सकते हैं कि स्क्रिप्ट लोडिंग को दूसरों के साथ एक साथ किया जा सकता है और स्क्रिप्ट कोड में एक defer / async तर्क का उपयोग करके ब्राउज़र की पसंद के आधार पर लोड किया जा सकता है।

जैसे। <script async src="script.js"></script>

— प्रवीण तिरुमुरुगन
स्रोत
-1

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

— टिमोथी ट्रॉस्डेल
स्रोत
-1

मैं कहूंगा कि यह इस बात पर निर्भर करता है कि आपने जावास्क्रिप्ट कोड के साथ क्या हासिल करने की योजना बनाई है:

  • यदि आपने अपनी जेएस स्क्रिप्ट (ओं) को सम्मिलित करने की योजना बनाई है, तो पृष्ठ के सामने सबसे अच्छी जगह है
  • यदि आपने टैग से ठीक पहले, स्मार्टफ़ोन पर पृष्ठों का उपयोग करने की योजना बनाई है, तो पृष्ठ के नीचे।
  • लेकिन, यदि आपने संयोजन HTML और JS बनाने की योजना बनाई है (उदाहरण के लिए डायनामिक रूप से बनाई गई और पॉप्युलेट की गई HTML तालिका), तो आपको इसे वहीं रखना चाहिए जहाँ आपको इसकी आवश्यकता है।
— लुडस एच
स्रोत
क्या मैंने माइनस के लायक कहा !? गीज़।
— लुडस एच।
लिपि को सिर में लगाने से बाहरी होने का क्या होना है? विशेष रूप से स्मार्ट फोन के लिए स्क्रिप्ट डालने के लिए पृष्ठ का निचला भाग एक अच्छी जगह क्यों है? JS से गतिशील रूप से HTML बनाने के बारे में आपका कथन केवल तभी सच है जब आप उपयोग कर रहे हैं document.write, जो कि आपको शायद नहीं होना चाहिए।
— क्वेंटिन
आपने "अनुमान लगाया" जो मैंने सोचा था और उसके कारण मेरा जवाब माइनस हो गया? आप शायद सोचते हैं कि आपकी व्याख्या मेरे स्पष्टीकरण से बेहतर है, है ना? मैंने सिर्फ संक्षिप्त व्याख्या करने की योजना बनाई है, अगर कोई समझने में असमर्थ है तो वह अधिक जानकारी मांगेगा। अपनी टिप्पणी में मैंने जेएस को स्मार्त फोन और टैबलेट के लिए पेज के अंत में डालने का सुझाव दिया, शरीर के अंत से पहले क्योंकि पूरे पेज की लोडिंग तेज है क्योंकि ब्राउज़र को "सिंगल थ्रेड" मोड पर स्विच करने की आवश्यकता नहीं है, पेज की सामग्री दिखाई देने लगेगी स्क्रीन पर ... लेकिन आप शायद यह जानते हैं।
— लुडस एच
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.