창 크기 조정 및 스크롤 events_javascript 기술에 대한 기본 최적화 아이디어

동료가 스크롤 이벤트를 사용하여 프로젝트의 데이터를 로드했지만 결과는 IE에서 비극이었습니다. 간단한 최적화 방법이 명확한 결과와 함께 제공됩니다.

사용자가 창 크기를 변경하는 한 일부 내부 요소의 크기가 다시 계산되어 전체 페이지가 다시 렌더링되어 결국 많은 CPU를 소비하게 될 수 있습니다. 예를 들어 resize 메서드가 호출되면 사용자가 창 크기를 변경할 때 계속해서 트리거되며, 하위 버전의 IE에서는 애니메이션이 일시 중단된 상태가 될 수 있습니다. 창의 스크롤 이벤트도 마찬가지입니다. 마우스로 스크롤하거나 스크롤 막대를 드래그하면 스크롤 이벤트가 계속 발생합니다. 처리할 항목이 너무 많으면 하위 버전의 IE도 애니메이션이 중단됩니다.

기본 최적화 아이디어: 일정 기간 내에 크기 조정 이벤트 기능을 한 번만 실행하세요.

코드 복사 코드는 다음과 같습니다.

var resizeTimer = null
$ (window) .on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log ("창 크기 조정");
}, 400);
}
)

스크롤 이벤트 최적화도 동일합니다.