2009-07-27 11 views
6

मैंने इस पर कुछ खोज की है लेकिन किसी भी तरह का सर्वोत्तम अभ्यास या सिफारिश नहीं मिल सकती है - और शायद ऐसा इसलिए है क्योंकि कोई भी नहीं है। मैं अपनी साइट पर सभी प्रकार के jQuery प्लगइन्स का उपयोग कर रहा हूं, TinyMCE और कुछ अन्य प्लगइन के अलावा, और मेरी साइट की विशिष्ट जेएस फ़ाइल। उस पर, मेरे पास तीन स्टाइलशीट हैं ..... और साइट बढ़ने के साथ और भी आ रही है!<HEAD> में कितने भी शामिल हैं?

क्या टैग में लिपियों को शामिल करने के लिए आपको किसी भी प्रकार की 'सीमा' या कुछ भी नजर रखना चाहिए? मुझे पता है कि प्रत्येक एक और HTTP अनुरोध है जिसे पूरा करने की आवश्यकता है, लेकिन यदि वे सभी छोटे और छोटे हो सकते हैं, तो क्या समस्याएं होंगी?

<link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/redmond.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/style.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/jqueryFileTree.css" /> 

    <!--[if gte IE 7]> 
     <link rel="stylesheet" type="text/css" href="http://mysite.com/scripts/style.ie.css" /> 
    <![endif]--> 

    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery-ui.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqueryFileTree.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqminmax.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.corner.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.jeditable.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.qtip.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/plugins/tinymce/tiny_mce.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/js/latitude.js"></script> 
+0

डाउनलोड समय सभी सीमाओं को डाउनलोड करने का समय नहीं है? आप क्या पूछ रहे हो? डाउनलोड कितनी धीमी है धीमी है? –

+0

हां, डाउनलोड समय सभी महत्वपूर्ण है। लेकिन मुझे आसानी से जेएस फाइलों को गठबंधन करने का कोई तरीका नहीं पता था और यह सोच रहा था कि अन्य लोगों के विचार कितने हैं "कितने" हैं। –

+2

यूनिक्स 'बिल्ली' उपयोगिता जेएस फ़ाइलों को गठबंधन करने का एक अच्छा तरीका है। – Quentin

उत्तर

8

अच्छा नहीं है!

मैं एक js और एक सीएसएस रहने के लिए लागू करने से पहले एक स्क्रिप्ट का उपयोग कर में इन फ़ाइलों के संयोजन की सिफारिश करेगी। कई कारण हैं, जिनके चलते यह अच्छा नहीं है, अधिक जानकारी के लिए नीचे दिए गए लिंक देखें:

http://developer.yahoo.com/performance/rules.html

संपादित करें: आगे उत्तर देने के लिए नहीं, फ़ाइलों की संख्या पर कोई सीमा नहीं हैं, लेकिन सबसे ब्राउज़र आसानी किसी भी समय एक वेब सर्वर पर केवल 2 कनेक्शन (साइट के लिए) होते हैं और इस प्रकार एक समय में आपकी जेएस 2 फाइलें लोड करेंगे। फ़ायरफ़ॉक्स के लिए YSlow plugin आपको एक ग्राफ दिखाएगा कि आपकी फाइलें कैसे डाउनलोड की जा रही हैं।

यदि आप एएसपी.NET का उपयोग कर रहे हैं तो यह codeproject आलेख मदद कर सकता है, अगर आप लिनक्स पर हैं तो this मदद कर सकता है।

संपादित करें: खिड़कियां (अपने निर्माण उपकरण में प्लग करने के लिए) पर एक साधारण बैच फ़ाइल होगा

@echo off 
copy file1.js + file2.js + file3.js merged.js /b 
+1

मैं जेएस फाइलों को कैसे जोड़ूं? बस सभी कोड को एक विशाल चीज़ में पेस्ट करें, फिर इसे कम करें? –

+0

सी/पी खनन के बाद भी काम करना चाहिए। – millimoose

+0

इस और YUICompress लाइब्रेरी के बीच, मुझे लगता है कि मुझे ठीक होना चाहिए। सभी इनपुट के लिए आपको धन्यवाद! –

1

अधिक सीएसएस और जेएस फाइलें जो आप किसी पृष्ठ पर संदर्भित करते हैं, उतनी देर तक लोड हो जाएगी। जितना संभव हो उतना फाइलों में उन्हें गठबंधन करना बेहतर होता है।

+1

कई ब्राउज़र सर्वर पर 2 समवर्ती कनेक्शन खोलेंगे, जो प्रभावशाली रूप से डाउनलोडिंग को पैरालाइलाइज कर रहे हैं, ऐसी चीजें हैं जो आप अन्य डोमेन/सबडोमेन पर सामग्री संग्रहीत करने में कर सकते हैं ताकि ब्राउज़र डाउनलोड करने के लिए उन 2 कनेक्शनों से अधिक की स्थापना हो सके। यह फाइलों के आकार और एनआर के बीच संतुलन है। – nos

2

यदि यह आपको बेहतर महसूस करने में मदद करता है तो कई अन्य साइटें इस तरह "लोड" होती हैं और जेएस फ़ाइलों को सभी आधुनिक (और यहां तक ​​कि पुराने) ब्राउज़र द्वारा बहुत अधिक कैश किया जाता है। एक चीज जो आपकी मदद कर सकती है, वह आपकी jquery फ़ाइल को googleapis साइट पर होस्ट करने के लिए लिंक कर देगी, क्योंकि वहां कोई अन्य साइट हो सकती है कि वहां होस्ट की गई एक ही jquery फ़ाइल से लिंक हो रहा है और यह पहले से ही उनके कैश में है:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

आपका वेब सर्वर स्वचालित रूप से gzip संपीड़न को सक्षम करके फ़ाइलों को अनुकूलित करना चाहिए, लेकिन सुनिश्चित करने के लिए दो बार जांचें।

+0

यह अभी भी "ठंडा कैश" लोड पर बहुत धीमा होगा। पहली यात्रा। और याहू से डेटा है जो कहता है कि साइट हिट की बड़ी% उम्र ठंड कैश है। – Frozenskys

0

मैं अगर वहाँ प्रश्न के इस प्रकार के लिए एक अच्छा जवाब मौजूद है पता नहीं है, लेकिन अगर आप अनुकूलन में रूचि रखते हैं, उनमें से एक याहू द्वारा किया गया है !: http://developer.yahoo.com/performance/rules.html

व्यक्तिगत रूप से, मैं उन नियमों का सबसे अनदेखी करने के लिए, बस क्योंकि बातें मैं निर्माण कर रहा हूँ की तरह यह सब बड़े नहीं होते हैं।

4

ब्राउज़र एक डोमेन के लिए समवर्ती अनुरोधों की संख्या की कोई सीमा नहीं है, इसलिए वे अपने पृष्ठ में अन्य मदों की लोडिंग धीमा कर सकते हैं। उदाहरण के लिए, IE8 has a limit of 6 concurrent connections, and IE7 has a limit of 2

मैं फ़ाइलों को आप स्थानीय रूप से की मेजबानी के संयोजन की सलाह देते हैं, (उदाहरण के लिए गूगल पर) बाहर से दूसरों को संदर्भित, और संभवतः पृष्ठ के नीचे करने के लिए दूसरों ताकि वे लोड देरी नहीं है।

आप jsCompress जैसे कई ऑनलाइन टूल के साथ स्क्रिप्ट जोड़ सकते हैं। इसे "अपलोड फ़ाइलें" टैब मिला है, इसलिए आप बस अपनी सभी जेएस फाइल अपलोड कर सकते हैं और यह संकुचित और छोटा कर देगा।

सर्वर-साइड यूटिलिटीज भी हैं जो आपके लिए यह करेंगे। आप यह नहीं कहते कि आप किस सर्वर-साइड तकनीक का उपयोग कर रहे हैं, लेकिन उदाहरण के लिए PHP दुनिया में आप Minify का उपयोग कर सकते हैं।

0

Google Page Speed आपका मित्र है। लगता है कि स्टेरॉयड पर मूल रूप से वाईएसलो।

संबंधित मुद्दे