为什么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. 当放置在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中），效果是您会看到文本闪烁。