在网上无数的地方，我都看到过在JavaScript之前使用CSS的建议。推理一般是这样的:
当涉及到CSS和JavaScript的排序时，你需要你的CSS 先来。原因是呈现线程拥有所有的 样式显示页面所需的信息。如果JavaScript include首先出现，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给我一个500毫秒延迟传输CSS。
我使用下面的页面进行测试。
<!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和ie浏览器上得到了类似的结果。然而，在Opera中，顺序并不重要。
似乎发生的情况是，JavaScript解释器在下载所有CSS之前拒绝启动。因此，首先使用JavaScript包含似乎更有效，因为JavaScript线程获得了更多的运行时间。
我遗漏了什么吗?把CSS include放在JavaScript include之前的建议是不正确的吗?
显然，我们可以添加async或使用setTimeout来释放呈现线程，或将JavaScript代码放在页脚中，或使用JavaScript加载器。这里的重点是关于基本JavaScript位和CSS位在头部的排序。
