الګوریتمونه (انیمیشن)ستاسو په براوزر کې چلېږيد کتنې نېټه: د AP ۱۴۰۵ د تله ۹

List Virtualization (Windowing): انیمیشن

List Virtualization (Windowing): انیمیشن. د فرنټ‌اینډ لپاره متحرک الګوریتمونه: ترتیبول، لټون، debounce او throttle، د پېښو کړۍ، مجازي DOM، کیش، trie او لار موندل. ستاسو په براوزر کې چټک، شخصي او اسانه.

محليپه ډیفالټ توګه شخصيچټکد نوم لیکنې پرته

د لاندې وسیلې تڼۍ او متنونه اوس مهال په انګلیسي دي.

Browser and DOMTime: O(visible rows)Space: O(visible rows)

Rows that fit on screenExtra rows rendered above and below

30 items

Scroll position

scrollTop = 0px

Items in the DOM

6 of 30

Rendered range

1 to 6

Step 1 / 15

A long list can have thousands of rows. Virtualization renders only the rows in view (green) plus a few extra (blue); the rest (grey) are not in the DOM at all.

checking
found / in view
ruled out

JavaScript

1function getVisibleRange(scrollTop, viewportHeight, itemHeight, total, overscan = 2) {
2  const first = Math.floor(scrollTop / itemHeight);
3  const last = Math.ceil((scrollTop + viewportHeight) / itemHeight);
4  const start = Math.max(0, first - overscan);
5  const end = Math.min(total, last + overscan);
6  return [start, end];
7}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...