2015-12-11 5 views
0

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

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; 
} 
+0

он получает его от основной нити. –

+0

Да, но с классическими средствами предварительной загрузки браузер не загружает изображения в фоновом режиме? Я думал, что пока нет функции обратного вызова с событием onload, эти два метода примерно эквивалентны с точки зрения производительности. Пожалуйста, поправьте меня, если я ошибаюсь. –

+1

Только один верный способ узнать, проверить его. Моей догадкой было бы, что рабочий будет значительно медленнее. Я уверен, что браузеры оптимизированы для ада для изображений. –

ответ

5

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

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

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

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

Смежные вопросы