微信小程序运行机制介绍以及运行时可优化点

2024-04-15 10:53:23

微信小程序可以看作是由逻辑层、视图层两个线程协同完成运行的。

逻辑层负责执行JS代码，视图层负责渲染UI页面。逻辑层与视图层之间的事件触发以及数据传递，也就是setData的方法的一个调用全是由底层的Native层负责中转完成的。

我们以iOS Mac端为例，底层有一个叫做evaluateJavaScript函数，这个函数专门负责执行JS函数，每当这个逻辑层它有代码要执行的时候，这个代码它先转为字符串传递给这个函数，再由这个函数负责将这个代码传递给对应的WebView组件完成渲染、完成执行。

setData函数它用于更新视图数据，它的执行也不例外，底层的Native层，在逻辑层与视图层中间它像一座非常窄的一个窄窄的一个独木桥，极大地限制了两个线程之间的一个通讯效率，按照微信小程序的性能评判标准，setData每次传递的数据大小不能超过256KB，超过这个限制页面就容易卡顿，还有并不是低于256KB它便不会产生性能问题。在这个页面或者是列表组件scroll事件里面，如果我们频繁地调用setData视图层它来不及渲染也会出现明显的一个卡顿现象。

运行时优化点

1、使用WXS脚本，在视图层完成事件出理
2、重渲染机制
3、支持WXWebAssembly
4、允许开发者另开Worker线程
5、分页渲染，使用虚拟DOM
6、使用LocalStorage接口将数据缓存在本地
7、5s的挂起状态
8、启用Http2、Quic协议
9、getCurrentPages()接口
10、原生的Context节点
11、本地上传到云

项目诊断

1、代码依赖分析
2、性能报告
3、代码质量扫描
4、调试区的Performance面板
5、Memory面板
6、JavaScript Profiler面板
7、体验评分（Audits)面板

项目所使用语言以及软件版本

微信小程序运行机制介绍以及运行时可优化点相关推荐

微信小程序-04-详解介绍.json 配置文件
致我自己:小程序开发不是简单一两天的事,一两天只能算是了解,有时候看多了会烦,感觉很熟悉了,其实只是对表面进行了解,对编程却知之甚少,小程序开发不是简单的改模板,一两天很多部分改模板可能都做不到,坚持 ...
微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
小程序微信统计表格_微信小程序登录机制
" 不是0,也不是1,有0也有1 " 总有一个瞬间,你想记录当下的一些事情,所以有了这篇文章,不会口吐芬芳,我直接开门了,但愿能让你见山. 1. 背景 21 届的校园招聘已经打响了 ...
我是怎么绕过微信小程序审核机制的
开发微信小程序最尴尬的是好不容易开发完了,却在代码审核时被卡住了. 因为你可能认为你的类目是开放类目中的一个,但是微信可能判定为另一个需要资质的或者未开放的. 壹包小薯条本人在提交个人微信小程序&q ...
微信小程序登录流程+介绍wx.login和auth.code2Session
微信小程序登录流程+介绍wx.login和auth.code2Session 几个核心API和核心字段 wx.login() 调用接口获取登录凭证(code) code2Session 登录凭证校验, ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
微信小程序 - 人脸识别前端（二）拍照方式优化
微信小程序 - 人脸识别前端(二)拍照方式优化前文提及的识别方式较 low ,另外会留下识别痕迹,此处使用 <camera>组件进行优化. 前文地址:前文参考文章:zhoujie-人脸 ...
android post请求时报415错误,解决微信小程序用 SpringMVC 处理http post时请求报415错误...
解决微信小程序用 SpringMVC 处理http post时请求返回415错误写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax相似处理方法一致javascrip ...
教你理解微信小程序的生命周期和运行原理
写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...

最新文章

热门文章