CSS应该总是在JavaScript之前吗？
在网上无数的地方，我看到了在JavaScript之前包含CSS的建议。推理通常是，这种形式的：
在排序CSS和JavaScript时，您需要您的CSS先来。原因是渲染线程具有所有的样式信息，它需要呈现页面。如果JavaScript包含先来，JavaScript引擎必须先解析它继续下一组资源。这意味着渲染线程不能完全显示页面，因为它没有所有的它需要的风格。
我的实际测试揭示了一些完全不同的东西：
我的测试背带
我使用以下ruby脚本为各种资源生成特定的延迟：
require 'rubygems'require 'eventmachine'require 'evma_httpserver'require 'date'
class Handler < EventMachine::Connectioninclude EventMachine::HttpServer
def process_http_requestresp = EventMachine::DelegatedHttpResponse.new( self )
return unless @http_query_string
path = @http_path_infoarray = @http_query_string.split("&").map{|s| s.split("=")}.flattenparsed = Hash[*array]
delay = parsed["delay"].to_i / 1000.0jsdelay = 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 requestoperation = proc dosleep delay
if path.match(/.js$/)resp.status = 200resp.headers["Content-Type"] = "text/javascript"resp.content = "(function(){var start = new Date();while(new Date() - start < #{jsdelay}){}})();"endif path.match(/.css$/)resp.status = 200resp.headers["Content-Type"] = "text/css"resp.content = "body {font-size: 50px;}"endend
# Callback block to execute once the request is fulfilledcallback = proc do |res|resp.send_responseend
# Let the thread pool (20 Ruby threads) handle requestEM.defer(operation, callback)endend
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毫秒延迟。
我使用以下页面进行测试。
<!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包含之前的建议是否不正确？
很明显，我们可以添加async或使用setTimeout来释放渲染线程，或将JavaScript代码放在页脚中，或使用JavaScript加载器。这里的重点是关于头部中基本JavaScript位和CSS位的顺序。
最佳答案