Всплывающее окно расширения Chrome имеет задержку 2 - 3 секунды

Question

У меня есть список дел Chrome extension, где весь код находится в содержании. Нет ничего в background.js - в основном потому, что я также разворачиваю это приложение как 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: установка класса на теле, поставив некоторые вещи в консоли, проверяя тип хранения и проверки, есть ли у нас интернет-соединение.

Примечание: Если вы предпочитаете использовать JavaScript, here is the compiled JS code, который запускается при каждой загрузке. Там немного больше, чем то, что я включил ниже.

$(document).ready -> 

    setPopupClass() 

    standardLog() 

    checkStorageMethod() 

    checkOnline() 

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

    initialize() 

initialize затем устанавливает приложение: Он получает массив задач и проверяет, находится ли она пуста, он отправляет событие в 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 

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