Chrome extension popup has a 2 - 3 second delay

Question

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.

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.

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.

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:

"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.

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.

$(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.

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

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 = ->
  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:

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  window.tourRunning = false

  document.onkeydown = keyboardShortcuts

  tour = createTour() # This is badwrong

  initialize()

  setTimeout (->

    checkOnline()

    changeEmptyStateImage(online)

  ), 100