义乌外贸网站制作网站开发的实训报告

义乌外贸网站制作,网站开发的实训报告,夜间正能量不良网站,专业制作标书虚拟滚动是一种优化大数据列表渲染性能的技术#xff0c;通过仅渲染可视区域内容来提升用户体验。 其核心原理是动态计算可见范围#xff0c;只创建和销毁当前视窗内的DOM元素#xff0c;保持页面中元素数量恒定。 相比传统渲染方式#xff0c;虚拟滚动能显著降低内存占用通过仅渲染可视区域内容来提升用户体验。其核心原理是动态计算可见范围只创建和销毁当前视窗内的DOM元素保持页面中元素数量恒定。相比传统渲染方式虚拟滚动能显著降低内存占用从约10MB降至0.1MB、加快初始渲染速度从500ms缩短到50ms内并保证流畅的滚动体验60FPS。该技术适用于聊天记录、社交媒体Feed、大型数据表格等场景但不推荐用于少量数据或高度不固定的项目。主流框架如React和Vue都提供了成熟的虚拟滚动解决方案。虚拟滚动Virtual Scrolling详解1. 什么是虚拟滚动虚拟滚动是一种优化技术它只渲染用户当前可见区域的内容而不是渲染整个长列表中的所有项目。当用户滚动时动态地创建和销毁DOM元素保持页面中可见的元素数量恒定。简单比喻想象一个窗户视口和一个很长的画卷完整列表传统方式把整个100米长的画卷完全展开虚拟滚动只展开窗户能看到的那1米随着窗户移动动态展开/卷起画卷2. 为什么需要虚拟滚动问题大数据量列表的性能瓶颈// 传统渲染方式 - 渲染10000个项目 function renderTraditional(items) { const container document.getElementById(list); container.innerHTML ; // 清空 // ❌ 创建10000个DOM元素 items.forEach(item { const li document.createElement(li); li.textContent item.name; container.appendChild(li); }); // 问题 // 1. 内存占用高10000个DOM节点 // 2. 初始渲染慢需要创建大量DOM // 3. 滚动卡顿浏览器需要重排/重绘大量元素 }虚拟滚动的解决方案// 虚拟滚动 - 只渲染可见的20个项目 function renderVirtual(items) { const container document.getElementById(list); container.innerHTML ; // ✅ 只创建当前可见的20个元素 const visibleItems getVisibleItems(items, scrollPosition); visibleItems.forEach(item { const li document.createElement(li); li.textContent item.name; container.appendChild(li); }); // 优势 // 1. 内存占用低只保持20-30个DOM节点 // 2. 初始渲染快只创建少量DOM // 3. 滚动流畅无论列表多长DOM数量恒定 }3. 虚拟滚动的核心原理class VirtualScroller { constructor(config) { // 配置参数 this.container config.container; // 容器元素 this.itemHeight config.itemHeight; // 每个项目的高度固定 this.buffer config.buffer || 5; // 缓冲区多渲染一些 this.totalItems config.totalItems; // 总项目数 this.renderItem config.renderItem; // 渲染函数 // 状态 this.scrollTop 0; // 当前滚动位置 this.visibleCount 0; // 可见项目数 this.startIndex 0; // 起始索引 this.endIndex 0; // 结束索引 this.init(); } init() { // 计算可见项目数 this.visibleCount Math.ceil( this.container.clientHeight / this.itemHeight ) this.buffer * 2; // 设置容器高度创建滚动空间 this.container.style.height ${this.totalItems * this.itemHeight}px; // 创建内容容器 this.content document.createElement(div); this.content.style.position relative; this.container.appendChild(this.content); // 监听滚动事件 this.container.addEventListener(scroll, this.onScroll.bind(this)); // 初始渲染 this.render(); } onScroll(event) { this.scrollTop this.container.scrollTop; this.calculateRange(); this.render(); } calculateRange() { // 计算应该显示哪些项目 this.startIndex Math.floor(this.scrollTop / this.itemHeight); this.startIndex Math.max(0, this.startIndex - this.buffer); this.endIndex Math.min( this.startIndex this.visibleCount, this.totalItems ); } render() { // 清空当前内容 this.content.innerHTML ; // 渲染可见项目 for (let i this.startIndex; i this.endIndex; i) { const item this.renderItem(i); // 设置正确的位置 item.style.position absolute; item.style.top ${i * this.itemHeight}px; item.style.width 100%; item.style.height ${this.itemHeight}px; this.content.appendChild(item); } } }4. 完整实现示例场景10000条聊天记录!DOCTYPE html html head style #chat-container { height: 600px; overflow-y: auto; border: 1px solid #ccc; position: relative; } .chat-message { padding: 10px; border-bottom: 1px solid #eee; box-sizing: border-box; display: flex; align-items: center; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: #4CAF50; margin-right: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .message-content { flex: 1; } .message-time { color: #666; font-size: 12px; } .loading { text-align: center; padding: 20px; color: #666; } /style /head body h2聊天记录虚拟滚动演示/h2 div idchat-container/div div idstats正在显示 0/0 条消息/div script class ChatVirtualScroller { constructor() { this.container document.getElementById(chat-container); this.statsElement document.getElementById(stats); // 模拟10000条聊天数据 this.totalMessages 10000; this.messages this.generateMessages(); // 虚拟滚动配置 this.itemHeight 60; // 每条消息高度 this.buffer 10; // 缓冲区 this.visibleCount 0; // 缓存已渲染的消息 this.renderedMessages new Map(); this.init(); } generateMessages() { // 生成模拟数据 const names [张三, 李四, 王五, 赵六, 小明]; const messages []; for (let i 0; i this.totalMessages; i) { const name names[i % names.length]; const time new Date(Date.now() - i * 60000).toLocaleTimeString(); messages.push({ id: i, name: name, avatar: name.charAt(0), time: time, content: 这是第 ${i 1} 条消息。${哈.repeat(i % 10)}, unread: i % 20 0 }); } return messages.reverse(); // 最新的在最后 } init() { // 计算可见数量 this.visibleCount Math.ceil( this.container.clientHeight / this.itemHeight ) this.buffer * 2; // 设置容器高度创建滚动空间 this.container.style.height ${this.totalMessages * this.itemHeight}px; // 创建内容容器 this.content document.createElement(div); this.content.style.position relative; this.container.appendChild(this.content); // 监听滚动 this.container.addEventListener(scroll, this.handleScroll.bind(this)); // 初始渲染 this.updateVisibleRange(); this.render(); this.updateStats(); } handleScroll() { this.updateVisibleRange(); this.render(); this.updateStats(); } updateVisibleRange() { const scrollTop this.container.scrollTop; // 计算起始和结束索引 this.startIndex Math.floor(scrollTop / this.itemHeight); this.startIndex Math.max(0, this.startIndex - this.buffer); this.endIndex Math.min( this.startIndex this.visibleCount, this.totalMessages ); } createMessageElement(message) { const div document.createElement(div); div.className chat-message; if (message.unread) { div.style.backgroundColor #f0f8ff; } div.innerHTML div classavatar${message.avatar}/div div classmessage-content div stylefont-weight: bold${message.name}/div div${message.content}/div /div div classmessage-time${message.time}/div ; return div; } render() { const fragment document.createDocumentFragment(); // 重用已渲染的元素或创建新的 for (let i this.startIndex; i this.endIndex; i) { let messageElement; if (this.renderedMessages.has(i)) { // 重用现有元素 messageElement this.renderedMessages.get(i); } else { // 创建新元素 const message this.messages[i]; messageElement this.createMessageElement(message); this.renderedMessages.set(i, messageElement); } // 更新位置 messageElement.style.position absolute; messageElement.style.top ${i * this.itemHeight}px; messageElement.style.width 100%; messageElement.style.height ${this.itemHeight}px; fragment.appendChild(messageElement); } // 清除不在可见范围内的缓存 this.cleanupCache(); // 更新DOM this.content.innerHTML ; this.content.appendChild(fragment); } cleanupCache() { // 清理超出缓冲区的缓存 for (const [index, element] of this.renderedMessages.entries()) { if (index this.startIndex - this.buffer * 2 || index this.endIndex this.buffer * 2) { this.renderedMessages.delete(index); } } } updateStats() { this.statsElement.textContent 正在显示 ${this.endIndex - this.startIndex}/${this.totalMessages} 条消息 (索引 ${this.startIndex}-${this.endIndex}) 缓存: ${this.renderedMessages.size} 个元素; } // 添加新消息 addNewMessage(content) { const newMessage { id: this.totalMessages, name: 我, avatar: 我, time: new Date().toLocaleTimeString(), content: content, unread: false }; this.messages.push(newMessage); this.totalMessages; // 更新容器高度 this.container.style.height ${this.totalMessages * this.itemHeight}px; // 滚动到底部 this.container.scrollTop this.totalMessages * this.itemHeight; } } // 初始化虚拟滚动 const chatScroller new ChatVirtualScroller(); // 模拟动态添加消息 document.addEventListener(keydown, (e) { if (e.key Enter e.ctrlKey) { const message prompt(输入新消息:); if (message) { chatScroller.addNewMessage(message); } } }); /script /body /html5. 实际应用场景场景1社交媒体Feed流// Facebook/Twitter的无限滚动 class SocialMediaFeed { constructor() { this.posts []; // 所有帖子数据 this.visiblePosts []; // 当前可见的帖子 this.isLoading false; this.initVirtualScroll(); this.loadInitialData(); } initVirtualScroll() { // 使用虚拟滚动只渲染可见的帖子 // 当滚动接近底部时加载更多 window.addEventListener(scroll, () { const scrollPosition window.innerHeight window.scrollY; const threshold document.body.offsetHeight - 500; if (scrollPosition threshold !this.isLoading) { this.loadMorePosts(); } }); } }场景2大型数据表格// 可排序、可过滤的大型表格 class DataTableVirtualScroll { constructor(data) { this.allData data; // 原始数据10000行 this.filteredData []; // 过滤后的数据 this.sortedData []; // 排序后的数据 this.initTable(); } filterData(filterFn) { // 先过滤数据内存中操作 this.filteredData this.allData.filter(filterFn); // 然后使用虚拟滚动渲染 this.virtualScroller.updateData(this.filteredData); } sortData(sortFn) { // 先排序数据内存中操作 this.sortedData [...this.filteredData].sort(sortFn); // 使用虚拟滚动渲染 this.virtualScroller.updateData(this.sortedData); } }6. 现代框架中的虚拟滚动React示例使用react-windowjsximport { FixedSizeList as List } from react-window; const Row ({ index, style }) ( div style{style} 第 {index} 行: {items[index].content} /div ); const VirtualList ({ items }) ( List height{600} itemCount{items.length} itemSize{50} // 每行高度 width100% {Row} /List ); // 优化只重新渲染变化的行 const MemoizedRow React.memo(({ index, style, data }) { const item data[index]; return ( div style{style} {item.name} - {item.value} /div ); });Vue示例使用vue-virtual-scrollervuetemplate RecycleScroller classscroller :itemslist :item-size64 key-fieldid template v-slot{ item } div classuser img :srcitem.avatar / div{{ item.name }}/div /div /template /RecycleScroller /template script import { RecycleScroller } from vue-virtual-scroller; export default { components: { RecycleScroller }, data() { return { list: [] // 大数据列表 }; } }; /script7. 性能对比项目传统渲染10000项虚拟滚动10000项DOM节点数10000个20-30个内存占用高~10MB低~0.1MB初始渲染时间慢500ms快50ms滚动性能卡顿FPS低流畅60FPS内存泄漏风险高低实现复杂度简单较复杂8. 什么时候使用虚拟滚动✅ 适用场景聊天应用大量历史消息社交Feed无限滚动的帖子流数据表格数千行数据文件列表云存储文件浏览日志查看器大量日志条目商品列表电商网站搜索结果❌不适用场景少量数据100条杀鸡用牛刀高度不固定计算复杂效果差需要全选/全操作逻辑复杂SEO重要搜索引擎可能看不到全部内容总结虚拟滚动是通过只渲染可见区域来优化大数据列表性能的技术。它的核心思想是按需渲染只创建用户能看到的元素动态更新滚动时复用/更新DOM元素恒定内存无论数据多少DOM节点数恒定平滑体验保持60FPS的流畅滚动Array.from()在虚拟滚动中的应用是因为虚拟滚动需要频繁操作数据索引数组方法slice、map、filter更适合数据操作避免了实时集合的性能问题这是现代Web应用中处理大数据列表的关键技术几乎所有主流框架都有相应的虚拟滚动解决方案。