ජාවාස්ක්‍රිප්ට් වලට පෙර CSS ඇතුළත් කිරීමේ නිර්දේශය අන්තර්ජාලය හරහා ගණන් කළ නොහැකි ස්ථානවල මම දැක ඇත්තෙමි. තර්කනය සාමාන්‍යයෙන් මෙම ස්වරූපයෙන් වේ :
ඔබේ 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..."
}
ජාවාස්ක්‍රිප්ට් ලිපිගොනු (සේවාදායකය සහ සේවාදායකයා යන දෙකම) සහ අත්තනෝමතික CSS ප්‍රමාදයන් සඳහා අත්තනෝමතික ප්‍රමාදයන් සැකසීමට ඉහත කුඩා සේවාදායකය මට ඉඩ දෙයි. උදාහරණයක් ලෙස, http://10.0.0.50:8081/test.css?delay=500මට CSS මාරු කිරීම 500 ms ප්‍රමාදයක් ලබා දෙයි.
පරීක්ෂා කිරීම සඳහා මම පහත පිටුව භාවිතා කරමි.
<!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 ක් ගතවේ:
මට ක්‍රෝම්, ෆයර්ෆොක්ස් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් වල සමාන ප්‍රති results ල ලැබේ. කෙසේ වෙතත්, ඔපෙරාහි, ඇණවුම් කිරීම වැදගත් නොවේ.
සිදුවෙමින් පවතින දෙය නම්, සියලුම CSS බාගත කරන තුරු ජාවාස්ක්‍රිප්ට් පරිවර්තකය ආරම්භ කිරීම ප්‍රතික්ෂේප කිරීමයි. එබැවින්, ජාවාස්ක්‍රිප්ට් නූලට වැඩිපුර ධාවන කාලය ලැබෙන බැවින් පළමුව ජාවාස්ක්‍රිප්ට් තිබීම වඩා කාර්යක්ෂම බව පෙනේ.
මට යමක් මග හැරී ඇත්ද, ජාවාස්ක්‍රිප්ට් ඇතුළත් කිරීමට පෙර CSS ඇතුළත් කිරීම නිර්දේශය නිවැරදි නොවේද?
විදැහුම් නූල් නිදහස් කිරීමට හෝ ජාවාස්ක්‍රිප්ට් කේතය පාදකයේ තැබීමට හෝ ජාවාස්ක්‍රිප්ට් ලෝඩරයක් භාවිතා කිරීමට අපට අසින්ක් එකතු කිරීමට හෝ සෙට් ටයිමවුට් භාවිතා කළ හැකි බව පැහැදිලිය. මෙහිදී වැදගත් වන්නේ ජාවාස්ක්‍රිප්ට් බිටු සහ සීඑස්එස් බිටු හිසෙහි ඇණවුම් කිරීමයි.
