Chrome 扩展弹出窗口有 2 - 3 秒的延迟

Question

我有一个待办事项列表Chrome 扩展程序，其中所有代码都在内容中。什么都没有background.js——主要是因为我也将这个应用程序部署为一个独立的网站。

单击扩展程序的浏览器操作和弹出窗口渲染之间有 2 到 3 秒的延迟。我相信这是因为 Chrome 在显示弹出窗口之前正在等待大量 JS 运行。

奇怪的是，当我将应用程序作为选项卡打开时，它会立即加载（它不是一个特别繁重的 JS 应用程序！）它只显示大量延迟作为弹出窗口。

在不从根本上改变我的扩展程序的架构的情况下，有没有一种方法可以让我快速获胜以提高弹出窗口的加载性能？我可以推迟什么？

这是我的manifest.json文件：

"background": {
  "page": "index.html"
},

"browser_action": {
  "default_icon": {   
    "19": "img/icon19.png",
    "38": "img/icon38.png"
  },

"default_title": "Super Simple Tasks",

"default_popup": "index.html?popup=true"
}

该应用程序做了一些事情$(document).ready：在主体上设置一个类，将一些东西放入控制台，检查存储类型，以及检查我们是否有互联网连接。

注意：如果您更喜欢 JavaScript，这里是在每次加载时运行的编译后的 JS 代码。除了我在下面包含的内容之外，还有更多内容。

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  checkOnline()

  $new_task_input = $('#new-task')
  $link_input = $('#add-link-input')

  initialize()

initialize 然后设置应用程序：它获取任务数组并检查它是否为空，将事件发送到 Google Analytics，如有必要，从旧版本运行迁移，显示任务，并进行一些 DOM 操作。

initialize = ->

    window.storageType.get DB.db_key, (allTasks) ->

      if allTasks == null
        allTasks = Arrays.default_data
        window.storageType.set(DB.db_key, allTasks)

      ga 'send',
      'hitType': 'event'
      'eventCategory': 'Data'
      'eventAction': 'Task count'
      'eventValue': allTasks.length

      Migrations.run(allTasks)

      Views.showTasks(allTasks)

      $new_task_input.focus()

      setTimeout (->
        $('#main-content').addClass('content-show')
      ), 150

Answer 1

事实证明，该checkOnline()方法需要一段时间才能返回，并阻止了弹出窗口的呈现。这是checkOnline()Coffeescript 中的方法：

checkOnline = ->
  online = navigator.onLine
  return online

解决方案是将此（以及依赖它的另一个方法）设置为超时，以便 JS 的其余部分可以运行并停止阻止弹出窗口的显示：

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  window.tourRunning = false

  document.onkeydown = keyboardShortcuts

  tour = createTour() # This is badwrong

  initialize()

  setTimeout (->

    checkOnline()

    changeEmptyStateImage(online)

  ), 100