Как сделать цикл быстрее при изменении изображения SRC в JavaScript?

Question

На самом деле я получаю некоторые большие данные из моего MySQL, используя PHP, Axios, и я использовал метод get, который абсолютно хорош ... данные - это img src. Теперь я использую цикл, чтобы изменить src изображения, но он тоже требуетмного времени, чтобы изменить src почти от 5 до 10 секунд

function show(){
        axios.get('php/retrieve_characters.php')
        .then(function(response){
             var data = response.data;
             if(data!='') {  
               for(var i=0;i<837;i++) {
                 document.getElementById(i).src=data[i].charac;  
               }
               console.log(data);
             }
        })
        .catch(function(error){
            alert(error);
        })
}

Если вы хотите увидеть демо, перейдите сюда https://ligalavanda.com/registration.php

Answer 1

У вас проблема с производительностью, потому что вы пытаетесь загрузить слишком много изображений одновременно.837 действительно большое число - с одной стороны, он генерирует 837 отдельных HTTP-запросов.Это еще более безумно, потому что пользователь даже не может увидеть большинство из них при первой загрузке (они скрыты в отдельных вкладках).

Мой совет: просто загрузите те, которые на самом деле будут видны с самого начала.Если пользователь перейдет на другую вкладку, загрузите изображения для этой вкладки.Это ускорит начальную загрузку и не будет тратить время и ресурсы на загрузку вещей, которые никогда не будут просмотрены.

(Существуют и другие способы, которые потенциально могли бы оптимизировать это далее, используя кеширование и / илиCDN, которые вы можете исследовать отдельно).