优化Google Apps Script中google.script.run的DOMContentLoaded触发响应速度

核心原因 #

DOMContentLoaded触发时，侧边栏的Google Apps Script运行环境可能尚未完全初始化，导致首次google.script.run调用需要等待环境就绪，进而产生延迟。而后续点击调用时环境已准备完毕，所以响应迅速。

解决方案 #

1. 直接在模板中注入权限值（最优方案）

既然sidebarLoad中可以直接获取initFunction()的结果，无需通过google.script.run做跨环境请求，直接将权限值注入到HTML模板中，彻底消除网络请求耗时：

后端sidebarLoad函数修改：

function sidebarLoad() {
  let template = HtmlService.createTemplateFromFile('index');
  // 将权限结果传入模板变量
  template.userHasPermission = initFunction();
  let route = template.evaluate();
  SpreadsheetApp.getUi().showSidebar(route);
}

前端index.html修改：

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const hiddenDiv = document.getElementById('hidden_div');
    // 直接使用模板注入的值控制显示
    hiddenDiv.style.display = <?= userHasPermission ?> ? 'block' : 'none';
  });
</script>

2. 延迟调用google.script.run

如果必须保留google.script.run调用，可以在DOM加载完成后短暂延迟，给GAS运行环境留足初始化时间：

<script>
  function check_permission () {
    google.script.run.withSuccessHandler(function(data){
      const hiddenDiv = document.getElementById('hidden_div');
      hiddenDiv.style.display = data === true ? 'block' : 'none';
    }).initFunction();
  }

  document.addEventListener('DOMContentLoaded', () => {
    // 延迟200毫秒调用，可根据实际情况调整时长
    setTimeout(check_permission, 200);
  });
</script>

3. 预加载GAS运行环境

提前发起一个极简的google.script.run调用，触发运行环境初始化，后续真正的权限检查调用就会更快：
前端index.html修改：

<script>
  // 先发起一个无意义的调用初始化环境
  google.script.run.withSuccessHandler(() => check_permission())
                  .withFailureHandler(() => check_permission())
                  .initEnv();

  function check_permission () {
    google.script.run.withSuccessHandler(function(data){
      const hiddenDiv = document.getElementById('hidden_div');
      hiddenDiv.style.display = data === true ? 'block' : 'none';
    }).initFunction();
  }
</script>

后端新增极简初始化函数：

function initEnv() {
  return true;
}

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