최적화가 필요합니다.
본문
스크롤이 끝에 다다르면 다음페이지의 데이터를 불러오는 소스입니다.
최적화가 필요합니다. 도움 부탁드립니다.
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++;
}
});
최적화를 위해 다음과 같은 방법을 사용할 수 있습니다.
- 데이터를 미리 불러오기: 데이터를 사용자가 스크롤을 내릴 때까지 미리 불러오는 방법입니다. 이렇게 하면 스크롤이 끝나면 바로 데이터를 불러오기 때문에 속도가 빨라집니다.
- 데이터 캐싱하기: 스크롤을 내릴 때마다 데이터를 불러오는 것이 아니라, 데이터를 미리 캐싱해놓고 사용하는 방법입니다. 이렇게 하면 데이터를 불러오는 시간이 줄어들기 때문에 속도가 빨라집니다.
- 데이터 인덱싱하기: 데이터를 인덱싱하여 불러오는 방법입니다. 이렇게 하면 데이터를 불러오는 시간이 줄어들기 때문에 속도가 빨라집니다.
