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

Question

我有一个待办事项列表Chrome extension where all of the code is in the content. There's nothing in background.js – mainly because I also deploy this app as a standalone website.

点击扩展程序的浏览器操作和弹出窗口呈现之间有 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 中做了一些事情：在 body 上设置一个 class，将一些东西放入控制台，检查存储类型，并检查我们是否有互联网连接。

注意：如果您更喜欢 JavaScript，here is the compiled JS code 则每次加载运行s。除了我在下面包含的内容之外，还有更多内容。

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  checkOnline()

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

  initialize()

initialize 然后设置应用程序：它获取任务数组并检查它是否为空，它向 Google Analytics 发送一个事件，运行s 从旧的迁移版本（如有必要）显示任务，并进行一些 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() 方法花了一点时间到 return 并阻止了弹出窗口的呈现。这是 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

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

Chrome extension popup has a 2 - 3 second delay

javascript

performance

google-chrome-extension

coffeescript