https://github.com/junelin2001/list-virtualization-discussion

A demo website showcasing the List Virtualization technique.
https://github.com/junelin2001/list-virtualization-discussion

gh-pages list-virtualization react virtualized-list

Last synced: 20 days ago
JSON representation

A demo website showcasing the List Virtualization technique.

• Host: GitHub
• URL: https://github.com/junelin2001/list-virtualization-discussion
• Owner: JuneLin2001
• Created: 2024-10-23T02:33:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-27T21:34:28.000Z (over 1 year ago)
• Last Synced: 2025-03-11T23:35:46.686Z (about 1 year ago)
• Topics: gh-pages, list-virtualization, react, virtualized-list
• Language: JavaScript
• Homepage: https://junelin2001.github.io/List-Virtualization-Discussion/#/UsingListVirtualization
• Size: 3.43 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# List Virtualization Discussion

List Virtualization Discussion 是一個用於演示「列表虛擬化 (List Virtualization)」技術的範例網站。  

> [網站連結](https://junelin2001.github.io/List-Virtualization-Discussion/#/UsingListVirtualization)

## 功能介紹

- 使用 List Virtualization: 只渲染可見範圍內的列表項，減少 DOM 節點數量，提升性能。

- 不使用 List Virtualization: 渲染整個列表，適合數據量較少的場景。

### 測試你裝置的最大顯示高度 & 寬度

- 透過簡單的繪製正方形功能，並輸入一個超大的值（如100000000px），看實際大小會是幾px。

> [測試網站連結](https://junelin2001.github.io/List-Virtualization-Discussion/square.html)

## Built With

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)

![Github Pages](https://img.shields.io/badge/github%20pages-121013?style=for-the-badge&logo=github&logoColor=white)

實現List Virtualization 功能：[react-window](https://github.com/bvaughn/react-window)  

隨機用戶與隨機貼文：[Faker.js](https://fakerjs.dev/)

## Run Locally

Clone the project

```bash

  git clone https://github.com/JuneLin2001/List-Virtualization-Discussion.git

```

Install dependencies

```bash

  npm install

```

Start the project

```bash

  npm run dev

```

## Acknowledgements

 - [Can React alone render 1 million rows?](https://www.youtube.com/watch?v=1JoEuJQIJbs&t=94s)

 - [React-window | 有效地呈現大型列表與表格](https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/virtualize-long-list-with-react-window-95bac3673a91)

 - [List Virtualization 介紹簡報](https://www.canva.com/design/DAGUWL0H-js/HIE6OZP35tQggxqQCCLNEQ/view?utm_content=DAGUWL0H-js&utm_campaign=designshare&utm_medium=link&utm_source=editor)