অনলাইনে অসংখ্য জায়গায় আমি জাভাস্ক্রিপ্টের আগে সিএসএস অন্তর্ভুক্ত করার জন্য সুপারিশটি দেখেছি। যুক্তি সাধারণত এই ফর্মের :
যখন আপনার সিএসএস এবং জাভাস্ক্রিপ্ট অর্ডার করার কথা আসে, আপনি নিজের সিএসএসটি প্রথমে আসতে চান। কারণটি হ'ল রেন্ডারিং থ্রেডটিতে পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় স্টাইলের সমস্ত তথ্য রয়েছে। যদি জাভাস্ক্রিপ্ট অন্তর্ভুক্ত থাকে তবে প্রথমে জাভাস্ক্রিপ্ট ইঞ্জিনের পরবর্তী সংস্থানগুলিতে এগিয়ে যাওয়ার আগে এগুলি পার্স করতে হবে। এর অর্থ রেন্ডারিং থ্রেড পৃষ্ঠাটি সম্পূর্ণরূপে দেখাতে পারে না, কারণ এটির প্রয়োজনীয় সমস্ত স্টাইল নেই।
আমার আসল পরীক্ষাটি বেশ আলাদা কিছু প্রকাশ করে:
আমার পরীক্ষার জোতা
আমি বিভিন্ন সংস্থার জন্য নির্দিষ্ট বিলম্ব তৈরি করতে নিম্নলিখিত রুবি স্ক্রিপ্টটি ব্যবহার করি:
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সিএসএস স্থানান্তর করতে আমাকে 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>
আমি যখন প্রথম সিএসএস অন্তর্ভুক্ত করি তখন পৃষ্ঠাটি রেন্ডার করতে 1.5 সেকেন্ড সময় নেয়:
আমি যখন প্রথমে জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করব তখন পৃষ্ঠাটি রেন্ডার করতে 1.4 সেকেন্ড সময় নেয়:
আমি ক্রোম, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরারে একই ফলাফল পেয়েছি। অপেরাতে তবে ক্রমটি অর্ডার করা কোনও বিষয় নয়।
যা ঘটছে বলে মনে হচ্ছে তা হল জাভাস্ক্রিপ্ট ইন্টারপ্রেটার সমস্ত সিএসএস ডাউনলোড না হওয়া পর্যন্ত শুরু করতে অস্বীকার করে। সুতরাং, মনে হচ্ছে জাভাস্ক্রিপ্টের প্রথমটি অন্তর্ভুক্ত করা আরও কার্যকর কারণ জাভাস্ক্রিপ্ট থ্রেডটি বেশি সময় চালায়।
আমি কি কিছু মিস করছি, জাভাস্ক্রিপ্টের আগে সিএসএস অন্তর্ভুক্ত করার প্রস্তাবটি কি সঠিক নয়?
এটি স্পষ্ট যে আমরা অ্যাসিঙ্ক যুক্ত করতে পারি বা রেন্ডার থ্রেডটি মুক্ত করতে সেটআপ টাইমআউট ব্যবহার করতে পারি বা জাভাস্ক্রিপ্ট কোডটি ফুটারে রাখতে পারি, বা একটি জাভাস্ক্রিপ্ট লোডার ব্যবহার করতে পারি। মূল বিষয়টি হ'ল মাথায় প্রয়োজনীয় জাভাস্ক্রিপ্ট বিট এবং সিএসএস বিট অর্ডার করার বিষয়ে।
delay=400&jsdelay=1000এবং delay=500যা 100 মিমি বা 89 মাইলের কাছাকাছি কোথাও নেই। আমি অনুমান করি যে আপনি কোন সংখ্যার উল্লেখ করছেন আমি অস্পষ্ট।
