어떻게 Ajax 의 content-다운 로드 시간 이 너무 느 린 문 제 를 해결 합 니까?

선언:
오늘 이 글 은 ajax 의 content-다운 로드 시간 이 너무 느 린 문제 에 대한 해결 과 사 고 를 소개 합 니 다.
이벤트 배경:
개발 자 들 이 저 에 게 bug 를 피드백 해 주 었 습 니 다.ajax 의 해당 속도 가 매우 느 립 니 다.포 지 셔 닝 을 통 해 속도 가 느 린 이 유 는 content-다운 로드 시간 이 너무 길 고 chrome 에서 2s+의 지연 이 있 기 때 문 입 니 다.나중에 저희 핸드폰 클 라 이언 트 에서 도 이러한 지연 이 있 음 을 확인 하 였 습 니 다.캡 처 는 다음 과 같 습 니 다.
 
프로 세 스 분석:
1.포 지 셔 닝 원인:
우선,이 지연 을 보고 첫 번 째 반응 은 전단 bug 가 아니 라 백 엔 드 친구 에 게 피드백 합 니 다.그러나 백 엔 드 포 지 셔 닝 을 통 해 인터페이스 피드백 시간 이 매우 빠 른 것 을 발견 하고 외국 문헌 을 뒤 져 보 니 이것 은 브 라 우 저 이벤트 가 기준 하지 않 아서 발생 한 bug 임 을 증명 합 니 다.
2.bug 분석:
개발 학생 에 대한 소통 을 통 해 저 는 bug 가 두 가지 특징 을 가지 고 있다 는 것 을 알 게 되 었 습 니 다.첫째,이 지연 은 위로 끌 어 올 려 서 ajax 요청 을 하 는 상황 에서 만 존재 하고 통일 환경 과 브 라 우 저 에서 지연 시간 이 비슷 하 며 모두 2-3s 사이 에 있 습 니 다.
둘째,부분 적 으로 불 러 온 구성 요소 도 ajax 를 촉발 하지만 지연 되 지 않 았 습 니 다.
그래서 전단,원인 에 대한 포 지 셔 닝 을 시 작 했 습 니 다.먼저 납득 점 을 찾 습 니 다.우리 의 프로젝트 구조 디자인 으로 인해 모든 상 라 로 딩 은 기본 구성 요소 pagger 에 의 해 이 루어 졌 습 니 다.그 부분 코드 는 그림 과 같 습 니 다.원 리 는 브 라 우 저의 scroll 이벤트 와 resize 사건 을 통 해 구성 요소 가 시각 영역 에 있 는 지,만약 에 hasMore 함 수 를 촉발 하 는 것 입 니 다.
 
그 다음으로 지연 문제 가 발생 한 업무 페이지 와 지연 되 지 않 은 업무 페이지 가 이 구성 요소 에 대한 호출 차 이 를 살 펴 본다.
비 교 를 통 해 두 구성 요소 가 어떻게 다른 지 발견 하지 못 했다.그러므로 이 비밀 은 흥미 있 는 학우 들 이 나 에 게 연락 하여 함께 토론 할 수 있다.나 는 소스 코드 를 너 에 게 보 낼 수 있다)
여러 차례 의 재현 문 제 를 통 해 pc 에 있 는 chrome 을 뚜렷하게 볼 수 있 습 니 다.touch 모드 를 사용 하면 지연 이 가끔 사라 지고 mousewheel 을 사용 하면 지연 이 다시 나타 납 니 다.따라서 문 제 를 mousewheel 이벤트 와 비슷 한 scroll 이벤트 로 찾 습 니 다.
bug 해결:
상소 원인 을 결합 하여 조회 한 몇 개의 게시 물 토론 을 통 해 다음 과 같은 결론 을 얻 을 수 있다.
1.chrome 브 라 우 저의 mousewheel 이벤트 가 지연 되 는 원인 입 니 다.(mousewheel 이 벤트 는 표준 이벤트 가 아니 므 로 추천 하지 않 습 니 다)물론 입 니 다!코드 에서 저 는 mousewheel 사건 을 사용 하지 않 았 습 니 다.그러나 scroll 사건 을 사용 하면 mousewheel 사건 의 충돌 을 일 으 킬 수 있 습 니 다.그리고 우리 의 특질 적 인 모 바 일 클 라 이언 트 에서 webview 는 불행 하 게 도 이 결함 을 명중 시 켰 습 니 다.
2.이 문 제 를 해결 하려 면 이 사건 을 감청 하려 고 시도 할 수 있 습 니 다.(브 라 우 저 에 이 사건 이 없 으 면 이 감청 에 응답 하지 않 고 충돌 하지 않 습 니 다)그리고 사건 이 발생 했 을 때 모든 기본 행 위 를 취소 할 수 있 습 니 다.
따라서 이벤트 모델 을 감청 하 는 deltay(마우스 수직 스크롤 량)를 통 해 수직 변위 가 있 을 때 preventDefault 를 실행 합 니 다.따라서 코드 는 다음 과 같 습 니 다.

 window.addEventListener("mousewheel", (e) => {
   if (e.deltaY === 1) {
     e.preventDefault();
   }
 })

이 코드 를 전단 기초 라 이브 러 리 의 페이지 초기 화 코드 에 추가 하면 관련 페이지 콘 텐 츠 다운 로드 지연 문제 가 신기 하 게 해결 되 었 습 니 다.
요약:
호환성 문제 의 본질:   
웹 kit 구조 에서 일부 모듈 은 브 라 우 저 에서 보편적으로 공유 되 지 않 습 니 다.일부 모듈 은 브 라 우 저 에서 일부 기능 이 공유 되 지 않 고 서로 다른 컴 파일 설정 을 통 해 행동 을 바 꿀 수 있 습 니 다.따라서 웹 키 트 를 사용 하 는 브 라 우 저 는 다양한 행동 을 보일 수 있 습 니 다.
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Ajax 의 content-download 시간 이 너무 느 린 문 제 를 해결 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!