ऑनलाइन कई स्थानों पर मैंने जावास्क्रिप्ट को सीएसएस से पहले शामिल करने की सिफारिश देखी है। तर्क इस प्रकार है :
जब आपके CSS और JavaScript को ऑर्डर करने की बात आती है, तो आप चाहते हैं कि आपका CSS पहले आए। कारण यह है कि रेंडरिंग थ्रेड में सभी शैली की जानकारी है जो इसे पृष्ठ को रेंडर करने की आवश्यकता है। यदि जावास्क्रिप्ट में पहले शामिल है, तो संसाधनों के अगले सेट पर जारी रखने से पहले जावास्क्रिप्ट इंजन को इसे पार्स करना होगा। इसका मतलब है कि रेंडरिंग थ्रेड पूरी तरह से पृष्ठ नहीं दिखा सकता है, क्योंकि इसमें सभी शैलियों की आवश्यकता नहीं है।
मेरे वास्तविक परीक्षण से कुछ अलग पता चलता है:
मेरा टेस्ट हार्नेस
मैं विभिन्न संसाधनों के लिए विशिष्ट देरी उत्पन्न करने के लिए निम्न रूबी स्क्रिप्ट का उपयोग करता हूं:
require 'rubygems'
require 'eventmachine'
require 'evma_httpserver'
require 'date'
class Handler < EventMachine::Connection
include EventMachine::HttpServer
def process_http_request
resp = EventMachine::DelegatedHttpResponse.new( self )
return unless @http_query_string
path = @http_path_info
array = @http_query_string.split("&").map{|s| s.split("=")}.flatten
parsed = Hash[*array]
delay = parsed["delay"].to_i / 1000.0
jsdelay = parsed["jsdelay"].to_i
delay = 5 if (delay > 5)
jsdelay = 5000 if (jsdelay > 5000)
delay = 0 if (delay < 0)
jsdelay = 0 if (jsdelay < 0)
# Block which fulfills the request
operation = proc do
sleep delay
if path.match(/.js$/)
resp.status = 200
resp.headers["Content-Type"] = "text/javascript"
resp.content = "(function(){
var start = new Date();
while(new Date() - start < #{jsdelay}){}
})();"
end
if path.match(/.css$/)
resp.status = 200
resp.headers["Content-Type"] = "text/css"
resp.content = "body {font-size: 50px;}"
end
end
# Callback block to execute once the request is fulfilled
callback = proc do |res|
resp.send_response
end
# Let the thread pool (20 Ruby threads) handle request
EM.defer(operation, callback)
end
end
EventMachine::run {
EventMachine::start_server("0.0.0.0", 8081, Handler)
puts "Listening..."
}उपरोक्त मिनी सर्वर मुझे जावास्क्रिप्ट फ़ाइलों (सर्वर और क्लाइंट दोनों) और मनमाने ढंग से सीएसएस देरी के लिए मनमाने विलंब सेट करने की अनुमति देता है। उदाहरण के लिए, http://10.0.0.50:8081/test.css?delay=500मुझे CSS को स्थानांतरित करने में 500 एमएस की देरी होती है।
परीक्षण करने के लिए मैं निम्नलिखित पृष्ठ का उपयोग करता हूं।
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type='text/javascript'>
var startTime = new Date();
</script>
<link href="http://10.0.0.50:8081/test.css?delay=500" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://10.0.0.50:8081/test2.js?delay=400&jsdelay=1000"></script>
</head>
<body>
<p>
Elapsed time is:
<script type='text/javascript'>
document.write(new Date() - startTime);
</script>
</p>
</body>
</html>जब मैं पहले CSS को शामिल करता हूं, तो रेंडर करने में पेज को 1.5 सेकंड का समय लगता है:
जब मैं जावास्क्रिप्ट को पहले शामिल करता हूं, तो रेंडर करने में पेज को 1.4 सेकंड का समय लगता है:
मुझे क्रोम, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर में समान परिणाम मिलते हैं। ओपेरा में हालांकि, ऑर्डर देने से कोई फर्क नहीं पड़ता।
जो प्रतीत हो रहा है वह यह है कि जावास्क्रिप्ट दुभाषिया तब तक शुरू करने से इनकार करता है जब तक कि सभी सीएसएस डाउनलोड न हो जाए। तो, ऐसा लगता है कि जावास्क्रिप्ट में पहले शामिल है और अधिक कुशल है क्योंकि जावास्क्रिप्ट थ्रेड को अधिक रन समय मिलता है।
क्या मुझे कुछ याद आ रहा है, क्या सीएसएस को शामिल करने की सिफारिश जावास्क्रिप्ट से पहले शामिल है सही नहीं है?
यह स्पष्ट है कि हम रेंडर थ्रेड को मुक्त करने के लिए async जोड़ सकते हैं या सेटटाइमआउट का उपयोग कर सकते हैं या जावास्क्रिप्ट कोड को पाद लेख में डाल सकते हैं, या जावास्क्रिप्ट लोडर का उपयोग कर सकते हैं। यहां बिंदु सिर में आवश्यक जावास्क्रिप्ट बिट्स और सीएसएस बिट्स के आदेश के बारे में है।
delay=400&jsdelay=1000और delay=500जो कहीं नहीं निकट 100ms या 89ms है। मुझे लगता है कि मैं स्पष्ट नहीं हूँ कि आप किस संख्या का उल्लेख कर रहे हैं।
