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

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

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

微信小程序运行机制介绍以及运行时可优化点_第1张图片
我们以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)面板

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

微信小程序运行机制介绍以及运行时可优化点_第2张图片

你可能感兴趣的:(微信小程序,微信小程序,javascript,小程序)