Rails有助于更快地从底层加载javascript

Rails help getting javascript loading faster from bottom

本文关键字：加载 javascript 有助于 Rails      更新时间：2023-09-26

我遇到了这个问题，我得到了一些显示flexibg图像的javascript。它只有在页面底部才有效。就在之前

问题是javascript被加载为最后一个。我可以看到灵活的bg图像只是散布愿望是不好的。

我的代码：

<%= javascript_include_tag 'flexibg.js' %>
</body>

我该怎么做才能使flexi-bg-javascript作为第一个或更快地加载？

编辑：

我已经移动了body标记顶部的javascript，它仍然有效。但它非常慢。

好的，要理解您的问题，您需要对页面加载方式有基本的了解。简短的（不是100%准确，但足够好）解释是，浏览器从页面的顶行开始一行接一行地浏览。当它击中每个脚本标记时，它会加载它（并且在完成之前不会移动到其余的行，这就是为什么将脚本标记放在底部被认为是最佳实践的原因）。

一旦浏览器（在它看来）有足够的渲染值，它就会开始渲染它所拥有的。很可能这就是导致您出现问题的原因：浏览器最初加载的图像具有错误的维度，只有当JS加载/运行时，才会设置正确的维度。

要解决这个问题，您必须首先隐藏整个页面，然后在加载页面后显示它。基本上你想做一些事情的效果：

<script src="yourFile.js"/> <!-- This could go at the end -->
<body id="theBody" style="display:none"> <!-- rest of document --></body>
<script>document.getElementById("theBody").style.display = "";</script>

这样，浏览器将命中BODY标记和后续内容，但由于display:none样式，它不会渲染任何内容。然后，当浏览器到达末尾时，它将命中删除display:none样式的脚本标记，显示页面。

这只是一个快速的例子，有些细节可能会被忽略（例如，我认为在body标记之后不允许使用脚本标记），但希望你能理解。如果没有，请发表评论，我将尝试进一步解释。

相关文章：