Chúng tôi đã phải giải quyết một vấn đề tương tự trên FoldingText . Khi tài liệu lớn hơn, nhiều phần tử đường và phần tử nhịp liên quan được tạo ra. Bộ máy của trình duyệt dường như bị nghẹt và vì vậy cần phải tìm ra giải pháp tốt hơn.
Đây là những gì chúng tôi đã làm, có thể hữu ích hoặc không cho mục đích của bạn:
Hình dung toàn bộ trang dưới dạng một tài liệu dài và khung nhìn của trình duyệt như ống kính cho một phần cụ thể của tài liệu dài. Bạn thực sự chỉ phải hiển thị phần bên trong ống kính.
Vì vậy, phần đầu tiên là tính toán cổng nhìn thấy được. (Điều này phụ thuộc vào cách các phần tử của bạn được đặt, tuyệt đối / cố định / mặc định)
var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;
Một số tài nguyên khác để tìm một chế độ xem dựa trên nhiều trình duyệt hơn:
Nhận kích thước khung nhìn của trình duyệt với JavaScript
Phương pháp trình duyệt chéo để phát hiện scrollTop của cửa sổ trình duyệt
Thứ hai, bạn cần một cấu trúc dữ liệu để biết những phần tử nào có thể nhìn thấy trong khu vực đó
Chúng tôi đã có sẵn một cây tìm kiếm nhị phân cân bằng để chỉnh sửa văn bản, vì vậy chúng tôi cũng mở rộng nó để quản lý chiều cao dòng, vì vậy phần này đối với chúng tôi tương đối dễ dàng. Tôi không nghĩ rằng bạn sẽ cần một cấu trúc dữ liệu phức tạp để quản lý chiều cao phần tử của mình; một mảng hoặc đối tượng đơn giản có thể hoạt động tốt. Chỉ cần đảm bảo rằng bạn có thể truy vấn chiều cao và kích thước dễ dàng trên đó. Bây giờ, bạn sẽ lấy dữ liệu chiều cao cho tất cả các phần tử của mình như thế nào. Rất đơn giản (nhưng tốn kém về mặt tính toán đối với số lượng lớn các phần tử!)
var boundingRect = element.getBoundingClientRect()
Tôi đang nói về javascript tinh khiết, nhưng nếu bạn đang sử dụng jQuery $.offset, $.positionvà các phương pháp được liệt kê ở đây sẽ khá hữu ích.
Một lần nữa, việc sử dụng cấu trúc dữ liệu chỉ quan trọng như một bộ nhớ cache, nhưng nếu bạn muốn, bạn có thể thực hiện nó ngay lập tức (mặc dù như tôi đã nói những thao tác này rất tốn kém). Ngoài ra, hãy cẩn thận khi thay đổi kiểu css và gọi các phương thức này. Các hàm này buộc phải vẽ lại, vì vậy bạn sẽ thấy vấn đề về hiệu suất.
Cuối cùng, chỉ cần thay thế các phần tử ngoài màn hình bằng một <div>phần tử duy nhất có chiều cao được tính toán
Bây giờ, bạn có chiều cao cho tất cả các phần tử được lưu trữ trong cấu trúc Dữ liệu của mình, hãy truy vấn tất cả các phần tử nằm trước khung nhìn hiển thị.
Tạo một <div>với chiều cao css được đặt (tính bằng pixel) thành tổng chiều cao của phần tử
- Đánh dấu nó bằng tên lớp để bạn biết nó là div phụ
- Xóa tất cả các phần tử khỏi dom mà div này bao gồm
- chèn div mới tạo này thay thế
Lặp lại các phần tử nằm sau khung nhìn hiển thị.
Tìm kiếm các sự kiện cuộn và thay đổi kích thước. Trên mỗi cuộn, bạn sẽ cần quay lại cấu trúc dữ liệu của mình, xóa các div phụ, tạo các phần tử trước đó đã bị xóa khỏi màn hình và theo đó thêm các div phụ mới.
:) Đó là một phương pháp dài và phức tạp, nhưng đối với các tài liệu lớn, nó đã làm tăng hiệu suất của chúng tôi lên một mức lớn.
tl; dr
Tôi không chắc mình đã giải thích nó đúng cách, nhưng ý chính của phương pháp này là:
- Biết kích thước dọc của các phần tử của bạn
- Biết cổng chế độ xem được cuộn
- Biểu diễn tất cả các phần tử ngoài màn hình bằng một div duy nhất (chiều cao bằng tổng tất cả các chiều cao phần tử mà nó bao gồm)
- Bạn sẽ cần tổng cộng hai div tại bất kỳ thời điểm nhất định nào, một cho các phần tử phía trên khung nhìn hiển thị, một cho các phần tử bên dưới.
- Theo dõi cổng xem bằng cách lắng nghe các sự kiện cuộn và thay đổi kích thước. Tạo lại các div và các phần tử hiển thị cho phù hợp
Hi vọng điêu nay co ich.
