Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
62631a85
U
uni-app
项目概览
DCloud
/
uni-app
5 个月 前同步成功
通知
748
Star
38709
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
8
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
8
Issue
8
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
未验证
提交
62631a85
编写于
9月 26, 2019
作者:
W
wanganxp
提交者:
GitHub
9月 26, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update performance.md
上级
b15fb9fe
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
10 addition
and
2 deletion
+10
-2
docs/performance.md
docs/performance.md
+10
-2
未找到文件。
docs/performance.md
浏览文件 @
62631a85
#### 运行原理
``uni-app``
在 App 端或小程序端运行时,从架构上分为逻辑层和视图层两个部分。逻辑层负责储存数据和执行业务逻辑,视图层负责页面渲染。
1.
逻辑层和视图层分离,且非H5端通信有折损
``uni-app``
在非H5端运行时,从架构上分为逻辑层和视图层两个部分。逻辑层负责储存数据和执行业务逻辑,视图层负责页面渲染。
页面加载时,联网和逻辑运算在逻辑层(Android是v8,iOS是jscore),然后会传递数据给视图层渲染。这种通信有损耗。同样,在视图层操作时,比如拖动页面,要实时传递事件给逻辑层接收,也是有损耗的。
2.
App端渲染引擎可切换
在App端,nvue页面的视图层是由原生引擎渲染的,vue页面的视图层是os的webview渲染的。
uni-app的webview渲染经过优化,性能也足够好。它比nvue弱的地方主要在于启动速度和可左右拖动的长列表。
3.
app-vue和小程序的数据更新,分页面级和组件级
对于复杂页面,更新某个区域的数据时,需要把这个区域做成组件,这样更新数据时就只更新这个组件,否则会整个页面的数据更新,造成点击延迟卡顿。
这就是自定义组件编译模式的特点。
比如微博长列表页面,点击一个点赞图标,赞数要立即+1,此时这个点赞图标一定要做成组件。否则这个+1会引发页面级所有数据的更新。
app-nvue和h5不存在此问题。造成差异的原因是小程序目前只提供了组件差量更新的机制,不能自动计算所有页面差量。
#### 优化建议
...
...
@@ -52,7 +60,7 @@
**优化页面切换动画**
*
页面初始化时若存在大量图片
渲染和大量数据通讯,很有可能造成页面切换卡顿、掉帧。建议延时100ms~300ms渲染图片
,分批进行数据通讯,以减少一次性渲染的节点数量。
*
页面初始化时若存在大量图片
或原生组件渲染和大量数据通讯,会发生新页面渲染和窗体进入动画抢资源,造成页面切换卡顿、掉帧。建议延时100ms~300ms渲染图片或复杂原生组件
,分批进行数据通讯,以减少一次性渲染的节点数量。
*
App端动画效果可以自定义。popin/popout的双窗体联动挤压动画效果对资源的消耗更大,如果动画期间页面里在执行耗时的js,可能会造成动画掉帧。此时可以使用消耗资源更小的动画效果,比如slide-in-right/slide-out-right。
**优化样式渲染速度**
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录