面对大数据量渲染，前端工程师如何保证页面流畅性 _前端百万数据渲染处理(3)

最新推荐文章于 2024-07-19 17:17:26 发布

2401_84615578

最新推荐文章于 2024-07-19 17:17:26 发布

阅读量362

点赞数 4

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84615578/article/details/138769922

版权

程序员专栏收录该内容

51 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

CDN 网络覆盖广、访问速度快,使用 CDN 加载静态资源能显著提升加载速度。

4. 启用 GZIP

启用 GZIP 压缩,能够减小文件体积,减轻服务器负载。

5. 缓存静态资源

对 CSS、JS、图片等静态资源开启缓存,避免每次请求都访问服务器,可大幅提升重复加载速度。

6. 使用 SSD 硬盘

使用 SSD 固态硬盘替代传统硬盘,能显著提升服务器响应速度。

7. 使用缓存代理

使用如 Nginx、Varnish 等缓存代理,利用其缓存能力减少请求到达应用服务器。

8. 数据库优化

合理设计数据库表结构,添加索引,优化查询语句,提升数据读取速度。

9. 程序优化

优化后端应用程序源码,减少不必要的计算和 I/O 操作。

综上所述,优化网页性能需要从网络资源、服务器端、应用程序等全方位进行优化,才能取得明显效果。接下来我们看看针对大数据量渲染的前端优化手段。

三、前端大数据量渲染优化

当需要前端渲染上万条以上数据时,常见的优化手段包括:

1. 合理分页

不要直接渲染全部数据,可以每次只渲染数据的一个分页,比如每页 100 条记录。当用户滚动到分页底部时,再异步加载下一页数据。

2. 虚拟列表

虚拟列表技术只渲染用户当前可见区域的数据,不渲染整个列表,复用 DOM 元素,避免大量 DOM 操作。例如 Vue 中的 vue-virtual-scroller 组件。

3. 防抖处理

对滚动、输入等高频事件进行防抖处理,避免触发过多无意义的计算。

4. 缓存复用

使用 keep-alive 缓存组件,避免重复渲染,提升切换效率。

5. 数据变更优化

对于需频繁更新的数据,避免直接操作 DOM,使用诸如 virtual DOM、dirty checking 等机制进行优化。

6. 图片懒加载

图片只在将要进入可视区域时才加载,减少不必要的提前加载。

7. 动画优化

优化过渡动画,避免动画过程中产生大量中间帧,导致卡顿。

8. 监控性能

在开发和生产环境监控页面性能,分析找到优化方向。

9. 代码拆分

避免把所有代码打包在一起,按需异步导入,减少初始包体积。

10. SSR 渲染

使用服务端渲染,使得初始状态更快呈现,优化载入速度。

11. Web Worker

利用 Web Worker 进行计算任务,避免主线程被占用,影响页面响应。

12. Tree Shaking

启用 Tree Shaking,移除没有使用的代码,减少打包后的代码量。

四、大数据量渲染优化方案

根据以上的分析,下面我们可以给出一些具体的大数据量渲染优化方案:

1. 动态渲染可视区域

这个优化点也是虚拟列表的核心 —— 只渲染用户当前可见的区域,不渲染整个巨大列表。

具体来说,我们可以在列表容器添加滚动监听,当滚动结束后,计算出当前可见区域的起始和结束索引,然后只渲染这个截断后的范围,复用之前的 DOM 元素。

这样就避免了大量 DOM 操作和不必要的渲染工作,优化性能。

2. 分页加载数据

并不需要将全部数据一次性加载完成,可以按分页逐步加载。一开始只加载第一页数据,当用户滚动到底部时,再加载下一页数据。

前端向服务器请求下一页数据时,传递下一页的页码,服务器根据页码返回对应数据。

分页加载可以分担服务器一次性承受巨大请求的压力,也减少了前端渲染全部数据的性能损耗。

3. 启用路由缓存

使用 vue-router 的路由缓存功能,对组件进行缓存,避免每次路由切换都重新渲染:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 始终滚动到顶部
    return { x: 0, y: 0 } 
  }
})

然后在router-view处使用 keep-alive 包裹:

<keep-alive>
  <router-view />
</keep-alive>

这样就可以利用缓存提高页面切换效率。

4. 图片懒加载

使用图片懒加载,只有当图片进入可视区域时才加载。常用的实现方式是先使用一张低质量占位图,当滚动到可视区域时再加载真实图片。

这样可以减少页面初始化时加载大量图片产生的带宽和计算pressure。

5. 监控长列表滚动

监听长列表的滚动事件,分析触发频率:

let lastScrollTime = 0 
list.addEventListener('scroll', event => {
  const now = Date.now()
  // 使用防抖,100ms内只记录一次
  if (now - lastScrollTime > 100) {
    lastScrollTime = now
    // 对滚动事件进行采样分析
  }
})

如果监测到一定时间内滚动事件过于频繁,可能表示出现了界面卡顿,可以及时定位问题所在。

6. 虚拟化长列表

结合前面的动态渲染可视区域和分页加载概念,我们可以进一步实现一个虚拟列表组件:

// VirtualList.js

data() {
  return {
    rawList: [], // 原始数据 
    visibleData: [] // 当前渲染的列表项数据
  }
},

// 当滚动时计算 visibleData
calculateVisibleData() {
  // ..
},

render() {
  return (
    <div ref="container" onScroll={this.handleScroll}>
      {this.visibleData.map(item => (
        <Item>{item}</Item>
      ))}
    </div>
  )
}

使用该组件时,只需要渲染 container,滚动时组件内部实现优化,大大减少 DOM 操作。

7. 图表虚拟化

对于含大量图表的页面,我们也可以只渲染当前可视区域的图表,其他图表用一个 div 占位。当滚动到某个占位图表时,再实际渲染该图表。

图表组件可以这样实现:

data() {
  return {
    placeholder: <div className="placeholder" />
  }
},

checkInView() {
  if (inViewport(this)) { 
    // 触发真实渲染
  } else {
    return this.placeholder;
  }
}

render() {
  return this.checkInView();
}

这样只渲染当前可见的图表,避免大量图表绘制工作占用资源。

8. 对复杂图表进行虚拟化

对于特别复杂的图表,我们甚至可以只渲染简化的低像素占位预览图,真正渲染高清图表只有当图表可见时才进行。

const preview = renderLowResChart(); // 绘制简化预览图

document.addEventListener('scroll', () => {
  const chart = findVisibleChart();
  if (chart) {
    // 渲染高清图表
  }
});

这种策略可以极大减少初始化图表绘制时间。

9. 分块渲染大表格

对于超大数据量的表格,我们也可以进行分块渲染:

let renderedRows = 0;

function renderMoreRows() {
  // 每次渲染 20 条
  for (let i = renderedRows; i < renderedRows + 20; i++) { 
    drawRow(data[i]) 
  }
  
  renderedRows += 20;
}



![img](https://img-blog.csdnimg.cn/img_convert/6554fdf1863500ab781a8d273af27035.png)
![img](https://img-blog.csdnimg.cn/img_convert/6efcaa8dbb7bef059ed98f4b58ece8ca.png)
![img](https://img-blog.csdnimg.cn/img_convert/6ac3b9a1d80862fbe7b28071859c261b.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

.(img-6na0JVzL-1715523335028)]
[外链图片转存中...(img-Phf3VHI9-1715523335028)]
[外链图片转存中...(img-3Xd36Qv2-1715523335028)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**