javascript - 为什么javascript在脚本标签与js文件中的性能不同

Question

我正在使用一个为我的主页标题设置动画的 jquery 函数。当我在我的 html 中执行 javascript 时，一切正常（文本立即动画）。当我将函数移动到单独的 .js 文件中时，文本首先闪烁，然后动画。

正在运行 javascript 的 html：

<h1><a href="#home">This i</a></h1>

html中的javascript：

<script>
    $(function() {
        $(".letter-container h1 a").lettering();
    });
</script>

移动到 .js 文件时的 javascript：

$(function() {
        $(".letter-container h1 a").lettering();
});

我的问题是：

1. 为什么将 javascript 放置在 html 文件中的脚本标记与放置在单独的 .js 文件中时，javascript 的执行方式不同
2. 有什么办法可以将函数保留在 .js 文件中并修复延迟？

谢谢！

Answer 1

当放入单独的.js文件时，它需要浏览器发出单独的 HTTP 请求（如果资源尚未缓存）。这意味着网络成为敌人。如果您在服务器上正确设置缓存，这应该不是什么大问题。

除此之外，Javascript 的解释/编译方式相同。

Answer 2

这不仅是网络流量（下载额外的 js），也是执行 javascript 的点。

如果你有代码

<div id="div1">
......
</div>
<script type="text/javascript">
myfunction();
</script>
<div id="div2">
....
</diV>

myfunction将在 div1 创建之后但在 div2 之前运行。

但是，如果您从包含在标头中的 .js 运行某些功能，它将在整个页面加载后运行（我假设您正在使用$.ready()或类似的东西）。因为浏览器会在页面加载期间显示元素（除了您将所有内容都放在 中table），因此您会看到文本闪烁。