Есть ли преимущество использования веб-работников для предварительной загрузки изображений?

Question

В настоящее время я изучаю более эффективные способы предварительной загрузки изображений и подумал, что, возможно, использование веб-работников было бы более идеальным способом. Однако я не уверен, что это так. Есть ли какое-то конкретное преимущество с точки зрения производительности и удобства использования фоновых рабочих по сравнению с предварительной загрузкой в ​​классическом стиле? Что лучше?

function preloadBackground(a) {
    new d(window.URL.createObjectURL(
            new Blob([
            "(function () {" +
                "var x = new XMLHttpRequest();" +
                "x.responseType = 'blob';" +
                "x.open('GET', '" + a + "', true);" +
                "x.send();" +
            "}());\n"], { type: "text/javascript" })
            )
        )
}

function preloadClassic(a) {
    var i = new Image();
    i.src = a;
}

Answer 1

Вы можете легко предварительно загружать изображения с веб-работниками и скрывать их, пока не будете готовы их отобразить. Это увеличивает скорость загрузки страницы и уменьшает джанк, так что поток между щелчком и загрузкой плавный.

Основные преимущества предварительной загрузки изображения обычно видны при переходе между меню на страницу с желаемым содержимым, например карту или следующее изображение в слайд-шоу или что-то подобное. Если у вас есть событие щелчка, которое приводит пользователя к изображению, тогда полезно предварительно загрузить. Если вы тестируете данные о скорости страниц в Google, вы заметите значительное увеличение производительности, а также предварительную загрузку по сравнению с обычной загрузкой при нажатии функциональности.

Проверьте этот код на Github, я думаю, вы найдете его полезным.

Если изображение загружается с помощью веб-работника, вы избегаете блокировки конструкции DOM, поэтому назначение веб-работника для загрузки изображения, когда оно будет готово, а не когда остальная часть страницы также будет полезной, но это не похоже на предварительную - загрузка мне, а не порядок назначения операций. Если изображение не является содержимым, а фоновым изображением, нет необходимости делать его блокировкой сборки DOM. Использование веб-работника в этом случае лучше.