रेंडर-अवरुद्ध जेएस और सीएसएस को खत्म करने के लिए असीमित रूप से लोड?

Question

मैंने अभी बहुत समय से गुगल किया है ... और केवल हर जगह आधा जवाब पाएं। मैं अपनी वेबसाइट को बेहतर बनाने के लिए Google पेज की गति अंतर्दृष्टि का उपयोग कर रहा हूं और यह मुझे अपने जावास्क्रिप्ट को असीमित रूप से लोड करने के लिए कहता है। मुझे कुछ कोड मिले, लेकिन उन्होंने यह नहीं बताया कि एक से अधिक जेएस फ़ाइल कैसे लोड करें और सीएसएस को कैसे लोड करें। मैं कहीं भी नहीं ढूंढ सका जहां यह मुझे लोड करने के क्रम में बताता है। क्या कोई मदद कर सकता है?

नोट: मैं पाद लेख के लिए js ले जाने की कोशिश की थी, लेकिन उसके बाद अपने मोबाइल मेनू अब काम नहीं करता मैं करने के लिए एसिंक्रोनस रूप लोड की जरूरत है

जावास्क्रिप्ट फ़ाइलें (जो expand.js फ़ाइल का उपयोग करता है):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript" src="js/h5.js"></script> 
    <script language="javascript" type="text/javascript" src="js/expand.js"></script> 

मेरे सीएसएस:

<link rel="stylesheet" type="text/css" href="style.css"> 

Answer 1

अतुल्यकालिक लिपियों की लोडिंग बहुत जटिल हो सकता है। क्या आपने async विशेषता का उपयोग करने का प्रयास किया है? उदा .:

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script async language="javascript" type="text/javascript" src="js/h5.js"></script> 
<script async language="javascript" type="text/javascript" src="js/expand.js"></script> 

हालांकि, इस अवांछित race conditions पैदा कर सकता है। इसका मतलब यह है कि आपकी शेष साइट अन्य संसाधनों को लोड करने से पहले इन तीन जावास्क्रिप्ट फ़ाइलों को लोड करने के लिए प्रतीक्षा करने जा रही है। इसमें शामिल होने के आधार पर आपकी साइट की गति में सुधार हो सकता है या नहीं भी हो सकता है, और निर्भरता प्रबंधन के मामले में कुछ जीतने वाले परिणाम उत्पन्न कर सकते हैं जिन्हें आपको अपनी स्क्रिप्ट में खाते हैं।

आमतौर पर बड़ी छोटी फाइलें बनाने के लिए बड़ी जी द्वारा अनुशंसा की जाती है: एक सीएसएस और एक जावास्क्रिप्ट फ़ाइल को आपके <head/> में शामिल किया जाना चाहिए जिसमें उपर्युक्त सामग्री के लिए सभी शैलियों और तर्क शामिल हैं (या बेहतर अभी तक: इनलाइन करें, भले ही यह डीओएम आकार बढ़ाता है)। Source।

Answer 2

असीमित रूप से जावास्क्रिप्ट फ़ाइल को कैसे लोड करें?
खैर जावास्क्रिप्ट फ़ाइल तुम सिर्फ <script> टैग में "async" विशेषता शामिल करने की ज़रूरत लोड करने के लिए अर्थात

<script src="your path" async></script> 

अब इस स्क्रिप्ट पृष्ठभूमि में डाउनलोड किया जाएगा, जबकि यह जे एस प्रतिपादन मुद्दा नहीं होगा।
नोट: यदि आप कुछ jquery प्लगइन का उपयोग कर रहे हैं यानी छवि ज़ूम या किसी और चीज का उपयोग कर रहे हैं, तो लोड करने में अतिरिक्त समय लगेगा लेकिन उसके बाद यह ठीक से काम करेगा।

"ASYNC" के साथ "DEFER" कीवर्ड का उपयोग क्यों करें?

आप एसिंक विशेषता के साथ डिफ्रर विशेषता का भी उपयोग कर सकते हैं। <script> एसिंक विशेषता बल के साथ टैग पृष्ठभूमि में डाउनलोड करने के लिए फ़ाइल को डाउनलोड करें और इसे डाउनलोड होने के तुरंत बाद निष्पादित करें। लेकिन एक बार पूरी साइट लोड होने के बाद निष्पादित करने के लिए डिफर विशेषता बल <script> टैग के साथ async।

<script src="" async defer></script> 

असीमित रूप से सीएसएस फ़ाइल कैसे लोड करें? यदि आप अपनी सीएसएस फ़ाइल को असीमित रूप से लोड करना चाहते हैं तो आपको अपनी शीर्ष फ़ाइल में <script> प्रदान करना होगा और फिर आप सीएसएस फ़ाइल को असीमित रूप से लोड करने के लिए loadCSS() फ़ंक्शन का उपयोग कर सकते हैं।

<script> 
// https://github.com/filamentgroup/loadCSS 
!function(e){"use strict" 
var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all" 
return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e() 
setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s} 
"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this) 
</script> 

अब आपको लोडसीएसएस फ़ंक्शन का उपयोग करना होगा।

<script> 
loadCSS("https://www.yourCSSLinkHere.com"); 
</script> 

---

इस तरह आप एसिंक्रोनस रूप से अपने सीएसएस और जे एस फ़ाइल को लोड कर सकते हैं।

---

आप HTTP का उपयोग कर सकते/2.0 गति की समस्या दूर करने के लिए क्योंकि HTTP/2.0 की अनुमति देता है अपनी फ़ाइल को डाउनलोड करने की समानांतर लेकिन HTTP/1.0 अन्य तरीके से, अपनी फ़ाइल डाउनलोड समानांतर होने की अनुमति नहीं दी जाएगी HTTP/1.0 फीफो (फर्स्ट इन फर्स्ट आउट) नियम का पालन करता है।