wepy 애플 릿 긴 목록 성능 최적화 실천

배경

wepy 1.7.3

wepy-redux

질문wepy 프레임 워 크 의 목록 성 성능 이 떨 어 지 는데 주요 원인 은 목록 의 임의의 필드 를 수정 할 때setData 완전한 목록 을 전달 합 니 다. 이것 을 자세히 보 세 요.
issue ；
이 때 긴 목록 의 임의의 필드 를 수정 하면 페이지 가 장시간 응답 하지 않 습 니 다.
해결 하 다.
사전 사용 (Object 긴 목록 과 조합 합 니 다. 일반적인 경우 사전 의 데 이 터 량 이 목록 보다 훨씬 적 기 때 문 입 니 다.
장면
쇼핑 카 트cart 수정, 제품 목록 에 대응 하 는 구 매 수량 동기 화 수정

//     

//     (  3000+)
var products = [{id: "79", name: "    "}...]

//       
// key: productId, value:      
var cartDict = {
    2407: {
        price: "1.02"
        num: 2
    }
}

cartDict 데이터 가 사용자 에 게 수 동 으로 추가 되 기 때문에 데이터 양 이 목록 보다 훨씬 적 습 니 다.그러면 setData 속도 도 그 만큼 올 라 갑 니 다.
이때 우 리 는 방식 으로 목록 의 구 매 량 을 렌 더 링 합 니 다.

{{cartDict[product.id].num}}

매번 수정 목록 을 매번 cartDict 로 옮 겨 성능 향상 효 과 를 얻 을 수 있 습 니 다.위 에 있 는 것 issue 도 비슷 한 사고 로 제품 을 펼 치 는 사전 을 만 들 수 있다.
질문
우리 의 상품 목록 은 일반적으로 비교적 길다 (현재 최대 3000 + 개). 이때 처음으로 화면 에 들 어 가 는 시간 이 매우 길다 (10s +).
해결 하 다.
h5 의 최적화 방향 을 사용 하여 app 과 유사 합 니 다.일부 화면 에 있 는 제품 만 렌 더 링 하고 다른 대부분 제품 은 으로 보 여 줍 니 다.이 방법 을 사용 하 는 데 약간의 제한 이 있다.

제품 의 높이 는 이미 알 고 있어 야 합 니 다. 현재 제품 이 화면 에 있 는 지 계산 하 는 데 사 용 됩 니 다

스크롤 체험 은 최적화 되 지 않 은 것 이 없다. 작은 프로그램 도 이런 목록 을 사용 하여 사고 방향 을 최적화 시 켰 기 때문에 빠 른 스크롤 을 할 때 실제 효 과 는

이다. (애플 릿 최적화) = > (우리 의 최적화)
= > 제품 출시
장면
우리 프로젝트 의 모든 제품 등 이 높 기 때문에 현재 제품 이 전시 되 어야 하 는 지 아 닌 지 를 계산 하 는 것 이 좋 습 니 다.
먼저 템 플 릿 쓰기 입 니 다.

설명:

showTypeDict 현재 전시 해 야 할 제품 사전 을 대표 하고 사전 을 사용 하 는 이 유 는

제품 을 분류 하고 매번 분 류 된 좌표 만 비교 한 다음 에 전체 분류

를 보 여 준다.

dishItem 은 제품 대응 부품 으로 비교적 복잡 하 다

skeleton 은 골조

scroll 을 감청 하고 현재 scrollTop 과 제품 분류의 좌표 에 따라 showTypeDict 의 내용 을 결정 하 며 흐름 차단 에 주의 하 십시오.
상기 방법 을 사용 하여 최적화 한 후 3000 + 제품 의 화이트 스크린 시간 은 100 + 제품 과 비슷 하 다.스크롤 할 때 멈 추 지 않 고 빠르게 스크롤 할 때 제품 이 나타 날 때 까지 기 다 려 야 합 니 다.
이상

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자

이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

wepy 애플 릿 긴 목록 성능 최적화 실천

좋은 웹페이지 즐겨찾기