Question

什么决定了Require.js早期加载文件所需的时间？脚本执行后是否立即执行加载？在DOMContentLoaded之后？还有别的吗？

我正在对我想要优化的页面进行概要分析，并且我经常注意到的一点是，需要比其他脚本更明显地触发，可能是什么原因？

Answer 1

JRBurke有时会在这里闲逛，所以他能够比我更好地回答，因为我只是做一些假设。

听起来你在你的页面中使用了多个脚本标签，所以如果我不得不猜测我会说RequireJS依赖只是加载晚于其他脚本标签。 Here's a whole bunch of info on the load and execute order of script tags

否则，我对RequireJS的理解是它根据需要加载东西。想象一下，你的RequireJS标签如下所示：

<script src="lib/require.js" data-main="main.js"></script>

如果您的main.js文件如下所示：

requirejs.config({ /*conf */ });

然后RequireJS加载主文件，该文件配置RequireJS，并且不再执行任何操作。稍后，也许你的一个文件是这样的：

/* code, code code */
require(
    ['dist/module'],
    function( distModule ){
        /* code code code */
    }
);

在此点，Require会开始触发请求以解析dist/module的所有依赖关系链。如果之前的任何代码引入了延迟（比如等待加载某些内容，或者它是否包含在jQuery DOMReady中），则在所有这些延迟都解决之后，RequireJS将不会开始加载模块。

我的情况略有不同，可能会提供一些见解。我的整个应用程序中只有一个脚本标记：

<script src="vendor/require.js" data-main="build/app"></script>

我的主文件如下所示：

requirejs.config({ /*conf */ });

require(
    ['dist/module1', 'dist/module2'],
    function( distModule1, distModule2 ){
        /* code code code */
    }
);

distModule1和distModule2开始加载整个应用程序，并将启动每个请求以获得主视图所需的内容。随着我在应用程序中移动，它会触发一个请求以获取后续视图所需的内容。我实际上使用r.js whole-project optimizer将所有内容编译到一个文件中，因此加载后，整个应用程序就会加载（300kb左右）。

总之，只要浏览器遇到脚本标记，就会加载RequireJS 库。以这种方式加载的代码会立即执行。假设我正确理解RequireJS，那么库会立即尝试加载data-main文件 - 我相信这是异步完成的。

每次遇到模块时，RequireJS都会加载它们asynchronously。你看到的任何延迟都可能与此有关。

Require.js何时加载文件？

1 个答案: