Google Apps Script对话框加载延迟问题及优化方案咨询

针对对话框加载慢的问题，核心是减少服务器端重复计算、IO开销，同时优化前端加载体验，以下是几个实用的优化方法：

1. 缓存HTML内容，避免重复创建输出 #

每次调用createHtmlOutputFromFile都会读取文件并生成输出，大项目里这个IO和编译过程会耗时。可以在onOpen时预加载HTML内容并缓存，后续直接复用缓存的内容：

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom Menu')
    .addItem('Open Hello World Dialog', 'openHelloWorldDialog')
    .addToUi();
  
  // 预加载HTML并缓存到脚本缓存中
  preCacheHtml();
}

function preCacheHtml() {
  const cache = CacheService.getScriptCache();
  // 读取HTML文件内容并缓存，有效期设为1小时（最长支持21600秒）
  const htmlOutput = HtmlService.createHtmlOutputFromFile('helloWorld');
  cache.put('cached_hello_world', htmlOutput.getContent(), 3600);
}

function openHelloWorldDialog() {
  const cache = CacheService.getScriptCache();
  let html;
  const cachedContent = cache.get('cached_hello_world');
  
  if (cachedContent) {
    // 直接用缓存内容创建输出
    html = HtmlService.createHtmlOutput(cachedContent)
      .setWidth(300)
      .setHeight(200);
  } else {
    // 缓存失效时重新生成并缓存
    html = HtmlService.createHtmlOutputFromFile('helloWorld')
      .setWidth(300)
      .setHeight(200);
    cache.put('cached_hello_world', html.getContent(), 3600);
  }
  
  SpreadsheetApp.getUi().showModalDialog(html, 'Hello World Dialog');
}

2. 精简HTML内容，移除冗余代码 #

如果你的HTML文件包含不必要的外部资源、冗余CSS/JS，会显著增加加载时间。尽量保持HTML极简，必要的样式和脚本直接内联：

优化前的helloWorld.html（冗余示例）

<html>
  <head>
    <link rel="stylesheet" href="https://example.com/unnecessary.css">
    <script src="https://example.com/unused.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

优化后的helloWorld.html

<!DOCTYPE html>
<html>
  <body style="margin: 1rem; font-family: system-ui;">
    <h1 style="color: #2d3748;">Hello World</h1>
  </body>
</html>

3. 避免不必要的模板编译 #

如果对话框不需要动态数据（比如只是静态的Hello World），不要用createTemplateFromFile + evaluate()，直接用createHtmlOutputFromFile即可——模板编译会额外消耗服务器资源，静态内容完全不需要这一步。

不推荐（静态内容用模板）

let html = HtmlService.createTemplateFromFile('HelloWorld');
SpreadsheetApp.getUi().showModalDialog(html.evaluate(), 'Hello World');

推荐（静态内容直接用HTML输出）

let html = HtmlService.createHtmlOutputFromFile('HelloWorld')
  .setWidth(300)
  .setHeight(200);
SpreadsheetApp.getUi().showModalDialog(html, 'Hello World');

4. 先弹出空加载框，异步加载内容 #

如果对话框需要加载动态数据，不要让用户等服务器端处理完再弹出对话框——先快速弹出一个极简的加载界面，然后在前端用google.script.run异步获取数据并更新界面，这样用户感知上的延迟会大幅降低：

helloWorld.html

<!DOCTYPE html>
<html>
  <body>
    <div id="content">加载中...</div>
    <script>
      // 异步调用服务器函数获取数据
      google.script.run
        .withSuccessHandler(function(additionalData) {
          // 数据返回后更新界面
          document.getElementById('content').innerHTML = `
            <h1>Hello World</h1>
            <p>${additionalData}</p>
          `;
        })
        .getDynamicData(); // 这个函数负责获取动态数据
    </script>
  </body>
</html>

服务器端辅助函数

function getDynamicData() {
  // 这里处理需要的动态逻辑，比如读取表格数据
  return "这是异步加载的动态内容";
}

5. 清理项目冗余代码 #

大项目中如果存在大量未使用的函数、库或者触发器，会增加脚本的启动时间。定期清理项目中无用的代码、删除未使用的文件，能间接提升所有函数的执行速度，包括对话框的触发函数。

内容的提问来源于stack exchange，提问作者Harish