在网上的无数地方，我看到了建议在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给我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和Internet Explorer中得到了类似的结果。但是，在Opera中，排序根本没有关系。
似乎正在发生的事情是JavaScript解释器拒绝启动，直到所有CSS被下载为止。因此，随着JavaScript线程获得更多的运行时间，似乎首先包含JavaScript会更有效。
我是否遗漏了一些东西，建议将CSS包含放在JavaScript包含之前是不正确的？
显然，我们可以添加异步或使用setTimeout释放渲染线程或将JavaScript代码放在页脚中，或使用JavaScript加载器。这里的重点是关于头部中必需的JavaScript位和CSS位的排序。
120
1511和1422有统计显着性差异吗？那是6％。人与人之间显着绩效差异的一般阈值约为20％。
—
Jeff Atwood
关键是重新排序消除了这种任意延迟，您可以将延迟设置为所需的任何值，这只是问题的演示。
—
Sam Saffron '02
是您延迟100毫秒吗？屏幕截图的区别是89ms。在你的URL，就
—
Jeff Atwood
delay=400&jsdelay=1000和delay=500这是隔靴搔痒为100ms或89ms。我想我不清楚您指的是哪个数字。
“如果首先包含Javascript，则Javascript引擎必须先解析所有内容，然后再继续下一组资源。这意味着呈现线程无法完全显示页面，因为它没有所需的所有样式。” -如果JS包含位于头部，那么无论页面的CSS包含之前还是之后，JS都会在呈现页面之前执行。
—
nnnnnn '02
不知道您是否考虑过这一点，但是加载时间的感知也很重要。因此，例如，如果首先加载CSS甚至只给您页面背景颜色/纹理，它似乎会更快。绝对加载时间可能并不表示这一点。
—
Rakesh Pai
