异步 javascript 加载器的推荐用法
刚刚开始研究异步 javascript 加载库，例如 lab.js 和 script.js。我的问题是关于使用这种类型的异步加载模式的最佳实践。
我想到了一些可能的设置：
在顶部或带有脚本标记的页面加载异步加载器。这允许 gzip 压缩和缓存，但它也会在初始加载期间阻塞。这可能不是一个大问题，因为这些加载器应该相当小（我们是否应该首先加载 css）？
将异步加载器代码内联到您的 html 中，然后立即开始使用来加载依赖项。这意味着异步加载器没有单独的请求，因此它可能会快一点，但它也不会被压缩和缓存，因此每次都必须加载。
在页面底部执行 JS 的经典加载，以便首先加载样式表等。将异步加载器放置在页面底部的阻塞脚本标记中，然后异步加载所有依赖项。
最常用的场景是什么，人们通常如何异步加载他们的js？
Just started looking at asynchronous javascript loading libs such as lab.js and script.js. My question is about best practises for using this type of async loading pattern.
I've thought of a couple possible setups:
Load the async loader at the top or the page with a script tag. This allows for gzipping and caching, but it also blocks during this initial load. This is likely not a huge deal as these loaders are supposed to be fairly small (should we load css first still) ?
Have the async loader code inline in your html, then start using immediately to load dependencies. This means there's no separate request for the async loader so it's likely a bit faster, but it also doesn't get gzipped and cached, so it has to get loaded each time.
Do the classic load of JS at the bottom of the page so stylesheets etc are loaded first. Place async loader in blocking script tag at the bottom of the page, then load all dependencies asynchronously.
What is the most used scenario, how do people normally load their js asynchronously ??
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我建议（1）您将其加载到头部。
将其内联到 html (2) 中是不值得的，因为它会停止缓存。更不用说你必须在任何地方内联它，而且它很丑陋。
一个有效的替代方案 (3)（但个人认为不值得）是使用 JavaScript 创建一个
作为一个不错的奖励，require.js 允许你提供一个指向主脚本的指针，一旦 require 加载，它就会加载该脚本。然后，您可以在主脚本中完成大部分异步文件加载，并根据每个文件在页面上的要求设置一组明确定义的要求。
异步加载 javascript 的原因包括
这样的例子还在继续。在默认/共享视图或母版页中包含类似上面的行非常干净整洁。
扩展基于特征检测的动态加载 javascript 文件。我的意思是你可以浏览应该加载 javascript 文件的 DOM。例如，如果您的页面上有
，那么您可以通过标准 css 选择器检测到它并加载image-slider.js 文件，以使用 JavaScript 不显眼地增强它。这意味着您不必手动将其包含在带有图像滑块的每个页面上。默认情况下，您不必包含在每个页面上，您可以使用一条信息（类名称）来应用视觉样式和功能。
I recommend (1) you load it in the head.
It's not worthwhile to in-line it in your html (2) because it stops caching. Not to mention that you have to inline it everywhere and it's just ugly.
A valid alternative (3) (but personally not worth it) is to create a
<script>tag using JavaScript and injecting it into your head. If this is done at the bottom of your body it should hopefully allow your html/css to fully load before your async loader gets started.As a nice bonus require.js allows you to give a pointer to your main script and it will load that once require has loaded. You can then do most of your async file loading in the main script and set up a well-defined set of requirements for each files in terms of what they require on the page.
Reasons for loading your javascript asynchronously includes a
And the list goes on. It's very clean and tidy to include a line like above in your default/shared view or your master page.
To expand on dynamically loading javascript files based on feature detection. What I mean there is you can browse the DOM for which javascript files should be loaded. For example if you have a
<ul class="image-slider">on your page then you can detect that through standard css selectors and load yourimage-slider.jsfile to unobtrusively enhance that with JavaScript.This means you don't have to manually include it on every page with an image slider. You don't have to include on every page by default and you can use one piece of information (the class name) to apply both visual style and functionality.