ASPX 页面中 CSS 和脚本调用的顺序答案

【问题标题】：Order of CSS and Script Calls in an ASPX pageASPX 页面中 CSS 和脚本调用的顺序
【发布时间】：2011-04-27 09:40:09
【问题描述】：

在 ASPX 页面中调用外部 CSS 或脚本是否有任何特定的顺序可以帮助减少页面加载时间？

即

script type="text/javascript" src="../Includes/JavaScript/jquery.ui.tabs.js" 
link href="../Includes/css/ui.all.css" rel="Stylesheet" type="text/css"

或

link href="../Includes/css/ui.all.css" rel="Stylesheet" type="text/css"    
script type="text/javascript" src="../Includes/JavaScript/jquery.ui.tabs.js"

或者其他命令？

【问题讨论】：

标签： javascript asp.net css

【解决方案1】：

当然，页面加载时间可能意味着不止一件事。对于最终用户来说，这可能意味着在屏幕上看到某些东西所花费的时间。或者它可能意味着下载所有资源所花费的时间。

您在任何时候都只能打开两个到给定服务器的连接（至少是这种情况，see here for reference）。因此，考虑到这一点，您应该关注以下几点。

尝试通过组合 JS 和 CSS 文件并压缩它们来尽量减少请求的数量。有很多实用程序可以做到这一点。这可能会对您能做的任何事情产生最大的影响。
正如 Fermin 指出的那样，CSS 然后 JS 是一个很好的经验法则。您可能仅限于您可以通过级联来处理 CSS 文件的顺序，以及通过库依赖项来处理 JS 文件的顺序。但是，请尽量确保顶部没有两个大文件，这会阻止会话中的其他下载，直到它们完成为止。

【讨论】：

【解决方案2】：

常识说：把延迟最大的放在第一位。

假设加载延迟分别为 100ms 和 50ms；

如果 100ms 的请求在 50ms 前 10ms 发出，则总延迟变为 (0ms + (100ms || 10ms+50ms)) = 100ms。
如果较短的请求先发，则得到 (0ms + ( 50ms || 10ms + 100ms ) ) = 110ms。

但请务必区分挂钟时间、吞吐量时间和用户体验时间。

【讨论】：

【解决方案3】：

两者都需要加载，所以我会选择“否”。任何订单都无助于增加页面加载时间。

无论如何，按照习惯，我在 JS 之前加载 CSS，这样即使两者都需要完全加载，至少在 CSS 加载时似乎是这样。

【讨论】：

【解决方案4】：

最佳做法是将样式表调用放在 HEAD 元素的顶部，将脚本调用放在底部，最好是放在 BODY 元素的底部。

详情请见http://developer.yahoo.com/yslow/help/#guidelines。

【讨论】：