Çevrimiçi sayısız yerde JavaScript'ten önce CSS ekleme önerisini gördüm. Akıl yürütme genellikle bu biçimdedir :
CSS ve JavaScript'inizi sipariş etmek söz konusu olduğunda, CSS'nizin önce gelmesini istersiniz. Bunun nedeni, oluşturma iş parçacığının sayfayı oluşturmak için gereken tüm stil bilgilerine sahip olmasıdır. Önce JavaScript içeriyorsa, JavaScript motorunun sonraki kaynak kümesine devam etmeden önce hepsini ayrıştırması gerekir. Bu, oluşturma iş parçacığının sayfayı tam olarak gösteremeyeceği anlamına gelir, çünkü ihtiyacı olan tüm stillere sahip değildir.
Gerçek testim oldukça farklı bir şey ortaya koyuyor:
Test kayışım
Çeşitli kaynaklar için belirli gecikmeler oluşturmak için aşağıdaki Ruby komut dosyasını kullanın:
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..."
}
Yukarıdaki mini sunucu, JavaScript dosyaları (hem sunucu hem de istemci) için keyfi gecikmeler ve keyfi CSS gecikmeleri ayarlamama izin veriyor. Örneğin http://10.0.0.50:8081/test.css?delay=500, CSS aktarımı için 500 ms gecikme veriyor.
Test etmek için aşağıdaki sayfayı kullanıyorum.
<!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>
Önce CSS'yi eklediğimde, sayfanın oluşturulması 1.5 saniye sürer:
Önce JavaScript'i eklediğimde, sayfanın oluşturulması 1,4 saniye sürer:
Chrome, Firefox ve Internet Explorer'da benzer sonuçlar alıyorum. Opera'da ise, sipariş vermek önemli değil.
Görünen şey, JavaScript yorumlayıcısının tüm CSS indirilene kadar başlamayı reddetmesidir. Yani, JavaScript iş parçacığı daha fazla çalışma süresi aldıkça, önce JavaScript içerme özelliğinin daha verimli olduğu görülmektedir.
Bir şey eksik mi, JavaScript içermeden önce CSS içerme önerisi doğru değil mi?
Oluşturma iş parçacığını serbest bırakmak veya JavaScript kodunu altbilgiye koymak veya bir JavaScript yükleyici kullanmak için zaman uyumsuzluk ekleyebileceğimiz veya setTimeout'u kullanabileceğimiz açıktır. Buradaki nokta, temel JavaScript bitlerinin ve CSS bitlerinin kafada sıralanmasıyla ilgilidir.
delay=400&jsdelay=1000ve delay=500hiçbir yerde olmayan. Sanırım hangi sayıları kastettiğinizden emin değilim.
