建议在JavaScript之前包含CSS无效吗？

Question

在网上的无数地方，我看到了建议在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上面的微型服务器允许我为JavaScript文件（服务器和客户端）设置任意延迟，以及CSS延迟。例如，http://10.0.0.50:8081/test.css?delay=500给我500毫秒的CSS传输延迟。当我首先包含CSS时，页面需要1.5秒的时间来呈现：CSS优先当我首先包含JavaScript时，页面需要1.4秒的时间呈现：JavaScript优先我在Chrome，Firefox和Internet Explorer中得到了类似的结果。但是，在Opera中，排序根本没有关系。似乎正在发生的事情是JavaScript解释器拒绝启动，直到所有CSS被下载为止。因此，随着JavaScript线程获得更多的运行时间，似乎首先包含JavaScript会更有效。我是否遗漏了什么，建议将CSS包含放在JavaScript包含之前是不正确的？显然，我们可以添加异步或使用setTimeout释放渲染线程或将JavaScript代码放在页脚中，或使用JavaScript加载器。这里的重点是关于头部中必需的JavaScript位和CSS位的排序。

Answer 1

我不会在您获得的结果上强调太多，我相信这是主观的，但是我有理由向您解释，最好将CSS放在js之前。

在加载网站期间，您会看到两种情况：

案例1：白屏>无样式的网站>样式化的网站>交互>样式化和交互式的网站

案例2：白屏>无样式的网站>交互性>样式化的网站>样式化和交互式的网站

我真的无法想象有人选择案例2。这意味着使用慢速互联网连接的访问者将面临一个无样式的网站，该网站允许他们使用Javascript与该网站进行互动（因为该网站已经加载）。此外，通过这种方式可以最大程度地增加花在浏览无样式网站上的时间。为什么有人要那个？

正如jQuery所述，它也可以更好地工作

“当使用依赖CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要”。

当文件以错误的顺序加载（首先是JS，然后是CSS）时，依赖于CSS文件中设置的属性（例如div的宽度或高度）的任何Javascript代码都将无法正确加载。似乎使用错误的加载顺序，正确的属性有时是Javascript已知的（也许这是由竞争条件引起的吗？）。根据使用的浏览器，此效果似乎更大或更小。