الگوریتم‌ها (انیمیشن)در مرورگر شما اجرا می‌شودتاریخ بررسی: ۹ میزان ۱۴۰۵

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...