【无标题】Vue长列表性能优化常用方案

长列表性能问题发生的原因？

众所周知HTML页面中DOM的修改会引起页面的重新渲染，重新渲染包含DOM节点的重排和重绘（重排和重绘的知识点可以自行百度），如果页面中大量的DOM节点发生重绘，页面就会出现性能问题。

如何解决出现的性能问题？

1，最常见的方式是分页加载，切片分段加载。

分页加载大家都知道，不再赘述。下面我们看看切片分段加载。

实现原理：requestAnimationFrame + ceateDocumentFragment

假如有10000条数据要渲染展示，我们用代码实现如下：

const total = 10000;
const container = document.querySelector('.container')
let index = 0;
function render() {if (index >= total) return;index += 50;const fragment = document.createDocumentFragment();for (let i = 0; i < 50; i++) {const li = document.createElement('li')li.innerHTML = i;fragment.appendChild(li)}container.appendChild(fragment)window.requestAnimationFrame(render)
}
render()

2，按需加载，只渲染可视区域内的DOM节点

实现原理：根据页面滚动高度和列表高度,计算出可视区域数据，推荐现成插件vue-virtual-scroller。

3，对于纯展示型的数据，如果不需要响应式变化，可以响应式数据变成普通数据，通过Object.freeze方法。

总结：

方法1中的切片分段加载，如果用户滑动较快，会出现白屏现象；

对于渲染和计算都耗时的场景，可以使用方法2，按需加载按需渲染。

对于渲染不耗的场景，可以使用方法3；

【无标题】Vue长列表性能优化常用方案相关推荐

vue长列表性能优化当item的高度不确定时
<template> <div class="home"> <div class="warp" ref="warp&qu ...
React项目实战之租房app项目（四）长列表性能优化城市选择模块渲染列表
前言目录前言一.长列表性能优化 1.1 概述 1.2 懒渲染 1.3 可视区渲染(React-virtualized) 二.react-virtualized组件 2.1 概述 2.2 基本使用 ...
判断小程序是否滚动到页面底部 scrolltolower_微信小程序长列表性能优化——recycle-view
背景: 第七次人口普查项目使用是微信小程序原生框架,组件是根据用户需求由项目组前端组组长封装完成的.采集小程序正式登记首页列表页面,根据腾讯老哥在sentry上的监控可以看出,列表页面前端性能比较差, ...
Vue项目的性能优化
目录前言一.代码层面的优化 1. **v-if 和 v-show 区分使用场景** 2. **computed 和 watch 区分使用场景** 3. **v-for 遍历必须为 item 添加 ...
10个技巧！实现Vue.js极致性能优化（建议收藏）
导语 | Vue是一套用于构建用户界面的渐进式的JavaScript框架.它具有体积小,更高的运行效率,双向数据绑定,生态丰富.学习成本低等优点,所以Vue也被广泛用在移动端跨平台框架上.接下来,我将 ...
有关前端性能优化的方案—Vue 代码层面性能优化+Webpack 层面的优化+基础的 Web 技术优化+非框架代码优化
文章目录: 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch 区分使用场景 1.3.v-for 遍历必须为 item 添加 key,且避免 ...
前端性能优化常用代码
前端性能优化常用代码为什么要做性能优化?性能优化到底有多重要? 网站的性能优化对于用户的留存率.转化率有很大的影响,所以对于前端开发来说性能优化能力也是重要的考察点. 性能优化的点非常的多,有的小伙 ...
Vue首屏性能优化组件
Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考 ...
Vue.js 应用性能优化，给你专业的分析+解决方案
目录介绍为什么我们需要 Vue JS 性能优化? Vue 性能不佳背后的主要原因如何检查您的 VueJS 应用的大小? 如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 ...
Flex性能优化常用手法总结
Flex性能优化常用手法总结随着Flex越来越多的被人们所熟知,越来越多的互联网也开始了RIA应用 .众所周知,目前国内的宽带应用并不是像很多发达国家发达,个人应用带宽基本上都是2M以下的,怎么样 ...

【无标题】Vue长列表性能优化常用方案

【无标题】Vue长列表性能优化常用方案相关推荐

最新文章

热门文章