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

Question

我有一个待办事项列表铬延伸，其中所有的代码都在内容中。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发送一个事件，在必要时从旧版本运行迁移，显示任务，并执行一些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