Ajax의 느린 콘텐츠 다운로드 시간 문제를 해결하는 방법(상세 분석)

이 글은 주로 Ajax의 느린 콘텐츠 다운로드 시간 문제에 대한 해결 방법과 사고 과정을 소개합니다. 이 글은 이벤트 배경과 프로세스 분석을 통해 매우 자세하게 소개됩니다. 필요한 친구들은 참고하세요.

서문 :

오늘 이 글에서는 ajax의 느린 콘텐츠 다운로드 시간 문제에 대한 해결책과 생각을 소개하겠습니다.

이벤트 배경:

개발자님이 버그를 제보해 주셨는데, 찾아보니 속도가 느린 이유는 콘텐츠 다운로드 시간이 너무 길어서였습니다. Chrome에서는 2초 이상의 지연이 발생했습니다. 나중에 이 지연이 모바일 클라이언트에도 존재하는 것으로 확인되었습니다. 스크린샷은 다음과 같습니다.

프로세스 분석:

1. 포지셔닝 이유:

우선 이 지연을 보고 첫 반응은 프론트엔드 버그가 아니라는 것이었습니다. 나는 백엔드 반 친구들에게 피드백을 주었다. 그러나 백엔드 포지셔닝을 통해 인터페이스 피드백 시간이 매우 빠르다는 것을 발견했습니다. 외국 문헌을 읽어 보면 이것이 비표준 브라우저 이벤트로 인한 버그라는 것이 입증되었습니다.

2. 버그 분석:

개발 동창들과의 소통을 통해 버그에는 두 가지 특징이 있다는 것을 알게 되었습니다. 첫째, 이 지연은 ajax 요청을 발생시키기 위해 풀업 로딩이 필요한 경우에만 존재하며 환경과 브라우저가 통합되어 있습니다. 아래 지연 시간은 모두 2~3초로 비슷합니다.

둘째, 일부 풀업 로드 구성요소도 Ajax를 트리거하지만 지연이 없습니다.

이유를 찾으려면 먼저 프런트 엔드를 시작해야 합니다. 프로젝트 아키텍처 설계로 인해 모든 풀업 로딩은 기본 구성 요소 페이거에 의해 완료됩니다. 그림에서 원리는 브라우저의 스크롤 이벤트와 크기 조정 이벤트를 통해 구성 요소가 가시 영역에 있는지 지속적으로 감지하고, 그렇다면 hasMore 기능을 트리거합니다.

두 번째로 지연 문제가 있는 비즈니스 페이지와 지연이 없는 비즈니스 페이지에서 이 컴포넌트를 호출할 때의 차이점을 확인하세요.

비교 결과 두 성분의 차이는 발견되지 않았습니다. (따라서 이 미스터리에 관심이 있는 학생들은 저에게 연락해 토론할 수 있습니다... 소스 코드를 보내드릴 수 있습니다.)

문제를 여러 번 재현해 보니 PC의 Chrome에서는 지연이 있는 것이 분명합니다. 터치 모드 사용시 마우스휠 딜레이 사용시 가끔 사라졌다가 다시 나타납니다. 따라서 문제는 마우스휠 이벤트와 이에 밀접하게 대응하는 스크롤 이벤트에 있습니다.

버그 해결:

이의 제기 이유를 종합하고 검토한 여러 게시물을 통해 논의한 결과 다음과 같은 결론이 도출되었습니다.

1 크롬 브라우저의 마우스휠 이벤트가 이러한 지연의 원인입니다(마우스휠). 이벤트는 표준 이벤트가 아니며 모든 사람에게 권장되는 것은 아닙니다) 물론입니다! 코드에서는 마우스휠 이벤트를 사용하지 않았는데, 스크롤 이벤트를 사용하면 마우스휠 이벤트와 충돌이 발생할 수 있습니다. 안타깝게도 특수 모바일 클라이언트의 웹뷰에도 이 결함이 발생했습니다.

2. 이 문제를 해결하려면 이 이벤트를 수신하려고 시도할 수 있으며(브라우저에 이 이벤트가 없으면 이 청취에 응답하지 않으며 충돌이 없습니다) 이벤트가 트리거되면 모두 취소합니다. 기본 동작은 다음과 같습니다.

그래서 이벤트 모델의 deltaY(마우스 수직 스크롤 양)를 듣고 수직 변위가 있는 경우 PreventDefault가 트리거되므로 코드는 다음과 같습니다.

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

이 코드를 페이지 초기화에 추가합니다. 프론트엔드 기본 라이브러리의 코드와 마법이 관련 페이지 콘텐츠 다운로드 지연 문제가 해결된 것으로 나타났습니다.

요약:

호환성 문제의 본질:

웹킷 아키텍처에는 일반적으로 브라우저 간에 공유되지 않는 일부 모듈이 있고, 브라우저 간에 공유되지 않는 특정 기능을 가진 일부 모듈이 있습니다. 브라우저의 동작은 다양한 컴파일 구성을 통해 변경될 수 있습니다. 따라서 웹킷을 사용하는 많은 브라우저는 서로 다른 동작을 보일 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

php+ajax초기 프로세스 구현 및 검토 프로세스

js 캡슐화 ajax기능적 기능 구현 단계에 대한 자세한 설명

PHP+Mysql +구현할 Ajax 타오바오 고객센터 알리왕왕 채팅기능 이용방법(첫페이지)

위 내용은 Ajax의 느린 콘텐츠 다운로드 시간 문제를 해결하는 방법(상세 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!