최대 10000 개의 요소 목록을 올바르게 렌더링하는 방법.
무한 드롭 다운로드 기술을 통해 사용자는 많은 수의 컨텐츠 앞에서 스크롤하고 볼 수 있습니다. 이 방법은 아래로 스크롤 할 때 새 컨텐츠를 계속로드하는 것입니다.
스크롤링을 데이터 발견의 기본 방법으로 사용하면 사용자가 웹 페이지에 더 오래 머무르고 사용자 참여를 향상시킬 수 있습니다. 소셜 미디어의 인기로 인해 사용자는 많은 양의 데이터를 소비합니다. 무선 스크롤링은 페이지를 사전로드 할 때까지 기다리지 않고도 대량의 정보를 탐색 할 수있는 효율적인 방법을 제공합니다.
사고 방식을 변경하면 페이지에 10,000 개의 직선 열 구성 요소가있는 경우 5 개의 구성 요소를 사용하여 전체 페이지를 동적으로 렌더링 할 수 있습니까?
해결책긴 목록의 최적화에는 페이징, 게으른 적재 등과 같은 많은 솔루션이 있습니다. 매우 우수한 상호 작용 (국화 사진)이있어 사용자가 기다릴 수 있습니다. 이 계획은 또한 매우 성공적입니다.
다른 방법을 찾는 방법?
1. 단일 페이지를 적용 할 때 페이지 당 10 개의 요소로 페이징 체계를 한 번 분석 할 수 있으며 페이지 당 10 개의 요소가 다음과 같이 렌더링됩니다.
2. 화면이 해당 위치로 스크롤 할 때 전체 목록 길이를 지원하고 해당 10 가지 요소를 렌더링 할 때 전체 목록 길이를 지원할 수 있습니까?
번쩍이는 문제이 아이디어를 구현할 때 깜박 거리는 문제가 발생합니다. 스크롤링 이벤트는 빈번하기 때문에 우리는 각 컷 신경에서 어떤 10 가지 요소를 렌더링 해야하는지 발견 한 다음 직접 교체해야하기 때문에 우리는 보는 요소가 지속적으로 다시 칠하고 있음을 발견했습니다.
여기서 아이디어는 화면 위치를 볼 때 총 30 개로 10 이상을 위쪽으로 렌더링 할 것입니다. 렌더링을 제어 할 때는 항상 상단 또는 하단 요소를 교체하여 중간에 볼 수있는 부품이 다시 칠되고 렌더링되지 않습니다. 사전 렌더링 된 데이터가 다시 그려지는 것입니다.
원칙고정 된 창 크기가 5 개의 요소 인 N 항목 목록을 표시 할 수있는 구성 요소를 구현합니다. 즉, 언제든지 무한 스크롤 N 요소에는 5 개의 DOM 컨테이너 만 있습니다.
<ul> <li style = transform : translate3d (0px, 0px, 0px);>…>… </li> <li style = transform : translate3d (0px, 60px, 0px);>… </li> </ul>
예를 들어 : 100 요소, 5는 홈페이지에 표시됩니다. [0,1,2,3,4]의 초기화는이 5 <li>를 렌더링해야합니다. 조금 아래로 스크롤하면 [1,2,3,4,5]이 <li>를 렌더링해야합니다. 현재 전체를 직접 교체하지 않으며 차이 항만 교체해야합니다. 구조는 [5,1,2,3,4] 여야합니다. 절대적인 위치이므로 표준 스트림과 분리됩니다. 단일 redraw는 다른 4 개에 영향을 미치지 않아 성능이 향상됩니다.
구현 방법 <! doctype html> <html lang = en> <head> <메타 charset = utf-8> <meta name = viewport content = width = device-width, 초기-척도 = 1.0> <meta http-equiv = x-ua-couptible contment = ie = edge> <script src = https : //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <title> 문서 </title> <style> Body, UL, Li {margin : 0; 패딩 : 0; 목록 스타일 : 없음; } ul {위치 : 상대; } ul li {위치 : 절대; 상단 : 0; 너비 : 100%; 높이 : 31px; 라인 높이 : 32px; 국경-바닥 : 1px solid #ccc; } </style> </head> <body> <ul> </ul> </body> <cript> // 총 컨테이너 var 목록 = []; // 시각적 범위의 요소 var showlist = []; // render 컨테이너 var renderlist = []; // 각 컨테이너의 높이 var lineHeight = 32 // (var i = 0; i <1000; i ++) {list.push ({id : i, 'th' + (i + 1) + 'elements', 상단 : i * lineHeight, 하단 : (i + 1) * lineHeight})})에 1000 요소를 초기화합니다. '높이 :' + 1000 * lineHeight + 'px') // 초기 컨테이너의 함수 렌더링 (상단)을 찾으십시오 {showlist = [] // 마크 데이터는 렌더링 된 후 렌더링 된 데이터와 함께 반복되는 데이터가 반복적으로 var var var currentex = 0을 스크롤 할 요소를 찾으십시오. [i] if (item.top <= window.scrolly && item.bottom> wind 부서지다; }} var range = 0 // 총 숫자가 35에 도달 할 때까지 (range <100 && showlist.length.length.length.length.length <35) {if (currentIndex -Range> = 0) {// 조건이 렌더링 된 경우에 표시되는지 여부를 비교할 때까지 (range <100 && showlist.length.length.length.length.length <35) {// 목록에 표시되는지 여부를 비교할 때까지 현재 발견 된 요소에서 각각 위아래로 표시 될 요소를 찾으십시오. 그 당시 쇼리스트, 표시되지 않은 요소를 대체합니다. (renderlist.includes (list [currentIndex -range] .id)) {// simeindex.push (currentIndex -range) sameindex.unshift (renderlist.indexof (list [currentIndex -range] .id))} else {showlist.unshift (currentex -range -range})}}}}}}} ^ if (renderlist.indexof (list [currentindex -range] .id))}} list.length && range! = 0) {if (renderlist.includes (list [currentIndex + 범위] .id)) {simeindex.push (renderlist.indexof (list [currentindex + range] .id))} else {showlist.push (list [currentind + range])} // 범위 ++ +} // if (renderlist.length> 0) {for (var i = 0; i <renderlist.length; i ++) {if (! sameindex.includes (i) && showlist.length) {renderlist [i] = showlist.shift (). id $ ( 'ul li'). eq (i) .html (list [renderlist [i]]. id +list [renderlist [i]] .attr ( 'stransitt', 'transtlate :'transplate3d (0px) ' 목록 [renderlist [i]]. Top + 'Px, 0px);')}}} else {// 처음으로 목록을 초기화합니다. renderlist = showlist.map (val) {return val.id}) renderList.map (function (key) {$ ( 'ul'). 'px, 0px);>#' + list [key] .id + list [key] .text + '</li>')})} console.log (renderlist)} // 첫 번째 렌더링 render () $ (Window) .scroll (e) {render ()}); </html> TODO핵심 요점
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.