Javascript 如何在JS执行后延迟CSS和脚本加载

我有一个backbone.js应用程序，我的问题是有一些加载缓慢的文件（a.css和a.js），它们会阻止页面加载，直到完全加载为止

我想找到一种方法，在呈现主干视图之后延迟这些加载，因此在执行了一些JS之后。我已经在JS中完成了这项工作：

view.render()
$('head').append("<script type=...")
$('head').append("<link rel='stylesheet'...")

view.render（）
$（'head'）.append（您可以有条件地在JavaScript中包含脚本文件

if(someConditionIsTrue){
    // load script from the server
    $.getScript( "somePath/onTheServer/script.js", function( data, textStatus, jqxhr ) {
        // do something after the load is complete
    });
}

这里真正的问题是为什么您的JavaScript和CSS文件加载缓慢？是因为它们包含大量代码，还是因为外部站点上的引用文件需要时间加载？如果您可以重构这些文件以加快加载速度，那么最好的操作当然是将它们加载到页面的

您可以尝试将样式表分成两部分，webfont声明等放在页面顶部加载的一个小CSS文件中，其他可选CSS规则放在页面呈现后加载的第二个文件中

然而，我建议您不要在页面呈现后加载CSS规则，原因很简单，如果您在CSS规则中定义了位置或大小，这可能意味着页面中的元素会四处移动。最好的做法是在页面呈现前加载CSS，这样用户就不会使用CSS当浏览器加载、解析和呈现CSS规则时，这些比特和片段会四处移动。
以异步方式加载CSS，因此问题实际上是js。

首先，您应该将其放在页面的底部，但您确实需要将其放在页面的头部或正文上，以防止其阻止呈现，并为其添加一个异步属性：





如果有多个相互依赖的文件，可以使用




这将在加载后按顺序执行异步文件。

您可以在这里阅读更多内容：

我同意最佳做法，以及我应该做的更改，以加快加载速度。奇怪的是，这两个文件加载速度很慢（非常慢）是google maps JS和google webfonts CSS。它们在除android手机以外的任何设备上都以正常速率加载：在android上加载它们需要几分钟，通常会超时。通过在头部注入JS think来加载它们，它们加载instantlyOK，所以我没有任何android设备要测试，但这听起来很奇怪。无论如何，我认为spl整合这些文件可能是前进的方向。我最终用openstreetmaps取代了GMAP，并在标签中注入了google fonts CSS内容。肮脏但有效。目前还不知道android上的google.com托管文件（仅限4.0+顺便说一句）