オンラインの数え切れないほどの場所で、JavaScriptの前にCSSを組み込むことを推奨しています。推論は一般に、この形式のものです：
CSSとJavaScriptの注文に関しては、CSSが最初に来るようにします。その理由は、レンダリングスレッドには、ページのレンダリングに必要なすべてのスタイル情報があるためです。JavaScriptのインクルードが最初に来る場合、JavaScriptエンジンはそれをすべて解析してから次のリソースセットに進む必要があります。つまり、必要なスタイルがすべて揃っていないため、レンダリングスレッドはページを完全には表示できません。
私の実際のテストでは、まったく異なるものが明らかになりました。
私のテストハーネス
次のRubyスクリプトを使用して、さまざまなリソースに特定の遅延を生成します。
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..."
}上記のミニサーバーを使用すると、JavaScriptファイル（サーバーとクライアントの両方）に任意の遅延と任意の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秒かかります。
最初にJavaScriptを含めると、ページのレンダリングに1.4秒かかります。
Chrome、Firefox、Internet Explorerでも同様の結果が得られます。ただし、Operaでは、順序は重要ではありません。
すべてのCSSがダウンロードされるまで、JavaScriptインタープリターは開始を拒否しているようです。したがって、JavaScriptスレッドの実行時間が長くなるほど、JavaScriptを最初にインクルードする方が効率的であるようです。
何か不足していますか？JavaScriptインクルードの前にCSSインクルードを配置するという推奨は正しくありませんか？
非同期を追加したり、setTimeoutを使用してレンダリングスレッドを解放したり、JavaScriptコードをフッターに挿入したり、JavaScriptローダーを使用したりできることは明らかです。ここで重要なのは、主要なJavaScriptビットとCSSビットをヘッドで順序付けることです。
delay=400&jsdelay=1000、delay=500それは100ミリ秒または89ミリ秒の近くではありません。あなたがどの番号を参照しているかはわかりません。
