标签:
应用的初始化代码越复杂,那么创建应用或者页面的时间就会越长,这会影响到首屏渲染时间。
不要引入自执行的模块
推荐级别:强烈
所有需要引入的文件,确保不要在文件中添加可执行的逻辑。因为这样子会占用页面创建时间,使您应用/首页的首屏变慢。
反例
// 这里的init是自执行的逻辑,会造成性能开销。
import './init.js'
export default {}
正例
export default {
onInit() {
// todo init
},
}
简化 app.ux 上的数据
推荐级别:强烈
只有应用全局共享的数据状态才有必要放在 app.ux 上,工具类方法切勿挂载到 app 上面。因为这个会使得应用地创建变慢。
反例
// app.ux
import uitls from './uitls'
export default {
uitls,
}
长页面分段加载
推荐级别:建议
先准备首屏的数据、模板和样式,等到首屏显示后再加载可视区域之外的内容。
正例 1
<template>
<div>
<div for="{{list}}">
<text>{{$item}}</text>
</div>
</div>
</template>
<script>
const listData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
export default {
data: {
list: [],
},
onInit() {
// 首屏展示一部分数据
this.list = listData.slice(0, 6)
},
onShow() {
// onShow 后显示所有数据
this.list = listData
},
}
</script>
复制代码
正例 2
<template>
<div>
<div>part A</div>
<div if="{{showB}}">part B</div>
</div>
</template>
<script>
export default {
data: {
showB: false,
},
onShow() {
this.showB = true
},
}
</script>
标签: 来源:
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。