关于codeigniter:延迟加载JavaScript和内联JavaScript

Lazy loading JavaScript and Inline JavaScript

我注意到在我的站点(用于工作)的中,有很多


HTML5为具有已定义src的脚本引入了一个新的async参数。

您可以直接添加到任何元素上:

1
<script src='/js/script.js' async>

但是:请记住,它不会在内联脚本上工作!

如果您的一些页面混合了外部脚本和内联脚本,如果您异步加载外部脚本,这意味着内联脚本实际上将在异步脚本之前执行…会产生不必要的影响。

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (i.e., scripts that don't have the src attribute).

例如,如果您有以下配置:

1
2
3
4
5
6
7
<script src='/js/jquery.min.js' async>

    // --> jQuery won't be loaded when this script will be executed!
    // This will throw an error.
    $(function () {
        $('#element').doSomething();
    });

首先,我建议您非常仔细地分析客户端上脚本的加载情况,不仅是第一次加载javascript,而且是第二次加载相同的javascript文件或将其加载到另一个页面时。如果Web服务器在脚本上正确设置了etag,或者如果您对javascripts文件使用HTTP的其他缓存选项(有关详细信息,请参阅缓存教程),则不会加载文件本身,只会执行缓存重新验证。所以你描述的问题可能不像它看起来那样重要。

如果您确实决定动态加载一些脚本,那么可以使用jquery.getscript并将所有相关代码放在success回调中。如果您需要加载一个或两个javascript文件,这种方法将非常有效,但是如果您需要加载一个具有更复杂依赖关系的javascript文件列表,那么实现就不那么容易了。在这种情况下,您可以在的内部使用document.writeln。在内部使用该方法几乎没有缺点(请参阅此处了解详细信息)。