在 ASPX 页面中放置 JavaScript 和 CSS答案

【问题标题】：Placement of JavaScript and CSS in ASPX page在 ASPX 页面中放置 JavaScript 和 CSS
【发布时间】：2012-12-26 06:02:10
【问题描述】：

谁能建议我应该将 JavaScript 和 CSS 代码放在 ASPX 页面的什么位置？在开头还是结尾？ JavaScript 和 CSS 放置错误会影响页面优化吗？

【问题讨论】：

标签： javascript asp.net css

【解决方案1】：

最好将它们都放在单独的文件中，然后将它们包含在您的 aspx 页面中。通过这种方式，您可以在多个页面上使用相同的 CSS 和 Javascript。

但是，如果您只想在一个页面中使用 CSS 和 Javascript，那么您应该将 css 放在 head 标签中，您可以将 javascript 放在 head 标签之间或 html 之间的任何位置，但放置 javascript 的最佳位置是在 head 标签之间。最好把jquery库文件之类的js放在head里。

【讨论】：

我可以在 head 标签上写一个依赖于页面底部加载的文件的 js 函数吗？在 head 标签中编写 document.ready 事件并在底部引用 jQuery.js 的示例。它会起作用吗？
@Murali，尝试使用 $(window).load 而不是 document.ready 以确保在加载完 .js 文件后执行脚本。
单独的 css 和 java-script 文件意味着更多的服务器请求。但是浏览器可以缓存这些文件的主要好处。

【解决方案2】：

将 CSS 放在页面顶部，将 JavaScript 放在页面底部（在结束正文标记之前）是当您希望 CSS 和脚本位于同一页面时的最佳方式。

你可以在这篇文章中阅读（陈述的要点在中间部分解释）-

http://developer.yahoo.com/performance/rules.html

JavaScript 应该位于底部的原因是，您在 JavaScript 中访问的任何页面元素都应该首先加载到 DOM 中。如果写在<head>部分，很可能是JavaScript找不到HTML中的元素而报错或者执行失败。

【讨论】：

【解决方案3】：

我建议

将样式表调用放在<HEAD>元素的顶部并
页面底部</body> 标记之后的脚本。（在某些情况下）

因为这将使您的网页加载速度更快。

注意：

第二点并不总是正确的，因为在某些情况下，您希望脚本在这些脚本的帮助下执行部分内容。

所以YES，javascript和css的放置错误会影响页面的优化

【讨论】：

【解决方案4】：

我想补充一点：

脚本应放在页面底部，例如在</body> 标签之后提供的页面加载不依赖于该脚本。

注意：将脚本放在页面底部可以提高显示速度，因为脚本编译会减慢显示速度。

【讨论】：