异步javascript加载器的推荐用法

Question

异步javascript加载器的推荐用法

bra*_*rad 0 javascript dependency-management asynchronous-loader

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

我想过几个可能的设置:

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

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

Answer 1

Ray*_*nos 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>

Run Code Online (Sandbox Code Playgroud)

我建议(1)你把它装在脑袋里.

这不是值得直列它在你的HTML(2),因为它停止缓存.更不用说你必须在任何地方内联它并且它只是丑陋.

一个有效的替代方案(3)(但个人不值得)是<script>使用JavaScript 创建一个标记并将其注入您的头脑中.如果这是在您的身体底部完成,它应该有希望在您的异步加载器启动之前完全加载您的html/css.

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

异步加载javascript的原因包括:

快速加载初始HTML/CSS.
你的标题保持"干净"
你的javascript和html显然是分开的.
您可以根据功能检测动态加载文件.
您可以清楚地定义文件间依赖关系.
您可以以模块化方式(如YUI)加载库,而不是加载整个库(如jQuery).

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

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

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

归档时间：	14 年，5 月前
查看次数：	1600 次
最近记录：	14 年，5 月前