找到你要的答案

Q:Chrome extension popup has a 2 - 3 second delay

Q: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.

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

我有一个待办事项列表的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"
}

应用程序做一些事情在$(文件)准备:设置一个类对身体,把一些东西到控制台,检查存储类型,并检查我们是否有一个互联网连接。

注:如果你喜欢JavaScript,这是编写JS代码运行在每个负载。有一点比我已经包括在下面。

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  checkOnline()

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

  initialize()

初始化并建立应用程序:它得到任务和检查是否是空的数组,它发送一个事件到谷歌分析,从一个旧版本迁移时,显示的任务,和一些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
answer1: 回答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

原来的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
javascript  performance  google-chrome-extension  coffeescript