建议在javascript无效之前包含css吗？

Is the recommendation to include CSS before JavaScript invalid?

在网上的无数地方，我都看到了在JavaScript之前包含CSS的建议。一般来说，推理是这样的：

When it comes to ordering your CSS and JavaScript, you want your CSS
to come first. The reason is that the rendering thread has all the
style information it needs to render the page. If the JavaScript
includes come first, the JavaScript engine has to parse it all before
continuing on to the next set of resources. This means the rendering
thread can't completely show the page, since it doesn't have all the
styles it needs.

我的实际测试揭示了一些非常不同的事情：

我的测试装具

我使用以下Ruby脚本为各种资源生成特定的延迟：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

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。

我使用下面的页面进行测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
<head>
test
<script type='text/javascript'>
var startTime = new Date();

<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">
</head>
<body>
<p>

Elapsed time is:
<script type='text/javascript'>
document.write(new Date() - startTime);

</p>
</body>
</html>

当我首先包含CSS时，页面需要1.5秒的时间来渲染：

CSS first

当我首先包含javascript时，页面需要1.4秒来呈现：

JavaScript first

我在Chrome、Firefox和Internet Explorer中得到了类似的结果。然而，在歌剧中，点菜并不重要。

似乎发生的是javascript解释器拒绝启动，直到所有的css都被下载。因此，当javascript线程获得更多运行时间时，让javascript包含First似乎更有效。

我是否遗漏了一些内容，建议将css include放在javascript include之前是否不正确？

_{很明显，我们可以添加async或使用setTimeout释放渲染线程，或将javascript代码放在页脚中，或使用javascript加载程序。这里的要点是关于在头部中对基本的javascript位和css位进行排序。}

相关讨论

这是一个非常有趣的问题。我总是把我的CSS 放在我的JS

我不会太强调你得到的结果，我相信这是主观的，但我有理由向你解释，最好在JS之前输入CSS。

在加载网站的过程中，您将看到两种情况：

案例1：白屏>非样式化网站>样式化网站>交互>样式化和交互网站案例2：白屏>非样式化网站>交互>样式化网站>样式化和交互网站我真的无法想象有人会选择第二种情况。这意味着使用慢速互联网连接的访问者将面临一个非样式化的网站，允许他们使用javascript与之交互(因为已经加载了该网站)。此外，通过这种方式，可以最大限度地延长浏览非样式网站的时间。为什么会有人想要？

它在jquery状态下也工作得更好

"When using scripts that rely on the value of CSS style properties,
it's important to reference external stylesheets or embed style
elements before referencing the scripts".

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

相关讨论

您的测试是在您的个人计算机上执行的，还是在Web服务器上执行的？它是一个空白页，还是一个复杂的在线系统，包含图像、数据库等？您的脚本是否执行简单的悬停事件操作，或者它们是您的网站如何呈现和与用户交互的核心组件？这里有几件事要考虑，当你冒险进入高质量的Web开发时，这些建议的相关性几乎总是成为规则。

"在顶部放置样式表和底部脚本"的目的是，一般来说，它是实现最佳渐进渲染的最佳方式，这对于用户体验至关重要。

除此之外，假设你的测试是有效的，而且你真的在产生与流行的规则相反的结果，那就不足为奇了。每一个网站(以及使整个东西出现在用户屏幕上所需的一切)都是不同的，互联网也在不断发展。

相关讨论

我把CSS文件放在javascript之前是因为另一个原因。

如果我的javascript需要动态调整某个页面元素的大小(对于那些在后面CSS确实是主要元素的角情况)，那么在JS被腐蚀后加载CSS可能会导致竞争条件，在应用CSS样式之前调整元素的大小，从而在样式最终开始时看起来很奇怪。如果我事先加载CSS，我可以保证事情按预期的顺序运行，并且最终的布局就是我想要的。