如何懒惰评估和执行JavaScript？

Question

我有以下情况： 我有86个图表（ChartsJS）分为三类。我正在使用JQueryUI选项卡在单独的选项卡中显示每个类别。问题是，由于页面中嵌入了大量的javascript，页面加载时间超过7秒，其中JS解析和执行占用了5.2倍（使用谷歌浏览器测量）。

我想知道有没有办法懒惰地评估那些呈现尚未呈现给用户的元素的JavaScript部分（而不是当前打开的选项卡）。请注意，我不仅希望在标签更改上执行给定的脚本（这很明显且很容易），而是在页面加载后的某个给定时间点按需评估所需的脚本。

编辑： 我需要澄清我的JS 是动态生成的因此asyncload from file不是一个选项。这可能是我身边的设计缺陷。

以下是chrome的时间表：

Answer 1

在调用函数之前，不会执行函数定义中的任何内容。因此，您可以将特定于选项卡的代码包装在函数中，并在打开该选项卡时调用它们。

要在chartjs中运行图表，您需要编写以下内容：

var myChart = new Chart(SELECTOR, {...})

因此只在您的活动选择器上调用新图表

//Global Configs
Chart.defaults.global.hover.mode = 'single';

function onTabOne() {
    var myChart = new Chart(SELECTOR, {...})
}
function onTabTwo() {
    var pieChart = new Chart(SELECTOR, {...})
}

注意 对javascript的评价是超级快且机器上不重，它基本上是为变量提升和内存分配，你不应该担心懒惰的评价，而且没有直接的方法。但是执行是繁重工作发生的地方，你可以通过在函数定义中包装东西来延迟执行。

有一些hacky方法可以进行延迟评估，例如将javascript放入字符串并在需要评估和执行代码时使用eval，但我不推荐使用eval。  而且没有必要这样做。