Question

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

我想过几个可能的设置：

使用脚本标记在顶部或页面加载异步加载程序。这允许gzipping和缓存，但它也会在初始加载期间阻塞。这可能不是巨大的交易，因为这些加载器应该相当小（我们应该首先加载css）吗？
在您的html中嵌入异步加载器代码，然后立即开始使用以加载依赖项。这意味着没有对异步加载器的单独请求，因此它可能可能更快，但它也不会被gzip压缩和缓存，因此每次都必须加载。
在页面底部执行JS的经典加载，以便首先加载样式表等。将异步加载器放在页面底部的阻塞脚本标记中，然后异步加载所有依赖项。

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

Answer 1

<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 ）（但个人不值得）是使用JavaScript创建<script>标记并将其注入您的脑海中。如果这是在你的身体底部完成的，那么它应该允许你的html / css在异步加载器启动之前完全加载。

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

异步加载JavaScript的原因包括

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

这个名单还在继续。在默认/共享视图或母版页中包含如上所示的行非常干净整洁。

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

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

异步javascript加载器的推荐用法

1 个答案: