小程序面试题之性能优化提高10道

news2025/6/8 6:00:29

1.你使用过哪些方法,来提高微信小程序的应用速度?
提高页面加载速度
用户行为预测
减少默认data的大小
组件化方案
控制包的大小
压缩代码,清理无用代码
采用分包策略
启用本地缓存
参考地址:https://blog.csdn.net/wu_xianqiang/article/details/108037685
2.小程序对wx:if 和 hidden使用的理解
wx:if 通过条件判断确认对象的显示与否,有更高的切换消耗。
hidden利用样式来控制对象的显示与隐藏,有更高的初始渲染消耗。
因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
对比v-if和v-show,性质雷同,但小程序是通过hidden作为条件,vue里是show作为条件
3.大数据量的时候,单个setData以及多次setStata,对性能有什么影响
大数据量,特别是循环遍历数组追加的时候,进行的是一次性单个setData的数据设值,前期等待时间比较长,用户体验相对较弱,但应用的整体性能比较好
对于同样的情况,如果在循环体内进行setData的多性设值与页面渲染操作,那么应用实现的是多次渲染处理,界面内容逐步更新,用户体验相对较好,但对应用的整体性能损耗较大
4.通过wx.getSystemInfo可获取系统信息,这一API在项目进行几次调用,通过什么方式进行性能优化
如果多个页面都需要获取系统信息,那么wx.getSystemInfo是否在多个页面不断调用(不需要)
可以在app.js的onLaunch生命周期钩子函数中进行调用,然后将系统信息存储于globalData中,这样所有页面可以直接获取全局的globalData数据内容,以减少wx.getSystemInfo内容的重复调用
5.当用户点击小程序后发生了什么
有三个点的白屏(左侧): 下载代码包的阶段
没有三个点的白屏(中间): 业务代码注入和渲染的阶段
加载中(右边): 业务代码中异步请求数据
总的来说,小程序呈现到用户面前,实际上经历了下面两个阶段:
运行环境的加载:这步是微信做的,微信会在用户打开小程序之前就已经准备好环境,用户点击小程序入口后,直接下载小程序的代码包即可。
下载代码包:小程序代码包里面的代码,不是小程序的源代码,而是编译、压缩、打包之后的代码包。

下图中,左侧的“预加载”对应的是运行环境的预加载,右侧的“小程序启动” 对应的是下载代码包启动小程序。

小程序提供的运行环境,分为逻辑层(AppService)和 视图层(webView),逻辑层是执行javascript的地方,视图层是渲染页面的地方。当小程序的代码包下载完毕后,业务代码分别注入逻辑层和渲染层。

提升加载性能的最最最关键性一点是,控制包的大小,这个也是微信官方的说法。

6.小程序控制包的大小有哪些方式
压缩代码,清理无用的代码
图片放在cdn
利用iconfont进行图标应用,并且图标操作只留css样式文件,其它文件则删除不使用
如果使用echart图表,可以下载echart源码,利用配置操作发布指定功能的自定义的echart图表文件
采用分包策略
分包预加载
独立分包(版本要求有点高)
7.小程序对异步请求的优化有哪些方式
onLoad 阶段就可以发起请求,不用等ready
如果业务要求在ready中进行数据请求,需要利用条件判断减少请求次数
请求结果放在缓存中, 下次接着用
请求中可以先展示骨架图
先反馈,再请求。比如说,点赞的按钮,可以先改变按钮的样式,再发起异步请求。
8.如何理解setData的操作过程,如何实现提升渲染性能
每调用一次setData, 都是逻辑层向渲染层的一次通讯,这个通信还不是直接传给webView, 而是通过走了native层,通讯的开销很大。
渲染层收到通讯后,还需要重新渲染出来,所以一次setData带来两次开销:通信的开销 + webview更新的开销。
在数据传输时,逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分,之后将数据发送给视图层。同时,逻辑层还会将setData所设置的数据字段与data合并,使开发者可以用this.data读取到变更后的数据。

**减少setData的数据量:**如果一个数据不会影响渲染层,则不用放在setData里面

合并setData的请求,减少通讯的次数

列表的局部更新:

在一个列表中,有n条数据,采用上拉加载更多的方式,假如这个时候想对其中某一个数据进行点赞操作,还能及时看到点赞的效果。
此时,可以采用setData全局刷新,点赞完成之后,重新获取数据,再次进行全局重新渲染,这样做的优点是:方便,快捷!缺点是:用户体验极其不好,当用户刷量100多条数据后,重新渲染量大会出现空白期(没有渲染过来)。
如果采用布局刷新,将点赞的id传过去,知道点的是那一条数据, 将点赞的id传过去,知道点的是那一条数据。
重新获取数据,查找相对应id的那条数据的下标(index是不会改变的),用setData进行局部刷新
this.setData({
    list[index] = newList[index]
})

**小心后台页面的js:**定时器、事件监听、长连接等会影响性能的js操作对象需要在页面跳转的时候进行清除。原因是:小程序中可能有n个页面,所有的这些页面,虽然都拥有自己的webview(渲染层), 但是却共享同一个js运行环境。也就是说,当你跳到了另外一个页面(假设是B页面),本页面(假设是A页面)的定时器等js操作仍在进行,并且不会被销毁,并且会抢占B页面的资源。

**小心onPageScroll:**pageScroll 事件,也是一次通讯,是webview层向js逻辑层的通讯。这次通讯也是开销较大,如果考虑到这个事件被频繁的调用,回调函数如果有复杂的setData的话, 性能就会很差了。

只有在必要的时候监听onPageScroll事件
避免在onPageScroll中进行复杂的逻辑处理
避免在onPageScroll中频繁的setData调用
避免频繁查询节点信息selectQuery操作
**小心获取节点位置:**少用selectQuery,利用intersectionObject进行节点信息获取的替代

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

9.微信开发者工具能够很好的进行性能调优测试吗
在微信开发者工具没有办法复现某些性能问题,是因为从逻辑层到webview的通讯,开发者工具底层是通过onpostMessage, 微信ios好像是微信自己实现的桥接,所以强烈建议使用真机进行调试

微信开发者工具,没有办法在【network】里面看到图片资源的加载,通过【trace】面板连接安卓真机也没有办法看到。如果想测试懒加载的效果,就比较麻烦,需要通过设置微信开发者工具的代理到127.0.0.1,通过charles可以抓包看到
10.什么是小程序的体验评分,在哪里进行设置操作
体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议。

使用流程:在调试器区域切换到 Audits 面板。 点击”开始“按钮,然后自行操作小程序界面,运行过的页面就会被“体验评分”检测到。点击 “停止" 则结束检测,在当前面板显示相应的检测报告,开发者可根据报告中的建议对相应功能进行优化。 如需再次运行体验评分,可点击报告上方的“清空体验评分”恢复初始状态。请注意,目前系统不提供报告存储服务,一旦清空体验评分,将无法再查看本次评分结果。

 


自动运行:为了方便开发者能够及时发现小程序的体验问题,小程序还支持体验评分的 “自动运行” 功能。该功能会在开发调试小程序时,实时检查,一旦发现体验分数低于 70 分时,系统会在 console 面板打印一个 warning 信息提示开发者,此时开发者可以切到 Audits 面板查看详情。开发者在工具的右上角 “详情” 面板的 本地设置 中勾选 “自动运行体验评分” 选项即可开启。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1592733.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux上的可执行文件在Windows上是不能运行的

一、概要 1、可执行文件的格式 Linux上的可执行文件是elf格式的 Windows上的可执行文件是exe格式的 Linux上的可执行文件在Windows上是不能运行的 2、程序的普通构建与静态构建 普通构建: 一个.c文件,用gcc命令编译成可执行文件(程序)&#xff0c…

数据结构排序篇上

排序的概念及其运用 排序的概念 排序 :所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。 稳定性 :假定在待排序的记录序列中,存在多个具有相同的关键字的记录&…

分类预测 | Matlab实现基于迁移学习和GASF-CNN-Mutilhead-Attention格拉姆角场和卷积网络多头注意力机制多特征分类预测/故障识别

分类预测 | Matlab实现基于迁移学习和GASF-CNN-Mutilhead-Attention格拉姆角场和卷积网络多头注意力机制多特征分类预测/故障识别 目录 分类预测 | Matlab实现基于迁移学习和GASF-CNN-Mutilhead-Attention格拉姆角场和卷积网络多头注意力机制多特征分类预测/故障识别分类效果基…

动态规划原理及其在优化问题中的应用解析

动态规划原理及其在优化问题中的应用解析 一、最优子结构二、重叠子问题三、何时使用动态规划法四、伪代码示例五、C代码示例七、详细说明动态规划原理7.1、最优子结构7.2 重叠子问题7.3 动态规划的实现 八、结论 动态规划是一种解决优化问题的方法,它通过将原问题分…

神经网络--反向传播算法推导

神经网络–反向传播算法推导 文章目录 神经网络--反向传播算法推导概述神经网络模型反向传导算法 概述 以监督学习为例,假设我们有训练样本集 ( x ( i ) , y ( i ) ) (x^{(i)},y^{(i)}) (x(i),y(i)),那么神经网络算法能提供一种复杂且非线性的假设模型 …

滚雪球学Java(75):Java零基础,轻松学会文件读写技巧

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE相关知识点了,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好…

mp3怎样才能转换成wav格式?音频互相转换的方法

一,什么是WAV WAV,全称为波形音频文件(Waveform Audio File Format),是一种由微软公司和IBM公司联合开发的音频文件格式。自1991年问世以来,WAV格式因其无损的音频质量和广泛的兼容性,成为了多…

【Godot4.2】CanvasItem绘图函数全解析 - 7.自定义节点TextBoard

概述 之前发布的几篇文章几乎阐述了CanvasItem绘图函数最基础的内容。 本篇结合draw_style_box()和TextParagraph类,自定义了一个可以自适应宽高显示多行文本,且带有一个样式盒作为背景的文字板节点TextBoard。 系列目录 0.概述1.绘制简单图形2.设定绘…

kali工具----域名IP及路由跟踪

域名IP及路由跟踪 测试网络范围内的IP地址或域名也是渗透测试的一个重要部分。通过测试网络范围内的IP地址或域名,确定是否有人入侵自己的网络中并损害系统。不少单位选择仅对局部IP基础架构进行渗透测试,但从现在的安全形势来看,只有对整个I…

RHCE--dns正反向解析小实验

一、准备工作 1.关闭防火墙 [rootserver ~]# setenforce 0 [rootserver ~]# systemctl stop firewalld 2.安装软件 [rootserver ~]# yum install bind -y 二、正向解析 服务端IP客户端IP网址192.168.203.128192.168.203.130www.openlab.com 服务端配置静态ip [root…

人工智能|机器学习——基于机器学习的信用卡办卡意愿模型预测项目

一、背景介绍 在金融领域,了解客户的信用卡办卡意愿对于银行和金融机构至关重要。借助机器学习技术,我们可以根据客户的历史数据和行为模式预测其是否有办理信用卡的倾向。本项目通过Python中的机器学习库,构建了两个常用的分类模型&#xff…

Mistral AI突围:开源大模型Mixtral 8x22B颠覆行业格局

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Spark-Scala语言实战(16)

在之前的文章中,我们学习了三道任务,运用之前学到的方法。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢。 Spark-Scala语言实战&#x…

开发板仿真网站(wokwi)初次上手指南(Arduino UNO项目)

在本篇文章中将详细介绍在开发板仿真网站(wokwi)上实现Arduino UNO控制LED灯亮灭。 将学习到如何连接部件、编写代码并在线模拟Arduino项目! 开发板仿真网站(wokwi)简介 可参考《一个免费的在线的开发板仿真网站&#…

IEDA 启动项目时出现 java: java.lang.OutOfMemoryError: GC overhead limit exceeded 异常

问题 通过Idea启动项目时,出现java: java.lang.OutOfMemoryError: GC overhead limit exceeded 内存溢出问题; 解决方案 错误是发生在编译阶段,而不是运行阶段: 【1】idea编译Java项目使用的虚拟机和idea软件自身使用的虚拟机是…

【Linux】应用层协议:HTTP

URL 在之前的文章中我们实现了一个网络版本的计算器,在那个计算器中揉合了协议定制以及序列化反序列化的内容,我们当时也自己定制了一套协议标准,比如请求和响应的格式应该是什么?如何读到一个完整的报文?支持的运算符…

无人机巡检技术革命性变革光伏电站运维管理

在中国广袤的大地上,光伏电站如雨后春笋般崛起,晶体硅组件板在阳光下熠熠生辉,为人们带来了源源不断的绿色能源。然而,随着光伏产业的迅猛发展,电站运维管理面临着前所未有的挑战。而无人机巡检技术的引入,…

MySQL进阶-合

目录 1.使用环境 2.条件判断 2.1.case when 2.2.if 3.窗口函数 3.1.排序函数 3.2.聚合函数 3.3.partiton by ​​​​​​​3.4.order by 4.排序窗口函数 5.聚合窗口函数 1.使用环境 数据库:MySQL 8.0.30 客户端:Navicat 15.0.12 MySQL进阶…

Spring Boot | Spring Boot 整合 “Servlet三大组件“ ( Servlet / Filter / Listene )

目录: Spring Boot 整合 "Servlet三大组件" :1. 使用 "组件注册" 的方式 "整合Servlet三大组件" ( 实际操作为 : 创建自定义的"三大组件"对象 结合刚创建"的自定义组件对象"来 将 XxxRegistrationBean对象 通过…

桥接模式:解耦抽象与实现的设计艺术

在软件设计中,桥接模式是一种结构型设计模式,旨在将抽象部分与其实现部分分离,使它们可以独立地变化。这种模式通过提供更加灵活的代码结构帮助软件开发人员处理不断变化的需求,特别是在涉及多平台应用开发时。本文将详细介绍桥接…