1

我正在构建一个 Rails 应用程序，似乎常见的做法是在页面顶部列出 javascript_include_tags。

是否会使浏览器在加载文档之前加载 javascript，从而使可见元素的加载时间更长？

谢谢你。

4

5 回答 5

5

据我在网上阅读，最佳实践在 body 标记的底部加载 javascript 文件。这可以让几乎所有内容在执行 javascript 之前加载，如果您在顶部加载脚本，这通常可以防止访问可能不存在的项目时出现问题。

于 2012-04-09T16:38:32.280 回答
4

一篇关于网页性能的 Yahoo 帖子建议将它们包含在页面底部（Source），因为如果它们位于顶部，它们可以阻止其他依赖项的并行下载。

于 2012-04-09T16:39:47.233 回答
3

看起来有些答案是正确的，但没有一个能概括一切：

  • 如何防止javascript加载加载其他元素？很简单，把它放在结束</body>标签之前。这通常意味着 HTML 页面结束前的几个字符。
  • 将所有 javascript 放入外部 .js 文件中。为什么？这样即使 HTML 页面发生变化，浏览器也可以缓存这些文件。
  • 将所有 javascript 文件聚合并缩小为一个。为什么？因为客户端发出的 HTTP 请求越少，页面加载速度就越快。

此外，您不必关心$(document).ready()or window.onload，因为您的所有 HTML 元素都将在 javascript 文件之前加载（也就是说，如果您将 JS 文件放在结束</body>标记之前）。

于 2012-04-09T16:51:13.703 回答
0

使用外部 JS 文件并缩小其内容是个好主意。

页面底部也是 John Fisher 所说的选项。

如果使用 ie jQuery，您无论如何都要使用$()或$(document).ready(function()确保在您尝试使用 JS 函数之前加载页面 DOM。

于 2012-04-09T16:41:42.353 回答
0

与其将行为嵌入其标记中，不如尝试通过将脚本移动到页面部分中的脚本块（在文档正文范围之外）来隔离脚本，如下所示：

<script type="text/javascript">
window.onload = function() {
document.getElementById('testButton').onclick = function() {
document.getElementById('xyz').style.color = 'red';
};
};
</script>

出于性能原因，也可以将脚本块放置在文档正文的底部，尽管现代浏览器使性能差异变得毫无意义。重要的概念是避免在结构元素中嵌入行为元素。

于 2012-04-09T16:43:55.810 回答