网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 站群搭建 » 正文

微信小程序:一些运行细节及针对性的优化策略

2019-8-7 19:30:48 | 作者:老铁SEO | 0个评论 | 人浏览

  小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:。下载到的小程序代码包不是小程序的源代码,而是编译、压缩、打包之后的代码包。

  微信会在小程序启动前为小程序准备好通用的运行环境。这个运行环境包括几个供小程序使用的线程,并在其中完成小程序基础库的初始化,预先执行通用逻辑,尽可能做好小程序的启动准备。这样可以显著减少小程序的启动时间。

  通过2,我们知道了,问题1中第一张图是资源准备(代码包下载);第二张图是业务代码的注入以及落地页首次渲染;第三张图是落地页数据请求时的loading态(部分小程序存在)

  减少资源包中的图片等资源的数量和大小(理论上除了小icon,其他图片资源从网络下载),图片资源压缩率有限

  从开发者的角度看,控制代码包大小有助于减少小程序的启动时间。对低于1MB的代码包,其下载时间可以控制在929ms(iOS)、1500ms(Android)内。

  根据业务场景,将用户访问率高的页面放在主包里,将访问率低的页面放入子包里,按需加载;

  使用分包时需要注意代码和资源文件目录的划分。启动时需要访问的页面及其依赖的资源文件应放在主包中。

  在4的基础上,当用户点击到子包的目录时,还是有一个代码包下载的过程,这会感觉到明显的卡顿,所以子包也不建议拆的太大,当然我们可以采用子包预加载技术,并不需要等到用户点击到子包页面后在下载子包,而是可以根据后期数据,做子包预加载,将用户在当先页可能点击的子包页面先加载,当用户点击后直接跳转;

  这种基于配置的子包预加载技术,是可以根据用户网络类型来判断的,当用户处于网络条件好时才预加载;是灵活可控的

  目前很多小程序主包+子包(2M+6M)的方式,但是在做很多运营活动时,我们会发现活动(红包)是在子包里,但是运营、产品投放的落地页链接是子包链接,这是的用户在直达落地时,必须先下载主包内容(一般比较大),在下载子包内容(相对主包,较小),这使得在用户停留时间比较短的小程序场景中,用户体验不是很好,而且浪费了很大部分流量;

  可以采用独立分包技术,区别于子包,和主包之间是无关的,在功能比较独立的子包里,使用户只需下载分包资源;

  异步请求可以在页面onLoad就加载,不需要等页面ready后在异步请求数据;当然,如果能在前置页面点击跳转时预请求当前页的核心异步请求,效果会更好;

  利用storage API, 对变动频率比较低的异步数据进行缓存,二次启动时,先利用缓存数据进行初始化渲染,然后后台进行异步数据的更新,这不仅优化了性能,在无网环境下,用户也能很顺畅的使用到关键服务;

  可以在前置页面将一些有用的字段带到当前页,进行首次渲染(列表页的某些数据– 详情页),没有数据的模块可以进行骨架屏的占位,使用户不会等待的很焦虑,甚至走了;

  双线程下的界面渲染,小程序的逻辑层和渲染层是分开的两个线程。在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面。

  分析这个流程不难得知:页面初始化的时间大致由页面初始数据通信时间和初始渲染时间两部分构成。其中,数据通信的时间指数据从逻辑层开始组织数据到视图层完全接收完毕的时间,数据量小于64KB时总时长可以控制在30ms内。传输时间与数据量大体上呈现正相关关系,传输过大的数据将使这一时间显著增加。因而减少传输数据量是降低数据传输时间的有效方式。

  在数据传输时,逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分,之后将数据发送给视图层。同时,逻辑层还会将setData所设置的数据字段与data合并,使开发者可以用this.data读取到变更后的数据。因此,为了提升数据更新的性能,开发者在执行setData调用时,最好遵循以下原则:

  2.2 数据通信的性能与数据量正相关,因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串,则不应使用setData来设置这些数据;

  2.3 与界面渲染无关的数据最好不要设置在data中,可以考虑设置在page对象的其他字段下

  在一些页面会进行一些操作,而到页面跳转后,代码逻辑还在执行,此时多个webview是共享一个js进程;后台的setData操作会抢占前台页面的渲染资源;

  视图层将事件反馈给逻辑层时,同样需要一个通信过程,通信的方向是从视图层到逻辑层。因为这个通信过程是异步的,会产生一定的延迟,延迟时间同样与传输的数据量正相关,数据量小于64KB时在30ms内。降低延迟时间的方法主要有两个。

  1.去掉不必要的事件绑定(WXML中的bind和catch),从而减少通信的数据量和次数;

  2.事件绑定时需要传输target和currentTarget的dataset,因而不要在节点的data前缀属性中放置过大的数据。

  初始渲染发生在页面刚刚创建时。初始渲染时,将初始数据套用在对应的WXML片段上生成节点树。节点树也就是在开发者工具WXML面板中看到的页面树结构,它包含页面内所有组件节点的名称、属性值和事件回调函数等信息。最后根据节点树包含的各个节点,在界面上依次创建出各个组件。

  在这整个流程中,时间开销大体上与节点树中节点的总量成正比例关系。因而减少WXML中节点的数量可以有效降低初始渲染和重渲染的时间开销,提升渲染性能。

  初始渲染完毕后,视图层可以多次应用setData的数据。每次应用setData数据时,都会执行重渲染来更新界面。初始渲染中得到的data和当前节点树会保留下来用于重渲染。每次重渲染时,将data和setData数据套用在WXML片段上,得到一个新节点树。然后将新节点树与当前节点树进行比较,这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后,将setData数据合并到data中,并用新节点树替换旧节点树,用于下一次重渲染。

  在进行当前节点树与新节点树的比较时,会着重比较setData数据影响到的节点属性。因而,去掉不必要设置的数据、减少setData的数据量也有助于提升这一个步骤的性能。

  自定义组件的更新只在组件内部进行,不受页面其他不能分内容的影响;比如一些运营活动的定时模块可以单独抽出来,做成一个定时组件,定时组件的更新并不会影响页面上其他元素的更新;各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用。

  每一次事件监听都是一次视图到逻辑的通信过程,所以只在必要的时候监听pageSrcoll

  微信小程序如果想要优化性能,有关键性的两点:提高加载性能提高渲染性能接下来分别来介绍一下:提高加载性能首先,问一个问题,当用户点击小程序后发生了什么?上图中的三个状态,我们经常遇到,它们分别对应小程序...博文来自:weixin_34367257的博客

  小程序性能优化之预加载方案集成篇小程序性能优化之预加载方案集成篇前言框架优缺点优点:缺点:最终效果如何集成首先,你要有个基类CommonPage1.给IndexPage页面添加跳转按钮。2.给Inde...博文来自:专注扫地人士的博客

  我们都知道,性能的好坏直接影响用户的体验。本文首先论述下如何评判一个小程序页面的性能情况,之后通过具体的案例重点讲解下几点实践技巧,最后再讲讲key值在渲染一个列表时发挥了一个怎么样的作用,以此来论述...博文来自:CaseyWei

  小程序性能优化之秒开方案小程序性能优化之秒开方案前言最终效果技术原理快捷键Markdown及扩展表格定义列表代码块脚注数学公式UML图:离线写博客浏览器兼容前言这个之前看到一篇文章,是讲如何实现小程序...博文来自:专注扫地人士的博客

  目前小程序已经是火遍全国,市场很大。因此程序只需要把代码整理就OK1.小程序的请求分别是postget每一个页面几乎都使用的到,自己封装一个post或get的请求,这样会减少自己大量的代码编写可以是p...博文来自:技术分享

  1.首先是是setData可以使针对性渲染数据。假设是产品上拉加载更多,第一次可以渲染list[0],后面可以渲染list[i]。可以减少响应速度,也不会造成渲染崩溃。渲染崩溃的数据是100万。2.懒...博文来自:besttoby01的博客

  内容整理于微信公开课为什么要做性能优化?一切性能优化都是为了体验优化1.使用小程序时,是否会经常遇到如下问题? 打开是一直白屏 打开是loading态,转好几圈 我的页面点了怎么跳转这么慢? ...博文来自:大灰狼的小绵羊哥哥的博客

  转自解放号社区:开发基本框架(MINA框架) └─Project-folder/·······················...博文来自:sinat_36947685的博客

  作者:龚澄导语性能调优是一个亘古不变的线上还是小程序中。因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用。因此必须另开辟蹊径找出适合小程序的调估方式。本文旨在介...博文来自:腾讯Bugly的专栏

  写这篇文章的缘由:最近在公司的小程序项目中遇到了页面图片元素过多导致的性能问题.从小程序提供的性能检测面板分析,确定是图片元素占用了过多内存导致.因为本人之前主要是做桌面端应用开发和原生app开发,没...博文来自:weixin_33804582的博客

  这份文字是根据近期团队做来问丁香医生SPA和丁香医生小程序 加载速度优化的经历整理而成。效果古人有一句话叫做:治感冒看疗效。既然是关于速度优化的,我们就先来看一下优化的效果。来问丁香医生ChromeN...博文来自:Dreawer微信小程序联盟

  1、提高页面加载速度2、用户行为预测3、减少默认data的大小4、组件化方案5、自主获知自己的服务器...博文来自:luzhangtong的博客

  由于收到开发者的反馈,为了方便开发者更好地使用获取用户信息的接口,开发者仍然可以使用wx.getUserInfo接口获取用户信息。具体优化调整如下:1.获取用户头像昵称,第一次需要使用button组件...博文来自:BadmintonCode的专栏

  微信Andoid6.5.10开始,我们提供了Trace导出工具,开发者可以在开发者工具TracePanel中使用该功能。使用方法PC上需要先安装adb工具,可以参考一些主流教程进行安装,Mac上可使用...博文来自:blueZhang的博客

  打一架,不行就再打一架-----来源:视觉中国后台接口返回一个数组,数组里面N多对象,每个对象里面几十上百条数据,最好玩的是,我只需要每个对象里面的某两个数据、、、、类似这种:datas:[{id:1...博文来自:weixin_34116110的博客

  小程序文件的本地存储优化优化原因!众所周知,微信将小程序的本地文件存储空间限制为10M,导致我们在调用wx.saveFile()接口存储临时文件时,存着存着,就超过10M了。那该怎么办呢?肯定是要写一...博文来自:专注扫地人士的博客

  导语性能调优是一个亘古不变的线上还是小程序中。因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用。因此必须另开辟蹊径找出适合小程序的调估方式。预先加载这一节的内容...博文来自:前端人公众号作者

  尽管4月份微信官方将小程序的大小限制从1M放开到2M,但是对于使用大量图片的小程序(电商等)来说,2M的限制还是显得拮据。基于这种场景,腾讯云微信小程序解决方案团队开发了WeCOS小程序瘦身工具,依托...博文来自:wy_Blog的博客

  由于小程序是轻量级的,所以架构设计方面不像移动端,有MVP、MVVM、插件化、组件化这么多成熟的架构可以使用,现在市面上关于小程序架构方面的设计还是很少的。当然这些都是一些思想。我们可以从一个小模块去...博文来自:hailin123123的博客

  小程序科普类的文章已经很多了,今天这里讲的是针对小程序的优化方法,可以有效提高小程序的响应速度和用户体验。当然,开发体验也提高不少。...博文来自:wetest_tencent的博客

  微信小程序优化建议_小程序优化建议setDatasetData是微信小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。在介绍常见的错误用法前,先简单介绍一下setData背后的工作原理。工作...博文

  1.避免使用本地大图片、大资源文件2.请避免在小程序的UI上使用大图片,应该尽可能的通过颜色样式来装点你的小程序,或者,使用小而精致的小图标来点缀,如果实在想用大图片,那请不要将图片放进小程序的本地代...博文来自:的博客

  小程序常见优化策略最近也开发了两个小程序,在开发的过程中,总结一些优化心得理解wx:if和hidden,并合理利用,官方文档中并没有明确说出hidden如何使用,要不是wx:if文档中提到,经常切换显...博文来自:weixin_34358365的博客

  性能优化有三个层次:系统层次算法层次代码层次系统层次关注系统的控制流程和数据流程,优化主要考虑如何减少消息传递的个数;如何使系统的负载更加均衡;如何充分利用硬件的性能和设施;如何减少系统额外开销(比如...博文来自:u013240812的专栏

  前言2018年7月份微信公开课上的小程序专场中“小程序性能优化”模块中提到了小程序性能优化方面的知识,其中从启动加载性能优化和渲染性能优化两个方面进行了阐述,提到了日常我们开发中如何去提高小程序的性能...博文来自:weixin_33801856的博客

  2018年了,时间过的真快,最近想扩展一下知识面,也顺便学习一下比较成熟的微信小程序开发平台,于是乎就操刀微信,抽空花了几天看完微信小程序的开放平台(博文来自:Z

  前几天,在朋友圈,看到有人说找些聊天资料,非常不方便!这里我就不解答如何在聊天资料中找资料。我到是想起,WSEO,微信搜索引擎排名或营销。这里的W,就是WeChat微信的首字母缩写了。SEO就是搜索引...博文来自:seo591的博客

  今天给大家带来小程序懒加载的办法,来提高页面的体验性。理念:加入滚动,当页面滚动的时候计算列表数据的高度来判断该区域数据图片是否加载显示1.首先我们要在wxml要显示的列表里加入滚动条然后。。。wxm...博文来自:weixin_38047955的博客

  通过搜索资料找出三种方式一:加载多张图片  可以先加载一张图片并监听图片控件的bindload(图片加载完成后触发),当加载完一张图片后再将其余图片进行显示。二:将较大的图片 先进行加载缩略图 后加载...博文来自:aaron9185的博客

  历史总结:小程序倒计时深究小程序实战踩坑之B2B商城项目总结初试小刀自我简历小程序启动加载优化在小程序启动时,微信会在背后完成几项工作:下载小程序代码包、加载小程序代码包、初始化小程序首页。初始化小程...博文来自:weixin_34216196的博客

  今年一月份上线的小程序,经过近一年的沉淀发酵,现在也进入了快速发展期。在未来肯定会有越来越多的小程序诞生,小程序多了就需要搜索,那么如何让自己的小程序在众多的小程序中脱颖而出,这就需要小程序seo优化...博文来自:Dreawer微信小程序联盟

  做微信小程序大部分情况下都离不开数据的一些修改及绑定今天来说一下关于数据方面的一些注意事项首先是数据绑定js代码data:{arrss:[{logs:1111}]},为了方便解释,我就只定义这一个...博文来自:的博客

  一直发现小程序好慢,尤其是第一次打开的时候。因为第一次会涉及到登录的授权,官方文档是这么说的:通过wx.login()获取到用户登录态之后,需要维护登录态。开发者要注意不应该直接把session_ke...博文来自:weixin_34006468的博客

  小程序的架构   小程序分为两个主要部分:view模块和service模块。View模块负责UI展示,它由wxml和wxss转换后的代码以及微信提供的辅助模块组成。一个view模块对应一个webvie...博文来自:hyukfxj35的专栏

  对小程序的一些原理和异同点,可以移步上一篇文章:小程序那些你可能不知道的事基于实际优化数据总结下这篇文章.废话不多说,我们直接进入正题吧相信关注小程序的朋友们,对这张图片一定不陌生。经过大量的测试;首...博文来自:weixin_33794672的博客

  在开发微信小程序的时候,除了tabBar上设置的页面之外,想进入肯定要走跳转之类的进入,但是我们开发的时候肯定想要直接看到该页面,那么我们就需要设置一下启动页面了有两种方法。方法一在app.json文...博文来自:前端向朔

  最近一直在做小程序,开始的时候因为项目太急,功能模块很少,权衡之下选择了原生的小程序开发模式。然后随着功能迭代,小程序的大小又有限制,所以决定开始尽可能的优化项目。下面是用到的一些优化方案:1...博文来自:liya_nan的博客

  摘要:如果小程序不够快,还要它干嘛?原文:微信小程序性能优化方案——让你的小程序如此丝滑作者:杜俊成要好好学习Fundebug经授权转载,版权归原作者所有。微信小程序如果想要优化性能,有关键性的两点:...博文来自:Fundebug博客

  最近在使用微信小程序的setData时,遇到了以下问题。如下:官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的:Page({data:{array:[{text:init...博文来自:李留白

  按需加载(分包加载)首屏加载(懒加载)做到请求返回的数据都是需要用到的数据减少项目体积,只留下需要的库和包,图标类型的尽可能使用iconfont,控制网络图片、本地图片大小,图片压缩,减少代码体积,代...博文来自:ryy的博客

  一.性能优化概述•一般来说,程序性能不佳,有可能是如下三个原因:–A.程序运输量大,导致CPU过于繁忙,CPU是瓶颈•解决办法就是在设备上运行TOP命令,如果某个进程的CPU利用率很高,则说明CPU是...博文来自:jamielover的专栏

  微信小程序作为手机页面的一种,相比传统的网站和应用来说存在比较特殊的地方:1、开发者往往对程序做了限制,只能通过微信客户端访问2、通过微信的Oauth进行认证这样往往会导致性能测试工具无法压测到应用的...博文来自:haloha1的博客

  前几天老大让我测试小程序的性能,让我感觉无从下手,查阅了一翻资料后,结果成功了,先展示下成果把虽然看不懂,但是可以交差了,心里美滋滋。那我今天就分享是怎么做的吧。1,pc端保证可以在cmd下可以运行a...博文来自:的博客

  一、重新优化小程序这是我优化前的总结文章:juejin.im/post/5ba26f…再唠叨一下,在我做这个小程序之前,市面上大多数考公类型的小程序都是卖课程为主,或者专业刷题的,综合性的咨讯类的反正...博文来自:weixin_34228617的博客

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:小程序微信  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    港警再次呼吁暴徒放下武器 有序走出理工大学校园
    增持国寿、卖出人保 市场为何如此偏心?
    香港理工大学附近部分暴徒被警方抓获
    海南第七批建设项目开工 全省固投增速连续9个月回升
    蒙牛获评社科院社会责任榜单第一 副总裁发表演讲
    国内最大国际邮轮母港17日开港 部分国际航线免签
    无锡银行:持股6.3%股东万新机械拟减持不超过1.62%
    苗圩:深化5G等新一代信息技术与制造业融合发展
    44天内海航控股收6亿元政府补 航线补贴占94%
    大风刮出一座名校?中北大学被吹成“北大”(图)