0

刚开始研究异步 javascript 加载库，例如lab.js和script.js。我的问题是关于使用这种异步加载模式的最佳实践。

我想到了几个可能的设置：

  1. 在顶部或带有脚本标签的页面加载异步加载器。这允许 gzipping 和缓存，但它也会在初始加载期间阻塞。这可能不是什么大问题，因为这些加载器应该相当小（我们是否应该先加载 css）？

  2. 将异步加载器代码内联在您的 html 中，然后立即开始使用以加载依赖项。这意味着对异步加载器没有单独的请求，因此它可能会更快一些，但它也不会被压缩和缓存，因此每次都必须加载它。

  3. 在页面底部执行经典的 JS 加载，以便首先加载样式表等。将异步加载器放在页面底部的阻塞脚本标签中，然后异步加载所有依赖项。

最常用的场景是什么，人们通常如何异步加载他们的js？

4

1 回答 1

5 
<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 创建一个标签并将其注入您的头脑中。如果这是在你的身体底部完成的，它应该希望你的 html/css 在你的异步加载器启动之前完全加载。

作为一个很好的奖励，require.js 允许你给你的主脚本一个指针，它会在 require 加载后加载。然后，您可以在主脚本中完成大部分异步文件加载，并根据页面上的要求为每个文件设置一组明确定义的要求。

异步加载 javascript 的原因包括

  • 快速加载初始 HTML/CSS。
  • 您的标题保持“干净”
  • 您的 javascript 和 html 显然是分开的。
  • 您可以根据特征检测动态加载文件。
  • 您可以清楚地定义您的文件间依赖关系。
  • 您可以以模块化方式（如 YUI）加载库，而不是加载整个库（如 jQuery）。

而这样的例子不胜枚举。在默认/共享视图或母版页中包含上述行非常干净整洁。

扩展基于特征检测的动态加载javascript文件。我的意思是你可以浏览应该加载 javascript 文件的 DOM。例如，如果您<ul class="image-slider">的页面上有一个，那么您可以通过标准的 css 选择器检测到它并加载您的image-slider.js文件以使用 JavaScript 不显眼地增强它。

这意味着您不必使用图像滑块手动将其包含在每个页面上。默认情况下，您不必在每个页面上都包含，您可以使用一条信息（类名）来应用视觉样式和功能。

于 2011-03-31T15:43:44.170 回答