【uni-app】vue长列表性能优化

前言，本人业余开发者而已。对于vue懂得比较基础。

经历：我在加载一个长列表。每次加载50条数据。基本上无限次数加载。可以在移动端感觉出明显的卡顿

下面是我的优化

图片必须懒加载，是否懒加载蛮明显的。
图片懒加载也要优化好。例如onPageScroll事件中就可以使用函数节流手段。【0.2秒只触发一次】
我尽量采用css的background-background-image: url(); 而不使用 vue的image标签。具体我个人认为。image标签会被编译为这样子的结构。理论上更复杂的结构，耗能更大
从原理上剖析，每次data里面定义的变量【且在视图区被调用的变量】发生变动，整个视图区都会重新计算。如果你向v-for的数据尾部拼接了数据，那么原数据前面的数据也会循环计算【但是直接计算，不会覆盖到视图区】。

把比方。原数据100条，你拼接了50条数据在数组尾部。整个视图区会重新计算。循环区域会计算150次。
虽然说前0-100只是计算，并不会覆盖的视图区。但是计算它也吃内存是吧

有的人可能会说，给v-for设置:key不就可以了吗。并不是的

另外有的人认为key的值不能使用index，而是需要使用itme[‘id’]。其实并不是的，如果你的数组不会修改，或者索引不会修改，你大可以使用index就行了
每个v-for使用自定义组件。这样再更新100-150条数据的时候。第0-100条数据是不会更新的。具体原理我也不知道
尽可能优化视图结构，别套来套去的

PS: 无论你写什么，尽可能把不需要出现的视图中的变量写在其他地方（指自定义组件）。以免视图区重新计算

【uni-app】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 中懒加载 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
element下拉列表触发_记一次vue长列表的内存性能分析和优化
好久没写东西,博客又长草了,这段时间身心放松了好久,都没什么主题可以写了上周接到一个需求,优化vue的一个长列表页面,忙活了很久也到尾声了,内存使用和卡顿都做了一点点优化,还算有点收获写的有点啰嗦 ...

【uni-app】vue长列表性能优化

【uni-app】vue长列表性能优化相关推荐

最新文章

热门文章