Question

以下链接http://developer.yahoo.com/performance/rules.html#js_bottom说为了加速你的网站，“把脚本放在底部”。假设我已将它们添加到底部

<html>
<head></head>
<body>
...
...
...
html
....
<script src="script1"/>
<script src="script2"/>
<script src="script3"/>
</body>
</html>

现在，如果我需要在html中间某处访问那些js文件的某些功能，我该怎么做？假设代码就像这样

    <html>
    <head></head>
    <body>
    ...
    ...
    ...
    html
    .....
<script>
$('a.test').modal('show);
</script>
    ....
    <script src="script1"/>
    <script src="script2"/>
    <script src="script3"/>
    </body>
    </html>

在“$”之上，“modal”等是附在页面底部的js库的一部分。如何检测底部脚本的完成并触发用脚本标记写的代码（

$（ 'a.test'）模态（'上显示）;

）

Answer 1

要执行脚本，您必须确保必须为该脚本提供所有必需的依赖项。因此，您有两种选择：

在特定脚本之前放置必要的脚本引用
将脚本放在页面底部。

没有什么是一成不变的，真正的解决方案取决于你的特定问题。

Answer 2

这是一个很好的编码实践，可以将所有脚本保存在html的一部分。话虽如此，我建议同样的事情，在底部最多加载脚本，这有助于快速加载。就依赖性而言，如果脚本依赖于某些东西，请在调用之前尝试包含它。它基本上是迭代的：）

Answer 3

您必须考虑您的设计以及您想对页面做些什么。

从您的假设开始：在底部放置标签可加快您的网站速度。它加快了你的网站吗？并不是的。那它是做什么的？在DOM底部加载脚本的优点意味着DOM总是首先被加载。

页面从上到下进行解析，一旦遇到脚本标记就会被执行。如果脚本标记上有一个链接，则脚本会同步加载，从而阻止呈现DOM。

如果您绝对需要jQuery在页面中间执行操作，请将其加载到顶部。您的网页现在变慢了吗？是的，加载jQuery花了一秒钟。您的受众受到影响了吗？多少钱？一秒？

小贴士：在顶部加载脚本很好。加载最终总计大约1 MB的10个脚本并不是因为它会影响UX。

正如其他人所提到的，你总是可以选择操作代码的那一部分，而不需要在页面中间运行脚本。无论如何，将UI与代码分开是一种更好的做法。

Answer 4

您可以推迟执行$，以便在脚本加载之后代码才会运行。

http://www.mrclay.org/2010/11/14/using-jquery-before-its-loaded/

检测底部存在的js脚本文件的完成情况

4 个答案: