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

I have a todo list 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.

我有一个待办事项列表Chrome扩展程序,其中所有代码都在内容中。 background.js中没有任何内容 - 主要是因为我还将此应用程序部署为独立网站。

There's a 2 - 3 second delay between clicking on the extension's browser action and the popup rendering. I believe it's because Chrome is waiting before a lot of JS is run before showing the popup.

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

What's weird is that it loads instantly when I open the app as a tab (it's not a particularly heavy JS app!) It only shows a massive delay as a popup.

奇怪的是,当我打开应用程序作为标签时,它立即加载(它不是一个特别沉重的JS应用程序!)它只显示弹出窗口的大量延迟。

Without fundamentally changing the architecture of my extension, is there a way I can get some quick wins to improve the loading performance of the popup? What can I defer?

如果没有从根本上改变我的扩展的架构,有没有办法我可以获得一些快速的胜利来提高弹出窗口的加载性能?我能推迟什么?

Here's my manifest.json file:

这是我的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"
}

The app does a few things in $(document).ready: setting a class on the body, putting some things into the console, checking the storage type, and checking whether we have an internet connection.

该应用程序在$(document).ready中做了一些事情:在正文上设置一个类,将一些东西放入控制台,检查存储类型,并检查我们是否有互联网连接。

Note: If you prefer JavaScript, here is the compiled JS code that runs on each load. There's a bit more there than what I've included below.

注意:如果您更喜欢JavaScript,那么这是在每次加载时运行的已编译JS代码。除了我在下面提到的内容之外,还有更多内容。

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  checkOnline()

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

  initialize()

initialize then sets up the app: It gets the array of tasks and checks whether it's empty, it sends an event to Google Analytics, runs a migration from an old version if necessary, shows the tasks, and does some DOM manipulation.

初始化然后设置应用程序:它获取任务数组并检查它是否为空,它向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

1 个解决方案

#1

So it turns out that the checkOnline() method was taking a wee while to return and blocked the rendering of the popup. This is the checkOnline() method, in Coffeescript:

所以事实证明checkOnline()方法在返回并阻止弹出窗口的渲染时会花费一些时间。这是Coffeescript中的checkOnline()方法:

checkOnline = ->
  online = navigator.onLine
  return online

The solution was to put this (and another method that relied on it) in a timeout so the rest of the JS could run and stop blocking the popup from being shown:

解决方案是将此(以及依赖它的另一个方法)置于超时中,以便JS的其余部分可以运行并停止阻止弹出窗口显示:

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  window.tourRunning = false

  document.onkeydown = keyboardShortcuts

  tour = createTour() # This is badwrong

  initialize()

  setTimeout (->

    checkOnline()

    changeEmptyStateImage(online)

  ), 100

#1