建议在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已知的（也许这是由竞争条件引起的吗？）。根据使用的浏览器，此效果似乎更大或更小。