किसी साइट को विकसित करते समय HTML और CSS के तहत जावास्क्रिप्ट और jQuery का अनुकूलन

शुभ दिन, हरजेटी। मैं जावास्क्रिप्ट + jQuery के साथ काम करते समय कुछ अनुभव (टिप्स) साझा करना चाहता हूं (वास्तव में, आप jQuery के लिए किसी भी अन्य जेएस ढांचे को स्थानापन्न कर सकते हैं)। जेएस और jQuery के लिए नए लोगों के लिए लेख दिलचस्प होगा, लेकिन अनुभवी डायनासोर को पास नहीं करना चाहिए, इसमें उपयोगी जानकारी ढूंढना काफी संभव है। मूल रूप से, लेख में मैं असंदिग्ध मामलों को नहीं देता, लेकिन मुझे "सौटीशराजपॉटोर" के लिए जगह उपयुक्त लगी।

प्रारंभ

बहुत बार मैं एक टैग में जेएस फाइलों को लोड करना देखता हूं . - ! ? JS HTML, . , JS ( , AJAX , URL Hash). , . JS , .

. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). , . JS , .

. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). , . JS , .

के "प्रारंभ" पर लगभग कोई प्रभाव नहीं पड़ता है। ज्यादातर मामलों में, वे jQuery( document ).ready( function () { ... } उपयोग करते हैं jQuery( document ).ready( function () { ... } , जो HTML लोड करने के बाद ही स्क्रिप्ट चलाता है। यह कार खरीदने से पहले गैसोलीन खरीदने जैसा है।

HTML में इनलाइन जावास्क्रिप्ट

यह भयानक है!

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

चयनकर्ताओं

यह विषय दुनिया जितना पुराना है, एक अनुकूलन अनुरोध के लिए खोज इंजन में पहला परिणाम चयनकर्ताओं के बारे में एक लेख का उत्पादन करेगा। और फिर भी, समय-समय पर, यह सिर्फ रन बना। जैसा कि वे कहते हैं, पुनरावृत्ति सीखने की मां है।

चयनकर्ता पृष्ठ प्रदर्शन को बहुत प्रभावित करते हैं। उदाहरण के लिए, मेरे हालिया अभ्यास से, सिर्फ एक सहयोगी के चयन के कारण लिपियों में, साइट शाब्दिक रूप से 8-10 सेकंड के लिए लटका दी गई थी। प्रपत्र jQuery( 'input[name="some-specific-name"]' ) चयन करने के लिए, हमने jQuery( 'input[name="some-specific-name"]' ) और यह ~ 10 रूपों और ~ 300 फ़ील्ड वाले पृष्ठ पर है ... इस चयनकर्ता को आईडी के साथ बदलना - और, वॉइला, हैंगिंग टाइम गिर गया 60-90 मि। तक।

मैं संक्षिप्त हूं: चयनकर्ता में हमेशा आईडी का उपयोग करें। यदि यह संभव नहीं है, तो मूल तत्व की आईडी का उपयोग करें, और उसके बाद ही कोई अन्य (वर्ग, टैग या विशेषता)।

 jQuery( '#element-id' ); //   jQuery( '#parent-element-id .needed-class-name' ); //   jQuery( '#parent-element-id a' ); //     

.filter() को .each() करने के बजाय, आइटम फ़िल्टर करने के लिए .filter() का उपयोग करें
पहले, अंतिम या विशिष्ट तत्वों का चयन करने के लिए .first() , .first() , .first() .eq( index )

एनीमेशन

मुझे लगता है कि एनिमेशन की कतारों और कई तत्वों के युगपत एनीमेशन का उल्लेख करना यहां उचित होगा - चूंकि यह एक प्राथमिकता अनुकूलन है, लेकिन मैं विस्तार से प्रतिलिपि बनाने में नहीं जाऊंगा, क्योंकि खोज इंजन इन वस्तुओं पर सभी आवश्यक जानकारी देगा (पाद लेख में मैं लिंक दूंगा)।

मार्जिन ( margin - सीएसएस संपत्ति) - यह एनिमेशन का पहला दुश्मन है।

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

विशाल और एक ही समय में सुचारू रूप से थम्बनेल का सुगम संचलन हमेशा आसान नहीं होता है। और अगर वहाँ 13 ऐसी छवियां हैं, और सब कुछ एक ही समय (धुंधला प्रभाव) में एनिमेटेड होना चाहिए? यह मस्तिष्क का पूर्ण अव्यवस्था है। यहां, वास्तव में, सबसे दुर्भावनापूर्ण दुश्मन पाया गया था - margin । चूंकि तत्वों को एक सीढ़ी (अलग-अलग इंडेंट के साथ) के साथ व्यवस्थित किया गया था, इसलिए margin , या padding या left का उपयोग करना आवश्यक था। पोकिंग और मल्टीपल सॉर्टिंग के द्वारा, मेरे मामले में, margin को अस्वीकार करते हुए FPS को ~ 20 से ~ 35 (ओपेरा, फ़ायरफ़ॉक्स, IE 7.8। क्रोम पहले ही 100 दिखाया गया है)।

एक असंदिग्ध नियम के रूप में, मैं इसे सहन नहीं करूँगा, केवल उस सलाह के रूप में जिस पर आप ध्यान दे सकते हैं।

आपका ध्यान और समय व्यतीत करने के लिए धन्यवाद, बस इतना ही।

तहखाना

JQuery के क्वीन्स [ENG] के बारे में अधिक जानें
JQuery के कई तत्वों के बारे में अधिक जानें [ENG]