[feature/server1] 검색 결과 페이지 로딩 속도 개선

[SeyoungKo]

이슈 사항 1. 다수의 detail_image로 인한 로딩 속도 저하 2. 데이터 삽입과 HTML 렌더링 함께 수행 시 속도 저하

개선 방안 1. 비동기 방식으로 변경 (Ajax) 2. JavaScript Lazy모드

[SeyoungKo]

Lazy LoadXT.js

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.js"></script>

   $.getJSON('/searchlist', params).done(function(response){
                if(response.code === 200){
                    setTimeout(function(){
                        $(window).lazyLoadXT();
                    }, 0);

            SearchList.showSearchList(response);
            SearchList.showSwiperImg(response);
        }else{
            alert(response.msg);
        }
    })
}
      ... 중간 생략 ...

   showSwiperImg: function(res) {
          $(this).lazyLoadXT();
          for (var i = 0; i < res.place_info.length; i++) {
              for (var k = 1; k < res.place_info[i].detail_image.length; k++) {
                  $('#swiper' + (i + 1)).append(
                      '<div class="swiper-slide">\n' +
                          '<img data-src="' + res.place_info[i].detail_image[k] + '"src="/static/imgs/test_img3.jpg"' + 'class="lazy-load card-img-fluid" alt="...">\n' +
                      '</div>\n'
                  )
              }
          }
          var swiper = new Swiper(".mySwiper", {
              autoplay: {
                  delay: 3500,
                  disableOnInteraction: false,
              },
          });
      }

[SeyoungKo]

추가사항

1. 로드밸런서 사용
2. Redis에 데이터 실어서 보여주기
3. ec2 서버 증량