腾讯课堂在哪里看文件,腾讯课堂如何开课

首页 > 实用技巧 > 作者:YD1662023-11-04 18:17:42

请求排队

3.3.2. 分步渲染

这里的方案相信大家也能很好理解,主要是优先处理首屏需要的数据并通过 setData 更新视图,然后在处理其余的数据。但根据官方文档的说明:

setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

而小程序代码执行顺序也遵循JS的事件循环机制,仅仅是在处理后的数据调用 setData ,然后继续或者通过 Promise 处理下一步的话,并不能达到分步渲染的目的,而直接通过回调的方式在 setTimeout 中使用嵌套渲染,代码的可读性会变差,同时也不是很优雅。我们的解决方式是利用 setTimeout 封装了一个符合 Promise 标准的方法,从而可以像使用 Promise 那样继续分步渲染:

腾讯课堂在哪里看文件,腾讯课堂如何开课(17)

4. 成果

经过这一系列的优化,效果还是比较明显的:

4.1. 包大小

在包大小方面:

从启动耗时的数据看,下载耗时和JS注入耗时都有明显的下降:

腾讯课堂在哪里看文件,腾讯课堂如何开课(18)

启动耗时

再看打开耗时分布,可以看到3s内打开的用户比例有明显增加,从 56.26%增加到64.25%;

腾讯课堂在哪里看文件,腾讯课堂如何开课(19)

打开分布

4.2. 请求耗时

数据预拉取,提前拉取,数据缓存在冷启动和页面切换时都起到了很不错的效果:

首页请求速度从 平均400ms下降到50ms,优化了87.5%

课详页的请求速度从 平均800ms下降到90ms,优化了88.75%

而数据缓存让二次访问时页面可以秒开:

腾讯课堂在哪里看文件,腾讯课堂如何开课(20)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.