최적화가 필요합니다.

최적화가 필요합니다.

QA

최적화가 필요합니다.

답변 3

본문

스크롤이 끝에 다다르면 다음페이지의 데이터를 불러오는 소스입니다.

최적화가 필요합니다. 도움 부탁드립니다.

 

let page = 2;

  const font_list = document.querySelector(".font_list");

  font_list.addEventListener('scroll',(e)=>{

    if((font_list.scrollTop + font_list.offsetHeight) >= font_list.scrollHeight -70){

      fetch(`../theme/hoxycamp/skin/board/art2023/api/fontlist.php?page=${page}`, {

        method: 'GET',

        headers: {

          'Content-Type': 'application/json',

        }

      }).then((response) =>response.json())

        .then((data) =>{

          data['fonts'].forEach(fonts=>{

            font_list.insertAdjacentHTML('beforeend', `

              <style>${fonts.cdn_server_html}</style>

              <li onclick="watchFontFamily('${fonts.font_family_token}','${fonts.name}');" style="${fonts.style}">${fonts.name}</li>

            `);

          });

        page++;

      });

    }

  });

이 질문에 댓글 쓰기 :

답변 3

 

let page = 2;

const font_list = document.querySelector(".font_list");

font_list.addEventListener('scroll', async (e)=>{

  if((font_list.scrollTop + font_list.offsetHeight) >= font_list.scrollHeight -70){

    const data = await fetch(`../theme/hoxycamp/skin/board/art2023/api/fontlist.php?page=${page}`, {

      method: 'GET',

      headers: {

        'Content-Type': 'application/json',

      }

    }).then((response) =>response.json());

    data['fonts'].forEach(fonts=>{

      font_list.insertAdjacentHTML('beforeend', `

        <style>${fonts.cdn_server_html}</style>

        <li onclick="watchFontFamily('${fonts.font_family_token}','${fonts.name}');" style="${fonts.style}">${fonts.name}</li>

      `);

    });

    page++;

  }

});

 

최적화를 위해 다음과 같은 방법을 사용할 수 있습니다.

  • 데이터를 미리 불러오기: 데이터를 사용자가 스크롤을 내릴 때까지 미리 불러오는 방법입니다. 이렇게 하면 스크롤이 끝나면 바로 데이터를 불러오기 때문에 속도가 빨라집니다.
  • 데이터 캐싱하기: 스크롤을 내릴 때마다 데이터를 불러오는 것이 아니라, 데이터를 미리 캐싱해놓고 사용하는 방법입니다. 이렇게 하면 데이터를 불러오는 시간이 줄어들기 때문에 속도가 빨라집니다.
  • 데이터 인덱싱하기: 데이터를 인덱싱하여 불러오는 방법입니다. 이렇게 하면 데이터를 불러오는 시간이 줄어들기 때문에 속도가 빨라집니다.
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 14
© SIRSOFT
현재 페이지 제일 처음으로