Question

我们的项目包含许多页面，每个页面最多包含20个选项卡，每个页面使用不同的脚本。所有脚本文件都在<head>中引用，并在第一页加载时加载。现在我们遇到了性能问题，因为打开它时页面上的脚本太多（每个选项卡大约有2k行JavaScript）。在很多情况下，用户需要使用2-3个选项卡，因此超过60％的代码不会被使用。所以我们需要任何脚本延迟加载解决方案来简化页面。由于每个选项卡的HTML都是按需加载的，我们可以在每个选项卡中添加<script>引用，以提供良好的工作解决方案。但是我很确定包括<head>以外的引用是不好的风格所以我想知道，还有其他解决方案吗？在像我们这样的大项目中如何解决这些问题？任何建议都会有所帮助提前谢谢！

Answer 1

jQuery对此解决方案有很好的作用：

$.getScript("my_lovely_script.js", function(){


   alert("Script loaded and executed.");
   // here you can use anything you defined in the loaded script

});

默认情况下不会缓存。我在jQuery网站上寻找了一个解决方案，它说明了这个缓存脚本的解决方案。

jQuery.cachedScript = function(url, options) {

  // allow user to set any option except for dataType, cache, and url
  options = $.extend(options || {}, {
    dataType: "script",   //Note this
    cache: true,          //Enable caching
    url: url
  });

  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax(options);
};

// Usage
$.cachedScript("URL HERE").done(function(script, textStatus) {
  console.log( textStatus );
});

处理包含许多脚本文件的页面

1 个答案: