刚刚开始研究异步 javascript 加载库，例如 lab.js和script.js 。我的问题是关于使用此类异步加载模式的最佳实践。
我想到了几种可能的设置:
使用脚本标签在顶部或页面加载异步加载器。这允许 gzip 压缩和缓存，但它也会在初始加载期间阻塞。这可能不是一个大问题，因为这些加载器应该相当小(我们是否应该首先加载 css)？
将异步加载器代码内联到您的 html 中，然后立即开始使用来加载依赖项。这意味着异步加载器没有单独的请求，因此它可能会快一点，但它也不会被压缩和缓存，因此每次都必须加载。
在页面底部执行 JS 的经典加载，以便首先加载样式表等。将异步加载器放置在页面底部的阻塞脚本标记中，然后异步加载所有依赖项。
最常用的场景是什么，人们通常如何异步加载他们的js？
最佳答案
<head>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
我建议(1)您将其加载到头部。
不值得将其内联到 html (2) 中，因为它会停止缓存。更不用说您必须在任何地方内联它，而且它很丑陋。
一个有效的替代方案 (3)(但个人认为不值得)是创建 <script>使用 JavaScript 标记并将其注入(inject)您的大脑。如果这是在你的 body 底部完成的，它应该允许你的 html/css 在异步加载器启动之前完全加载。
作为一个不错的奖励，require.js 允许你提供一个指向主脚本的指针，一旦 require 加载，它就会加载该脚本。然后，您可以在主脚本中完成大部分异步文件加载，并根据每个文件在页面上的要求设置一组明确定义的要求。
异步加载 JavaScript 的原因包括
- 快速加载初始 HTML/CSS。
- 您的 header 保持“干净”
- 您的 JavaScript 和 html 明显分开。
- 您可以根据功能检测动态加载文件。
- 您可以清楚地定义文件间依赖关系。
- 您可以以模块化方式加载库(如 YUI)，而不是加载整个库(如 jQuery)。
这样的例子不胜枚举。在您的默认/共享 View 或母版页中包含类似上面的行非常干净整洁。
扩展基于特征检测的动态加载 JavaScript 文件。我的意思是你可以浏览应该加载 javascript 文件的 DOM。例如，如果您有 <ul class="image-slider">在您的页面上，您可以通过标准 css 选择器检测到并加载您的 image-slider.js文件以使用 JavaScript 不显眼地增强它。
这意味着您不必手动将其包含在带有图像 slider 的每个页面上。默认情况下，您不必包含在每个页面上，您可以使用一条信息(类名称)来应用视觉样式和功能。
关于javascript - 异步 javascript 加载器的推荐用法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5502472/