【性能优化实战】都知道小程序FMP优化实录，厉害了

最新推荐文章于 2024-04-21 00:45:27 发布
最新推荐文章于 2024-04-21 00:45:27 发布
阅读量443 收藏
点赞数
分类专栏： 程序员 文章标签： 架构 移动开发 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66264798/article/details/122685805
版权
本文介绍了针对小程序问答页的性能优化实践，通过实施分屏式内容渲染策略，显著提升了FMP指标，减少了页面加载时间。优化后的页面分为四个渲染阶段，保证了核心内容的快速展示，并通过DataSetter工具类管理setData操作，避免渲染线程拥塞，提高渲染效率。
摘要由CSDN通过智能技术生成
优化前的问答页数据渲染示意图

优化之前，页面加载完数据之后的首次渲染，会一次提交问题区、回答区、广告组件区三个部分的渲染任务，由于这三个区域涉及的内容量比较大，基本都会超过一屏，甚至两屏以上，另外各个区域也都包含一些图文内容，加上本身耗时较高的广告组件。整体页面内容渲染速度很差。并且，因为存在直播信息横条等单独异步请求加载的数据内容渲染，也容易造成 setData 操作在小程序渲染线程中拥塞现象的发生。

所以，从小程序 FMP 的统计规则来看，目前的数据渲染逻辑，显然并不是最优的。

既然 FMP 主要统计的是用户第一眼可以看到的首屏位置内容，那么我们是不是可以换个思路来完成我们的内容渲染工作。

在确保数据接口性能已经符合常规标准的情况下，我们可以使用更聪明的渲染策略。

优化方案

为了解决上述问题，我们构思了一套分屏式内容渲染策略，意在让用户能最快速度的先看到一部分关键内容，再分阶段渲染剩下需要被渲染的数据，而那些不需要被自动渲染的数据，可以改成由用户某种行为（比如滑动页面）触发加载和渲染。

优化后的问答页渲染示意图

PS：广告组件本身为异步组件，第二次 setData

最低0.47元/天 解锁文章
【性能优化实战】宝宝知道小程序FMP优化实录，ffmpeg音视频开发实战6
flutter001的博客
12-14 422
优化之前，页面加载完数据之后的首次渲染，会一次提交问题区、回答区、广告组件区三个部分的渲染任务，由于这三个区域涉及的内容量比较大，基本都会超过一屏，甚至两屏以上，另外各个区域也都包含一些图文内容，加上本身耗时较高的广告组件。整体页面内容渲染速度很差。并且，因为存在直播信息横条等单独异步请求加载的数据内容渲染，也容易造成 setData 操作在小程序渲染线程中拥塞现象的发生。 所以，从小程序 FMP 的统计规则来看，目前的数据渲染逻辑， 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目
视频教程-FFmpeg音视频开发实战6 iOS/Android/windows/Linux-其他
weixin_31006891的博客
05-28 1388
FFmpeg音视频开发实战6 iOS/Android/windows/Linux ...
【性能优化实战】都知道小程序FMP优化实录，面试掌握的技巧
2401_84103344的博客
04-10 805
优化之前，页面加载完数据之后的首次渲染，会一次提交问题区、回答区、广告组件区三个部分的渲染任务，由于这三个区域涉及的内容量比较大，基本都会超过一屏，甚至两屏以上，另外各个区域也都包含一些图文内容，加上本身耗时较高的广告组件。整体页面内容渲染速度很差。并且，因为存在直播信息横条等单独异步请求加载的数据内容渲染，也容易造成 setData 操作在小程序渲染线程中拥塞现象的发生。所以，从小程序 FMP 的统计规则来看，目前的数据渲染逻辑，显然并不是最优的。
php fpm 性能,PHP-FPM性能调优 – 流量突发
weixin_35097945的博客
03-09 313
我有一个用Laravel / PHP编写的Web应用程序,它处于早期阶段,通常可以提供大约500 – 600 reqs / min.我们使用Maria DB和Redis进行缓存,一切都在AWS上.对于我们想要在我们的平台上推广的活动,我们向所有用户发送推送通知(移动平台),导致大约2分钟长的流量突发,使我们达到3.5k reqs / min在我们当前的服务器规模上,这完全阻碍了应用服务器的CP...
FFmpeg音视频开发实战6 iOS/Android/windows/Linux
06-10
本课程为《FFmpeg音视频开发实战5》的进阶课程,也是终结篇。从第6部分开始，我们进入高阶课程的学习。针对音视频核心功能进一步深化讲解，更多的实际案例，从FFmpeg本地音视频处理，深入UDP网络通讯协议，UDP高效实时视频传输，丢包处理，到OpenGL/ES 特效，滤镜,到webRTC,SIP重量级网络通讯协议框架.以及当前比较流行，未来人才需求量非常大的机器学习，深度学习，移动端人工智能，投入更多的内容。
DIalog实现蒙版指引提示效果，小程序FMP优化实录
m0_64604178的博客
12-09 322
dialog.dismiss(); activity.finish(); } return false; } }); } return dialog; } 上面方法中用到的 style   Dialog_FullScreen //这个里面用到的图片自己替换下 public static void checkIsShowTipsDialog(final Activity activity, String activityTag) { final Preferences pref = Prefe
小程序FMP优化实录，源码+原理+手写框架
m0_56222134的博客
05-21 266
前言 马爸爸总结了一句话：跳槽，要么是钱不到位，要么是受了委屈。 我给自己这次的跳槽经历做了一个分析，希望能对那些想换工作的朋友有所帮助。 许多朋友想换工作，但是对“换工作”的理解可能仅限于写简历、投简历、面试。在跳槽之前，我也是这么想的。 当时，工作并不顺利，我的专业技能并没有很好的发挥，公司也给不了什么发展前景，就有了跳槽的打算。 我看到一家行业内还不错的上市公司在招聘这个岗位，于是我发了简历。面试后我感觉很好，但我拒绝了，因为工资没有达到预期。 经过仔细思考，我发现我准备得太匆忙了，或者根本没有准备好
微信小程序前端性能优化：7个实战技巧助你飞速提升用户体验
[微信小程序前端性能优化：7个实战技巧助你飞速提升用户体验](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8b9eb8119a44b4397976706b69be8a5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?...
音视频处理FFMPeg开发实战(6) -- Filter的使用(在视频中加入文字)
x879014419的博客
04-07 527
创建FILTER的一般流程： 1、初始化一个Filter对象： （1）调用avfilter_graph_alloc()函数创建一个Filter对象 （2）调用函数avfilter_graph_parse_ptr()把描述信息加到Filter对象上。 （3）调用avfilter_graph_config()函数检查配置有效性、配置滤镜的连接和格式。 2、使用Filter对象： （1）使用av_buf...
一线互联网互联网架构师自述：GitHub标星10w+，2021最新Android笔经
m0_64383736的博客
12-06 208
有想法和技术展望目标，制定短期目标 2)、架构设计： 集思广益来设计，归类总结，根据讨论结果制定规范。设计不仅仅是技术相关（业务流程，业务方向，模块划分组合，框架设计，流程纰漏等），设计出来还是需要实施的。 3)、技术攻关： 疑难技术点攻关，将问题集中化解决，提供平台化解决方案以及选型决策。 4)、解决疑难问题： 定期做总结归纳以此分析问题，解决问题。 发现各类型问题（不仅仅是技术），通过规范，演讲，绘图等方式解决隐患。 5)、互动沟通： 架构通过团队的沟通总结出方向, 部门之间沟通，开发之间沟通，产品之间
android 校验用户名密码手机邮箱身份证邮编等，ffmpeg音视频开发实战6下载
m0_64603929的博客
12-15 159
return false; } /** 未部不能有空格 */ if (username.endsWith(" ")) {// 未部有空格 return false; } if (username.contains(" ")) {// 不能含有 return false; } /** 不能有中文 */ Pattern pattern1 = Pattern.compile("[^\u4E00-\u9FA5]*"); // 不是中文 Matcher m1 = pattern1.matcher(userna
鸿蒙OS应用开发之——Java UI框架-常用组件Image(3)，2024年最新ffmpeg音视频开发实战6下载
2401_84182222的博客
04-14 868
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。 既有适合小白学习的零基础资料，
ffmpeg音视频开发
疾风剑豪
08-14 630
转到 https://edu.csdn.net/combo/detail/986---Android 音视频开发（杨万里付费版） 《Android 音视频开发》PDF 链接: https://pan.baidu.com/s/1Xd6gbrawTpnFbO7wLhpQLA 提取码: uyku 《Learn OpenGL 中文》：https://learnopengl-cn.github.io...
32.FFmpeg+OpenGLES+OpenSLES播放器实现（六.FFmpeg音视频解码）
weixin_34112208的博客
10-12 245
项目源码FFmpeg开发文档 解码分为软解码和硬解码，那么什么是软解码和硬解码，二者有什么区别？简单来说，在于是否使用CPU进行解码，最初视频解码都是通过CPU进行的，那时候视频分辨率较低，CPU完全可以胜任解码的工作，但是随着高清视频的出现，使用CPU进行解码的压力越来越大 软解码 使用CPU进行解码，所以就很容易造成CPU负载过大。纯粹依靠CPU来解...
ffmpeg音视频开发实战百度云，快醒醒吧
F1520080的博客
03-07 789
如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。，即可免费领取！**最后针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！
安卓web开发！这些年Android面试的那些套路，赶紧收藏！
左夜天
03-03 521
作为一名即将求职的程序员，面对一个可能跟近些年非常不同的 2020年，你的就业机会和风口会出现在哪里？在这种新环境下，工作应该选择大厂还是小公司？已有几年工作经验的老兵，又应该如何保持和提升自身竞争力，转被动为主动？ 就目前大环境来看，跳槽成功的难度比往年高很多。一个明显的感受：今年的面试，无论一面还是二面，都很考验Android程序员的技术功底。 最近搜集了一些基础问题以及阿里、腾讯2020年一些精选的面试题，最后还把把技术点梳理成一份大而全的“Android高级工程师”面试xmind（实际上比预期多花了
由浅入深！小程序FMP优化实录，已拿offer入职_小程序fmp是指的什么(1)
最新发布
2401_84166836的博客
04-21 713
其实很简单就下面这张图，含概了Android所有需要学的知识点，一共8大板块：架构师筑基必备技能Android框架体系架构（高级UI+FrameWork源码）360°Androidapp全方位性能调优设计思想解读开源框架NDK模块开发移动架构师专题项目实战环节移动架构师不可不学习微信小程序混合开发的flutterAndroid学习的资料我呢，把上面八大板块的分支都系统的做了一份学习系统的资料和视频，大概就下面这些，我就不全部写出来了，不然太长了影响大家的阅读。
小程序的生命周期
qq_39748940的博客
01-28 886
文章目录1.onInit()2.onLoad()3.onShow()4.onReady()5.onHide()6.onUnLoad()2.读入数据总结onInit 1.onInit() 页面初始化时触发。一个页面只会调用一次，可以在 onInit 的参数中获取打开当前页面路径中的参数。 onInit 执行时机早于 onLoad 。如果开发者有性能优化的需求，建议将页面的数据网络请求放在 Page.onInit 中，并在网络请求的回调中执行 setData ，可以提升页面的加载速度。 2.onLoad() 页
网站性能指标 - FMP
Jartto's Blog
03-15 1983
对于前端童鞋来说，优化是一个永恒的话题。上线并不是网站开发的终点，如何吸引用户、提升用户体验，应该成为我们 F2E 的追求目标。如果你对优化还不了解，建议先阅读如下两篇文章： 网站优化实战 网站优化，这些工具你一定用得着 当然，衡量网站性能的指标有很多，今天我们就来看一个「令人费解而又头疼」的指标 - FMP。 First Meaningful Paint 是指页面的...
前端面试实战：排查性能优化与工作经验问题详解
"在前端面试中，实际工作经验是企业评估候选人的重要标准，特别是在性能优化方面。面试官可能会询问如何排查H5页面加载慢或运行卡顿的问题，以此考察应聘者是否具备处理实际场景的能力。面试中可能涉及的问题包括： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值